Amp là gì? Hướng dẫn cài đặt Amp cho Website
AMP là gì? Trong thế giới ngày càng phụ thuộc vào thiết bị di động, tốc độ tải trang trở thành một yếu tố quan trọng trong trải nghiệm người dùng. Đó là lý do tại sao công nghệ AMP của Google đã xuất hiện. Như bạn có thể đoán được từ tên gọi, AMP là viết tắt của cụm từ “Accelerated Mobile Pages” – Trang web dành cho phiên bản di động được tăng tốc. Hãy khám phá thêm về AMP và cách nó có thể tăng cường trải nghiệm di động của bạn tại bài viết này nhé!
I. Google AMP là gì?
AMP là viết tắt của “Accelerated Mobile Pages” trong tiếng Anh, có nghĩa là trang web được tối ưu hóa cho phiên bản di động và có thời gian tải nhanh hơn. Google AMP là một công nghệ mã nguồn mở giúp cải thiện tốc độ tải trang cho các trang web trên các thiết bị di động như điện thoại thông minh, máy tính bảng.
1. Kỹ thuật mà Google AMP áp dụng là gì?
Dưới đây là tổng hợp các kỹ thuật mà Google AMP áp dụng.
Kỹ thuật Lazy loading image
Đây là một phương pháp được sử dụng để tối ưu tải trang web. Thay vì tải tất cả hình ảnh và video ngay từ đầu, trang web sẽ chờ đến khi người dùng cuộn đến vị trí đó. Khi người dùng dừng lại để xem hình ảnh hoặc video, trang web sẽ bắt đầu tải nội dung đó. Nhờ vào kỹ thuật này, trang web giảm thiểu việc tải những dữ liệu không cần thiết, cải thiện tốc độ tải trang và cung cấp trải nghiệm người dùng tốt hơn.
Kỹ thuật tải Javascript bất đồng bộ async
Đây là một cách thiết kế website để tối ưu tải trang. Thay vì chờ đợi một tác vụ xử lý hoàn tất trước khi thực hiện tác vụ tiếp theo, các đoạn mã javascript được chạy và tải dữ liệu riêng biệt. Điều này cho phép trang web tiếp tục thực hiện các tác vụ khác mà không phải chờ đợi hoàn thành, giúp giảm thời gian chờ đợi của người dùng.
Kỹ thuật CDN để javascript nhanh chóng
Kỹ thuật này sử dụng hệ thống CDN (Content Delivery Network) để cung cấp nhanh chóng các tệp javascript cho người dùng. CDN là một hệ thống máy chủ phân tán được đặt ở nhiều vị trí khác nhau trên toàn cầu. Khi người dùng truy cập vào trang web, các tệp javascript sẽ được tải từ máy chủ gần nhất, giúp cải thiện tốc độ tải trang và giảm thời gian đáp ứng.
2. AMP hiển thị trên Google Search như thế nào?
Nếu bạn search từ khóa bằng các thiết bị di động, những website có Google AMP sẽ xuất hiện trong kết quả tìm kiếm Google. Cụ thể với biểu tượng tia sét và dòng chữ AMP như hình minh họa sau:
Tiếp theo, khi bạn nhấp chuột truy cập vào AMP link, nội dung AMP sẽ được hiển thị theo một trong hai dạng sau đây:
Trình xem AMP của Google là dạng hiển thị mặc định được sử dụng để Google phân phối và lưu trữ nội dung trên trang web, nhằm cung cấp trải nghiệm tốt hơn cho người dùng khi truy cập vào trang đó.
Signed exchange là dạng hiển thị trên link URL gốc của nội dung, cho phép người dùng truy cập trực tiếp đến trang mà không cần thông qua bước đệm. Nó cần được cài đặt thêm để đảm bảo tính khả dụng của trang cho người dùng.
3. Trạng thái AMP hiển thị trong Google Console
Google Search Console là công cụ hỗ trợ giúp bạn theo dõi trạng thái AMP cho trang web của mình. Bằng cách sử dụng Google Search Console, bạn có thể xem danh sách các trang AMP đã được cài đặt thành công và các trang gặp lỗi. Quá trình kiểm tra trạng thái AMP khá đơn giản, chỉ cần truy cập vào Google Search Console và chọn mục “Trang tối ưu cho thiết bị di động”.
II. AMP Plugin hoạt động như thế nào?
AMP sẽ hiển thị các trang đã được tối ưu HTML, nhằm cải thiện tốc độ tải trang bằng cách loại bỏ các tag quản lý mã HTML làm chậm trang. Tuy nhiên, nếu trang di động có sử dụng JavaScript, các script này sẽ không được hiển thị trong AMP.
Các lưu ý về AMP Plugin gồm:
Sử dụng CSS phiên bản Streamlined và thư viện JavaScript được cung cấp bởi AMP để tránh tình trạng Lazy Loading.
Validate đúng cách để trang AMP hoạt động tốt.
Tăng trải nghiệm bằng cách tải Fonts Custom theo cách riêng.
Không sử dụng Forms trên trang AMP.
Điều chỉnh lại chiều rộng và chiều cao để tránh hình bị biến dạng.
Sử dụng Extension AMP Approved để trình chiếu Video, tuy nhiên, việc quan trọng là cải thiện Readability và Speed để tăng cường trải nghiệm cho trang Mobile.
Hiện nay, cấu trúc Google AMP bao gồm 3 loại:
AMP HTML: Có các Tag tùy chỉnh và Properties, là tập hợp con của HTML và bạn dễ dàng hiểu được nếu bạn đã quen với HTML cơ bản. Tuy nhiên, bên cạnh những lợi ích mà nó mang lại thì cũng tồn tại nhiều hạn chế.
AMP JS: Là Framework JavaScript dành cho trang Mobile, nó giúp quản lý Resource Handling và không đồng bộ Loading. Lưu ý, bên thứ ba như JavaScript sẽ không được phép với AMP.
AMP CDN (Content Delivery Network): Sử dụng để đánh dấu Cache các trang được kích hoạt AMP và tạo một số tối ưu hiệu suất.
III. Google AMP ảnh hưởng SEO như thế nào?
Google khám phá và lập chỉ mục các trang AMP nhằm cung cấp trải nghiệm truy cập website nhanh chóng và đáng tin cậy hơn cho người dùng. Mặc dù AMP không phải là một yếu tố xếp hạng, nhưng việc sử dụng Google AMP giúp website tải trang nhanh hơn.
Để lập chỉ mục, Google áp dụng cùng một tiêu chuẩn cho tất cả các URL, không phụ thuộc vào công nghệ sử dụng. Tuy nhiên, website có tốc độ tải nhanh sẽ được đánh giá cao hơn. Với lợi thế về tốc độ tải, các trang AMP được đánh giá và xếp hạng cao hơn trên thiết bị di động. Điều này phù hợp với xu hướng phát triển mới của Google, tập trung vào trải nghiệm di động.
Để tận dụng lợi ích của AMP trong SEO, quan trọng để đảm bảo rằng trang AMP của bạn không chỉ đáp ứng tiêu chuẩn AMP mà còn đáp ứng tiêu chuẩn mobile-friendly của Google. Bằng cách này, trang của bạn sẽ được Google mobile-first index, một thuật toán xếp hạng mới của Google, ưu tiên lập chỉ mục cho những trang tối ưu tốt trên thiết bị di động.
IV. Hướng dẫn kiểm tra Google AMP
Để kiểm tra tính hợp lệ của trang AMP của bạn, bạn có thể truy cập vào đường link sau: https://search.google.com/test/amp. Sau đó, dán URL của trang mà bạn muốn kiểm tra và nhấp vào nút "Test URL". Nếu trang AMP của bạn hợp lệ, hệ thống sẽ hiển thị thông báo "Valid AMP" với màu xanh lá cây.
V. Kiểm tra tốc độ tải trang
Dưới đây là một số công cụ giúp bạn kiểm tra tốc độ tải trang:
Google PageSpeed Insights: Công cụ này hỗ trợ kiểm tra tốc độ tải trang và đánh giá quá trình tải trang trên các thiết bị khác nhau. Nó cung cấp đề xuất để bạn cải thiện tốc độ tải trang.
Think with Google: Công cụ giúp người dùng kiểm tra tốc độ tải trang trong các điều kiện kết nối mạng khác nhau, bao gồm thời gian tải khi sử dụng mạng 3G, 4G và khác nhau về khu vực địa lý.
Dotcom Monitor: Công cụ này cung cấp kiểm tra và phân tích toàn diện về website, bao gồm thời gian tải trang, số lượng yêu cầu, tốc độ tải trên các trình duyệt phổ biến và kiểm tra hosting và server web.
Các công cụ này sẽ giúp bạn đánh giá hiệu suất và tốc độ tải trang của website để bạn có thể thực hiện các cải tiến và tối ưu hóa.
VI. Ưu và nhược điểm của Google AMP
AMP có rất nhiều ưu điểm đáng chú ý, tuy nhiên, nó cũng tồn tại một số nhược điểm đáng kể, đặc biệt là ảnh hưởng đến doanh thu từ quảng cáo. Hãy cùng SEO Vietnam tìm hiểu chi tiết về các ưu điểm và hạn chế của Google AMP.
1. Ưu điểm của AMP là gì?
Một trong những ưu điểm nổi bật của Google AMP là tăng tốc độ tải trang trên thiết bị di động. Theo các nghiên cứu thống kê, các trang đã cài đặt AMP có tốc độ tải nhanh hơn từ 15% đến 80% so với các trang không sử dụng AMP. Tốc độ tải trang nhanh giúp giảm tỷ lệ thoát trang, cải thiện trải nghiệm người dùng.
Ngoài ra, việc sử dụng AMP cũng mang lại nhiều lợi ích khác. Trang web của bạn sẽ được đánh giá cao hơn và có thứ hạng tốt hơn trên các kết quả tìm kiếm, thu hút nhiều lượt truy cập. Hơn nữa, AMP giúp cải thiện hiệu suất máy chủ bằng cách giảm thiểu yêu cầu truy xuất dữ liệu lớn từ thiết bị di động.
2. Nhược điểm của AMP là gì?
Tuy AMP có hỗ trợ quảng cáo, tuy nhiên, khả năng hiển thị quảng cáo trên các trang AMP có thể bị hạn chế để tối ưu thời gian tải trang. Triển khai quảng cáo trên các trang AMP cũng không dễ dàng. Do đó, điều này có thể gây giảm doanh thu từ quảng cáo.
AMP cũng không hỗ trợ tốt cho việc tích hợp với các nền tảng Analytics. Để thu thập và phân tích dữ liệu, bạn phải triển khai Google Analytics trên từng trang AMP của trang web, đòi hỏi thời gian và công sức nhiều hơn so với trang web không sử dụng AMP.
Hơn nữa, AMP phụ thuộc vào bộ nhớ cache để cung cấp tải trang nhanh chóng. Google không cung cấp công nghệ cụ thể để làm cho trang web tải nhanh, mà chỉ đơn giản đáp ứng truy cập nhanh từ bộ nhớ cache.
VII. Hướng dẫn cài đặt Google AMP cho website
Sau đây là các hướng dẫn cho người mới bắt đầu tìm tòi cách cài đặt Google AMP cho Website của chính mình. Chỉ cần làm theo hướng dẫn, bạn chắc chắn sẽ thành công.
1. Cấu trúc html AMP đơn giản
Để có trang AMP, bạn cần tuân thủ các yêu cầu sau đây trong việc xây dựng trang web:
Sử dụng tiêu chuẩn HTML, đặc biệt là <!doctype html>.
Trang web phải chứa thẻ <html ⚡> hoặc <html amp> để xác định nội dung có định dạng AMP.
Phải có các thẻ <head> và <body> trong trang.
Thẻ con đầu tiên thuộc thẻ <head> phải là <meta charset= “utf-8”> để xác định bộ ký tự.
Phải có thẻ <script async src=”https://cdn.ampproject.org/v0.js”></script> là thẻ con thứ hai trong thẻ <head>.
Phải có thẻ <link rel=”canonical” href=”$SOME_URL” /> trong thẻ <head>.
Phải có thẻ <meta name=”viewport”content=”width=device-width,minimum-scale=1”> trong thẻ <head> để quy định chế độ xem trên thiết bị di động.
Trong thẻ <head>, phải chứa đoạn mã boilerplate AMP.
Tuân thủ các yêu cầu này sẽ giúp bạn xây dựng trang AMP theo đúng quy chuẩn.
2. Lưu trữ AMP trên URL
Để đảm bảo liên kết giữa trang AMP và trang web chính của bạn, tốt nhất là lưu trữ trang AMP của bạn trên một URL phù hợp với người dùng.
Ví dụ với trang web tiêu chuẩn là:
https://example.com/subfolder/this-is-an-example.html, bạn cũng có thể lưu trữ trang AMP theo một trong hai URL sau:
amp.example.com/subfolder/this-is-an-example.html
example.com/subfolder/this-is-an-example-amp.html
Điều này giúp đảm bảo một điều rằng khi người dùng nhấp vào liên kết, URL hiển thị sẽ có những thứ liên quan đến trang web chính của bạn.
3. Làm cho AMP của bạn dễ khám phá
Nếu trang web của bạn cung cấp cả 2 phiên bản: AMP và không AMP, bạn sẽ cần thêm các thẻ HTML như sau:
Trên trang không phải AMP, thêm thẻ sau để tham chiếu đến phiên bản AMP của trang, để thông báo cho Google và các nền tảng khác về sự tồn tại của nó:
<link rel=“amphtml” href= https://example.com/this-is-an-example-amp.html” /
Trên trang AMP, thêm thẻ sau để tham chiếu đến phiên bản chuẩn không phải AMP của nó:
<link rel=“anonical” href= “https://example.com/this-is-an-example.html” />
Đối với các trang AMP độc lập (không có phiên bản không phải AMP), trang AMP phải chỉ định chính nó là phiên bản chuẩn:
<link rel= “canonical” href=“https://example.com/this-is-an-example-amp.html” /
Các trang AMP độc lập cũng sẽ được lập chỉ mục nếu chúng được tìm thấy. Đảm bảo rằng các trang AMP độc lập được liên kết với các trang khác đã được lập chỉ mục hoặc được liệt kê trong sơ đồ trang web (sitemap.xml) của bạn.
4. Kiểm tra tính hợp lệ trang AMP
Để đảm bảo tính tương thích của trang AMP và theo dõi các lỗi, hãy truy cập vào Google Search Console. Đây là công cụ quan trọng để kiểm tra và quản lý trạng thái AMP của trang web của bạn. Hãy đảm bảo theo dõi các trang AMP thường xuyên để đảm bảo chúng không gặp phải lỗi và hoạt động một cách chính xác.
VIII. Hướng dẫn cài đặt Google AMP cho WordPress
Đối với WordPress, bạn có thể cài đặt được plugin AMP cho WordPress hoàn toàn miễn phí. Dưới đây là bốn bước giúp bạn cài đặt plugin này:
Bước 1: Truy cập WordPress Dashboard → Plugins → Add New.
Bước 2: Tại thanh tìm kiếm, gõ tên plugin “AMP for WordPress”.
Bước 3: Chọn nút “Install” để cài đặt plugin.
Bước 4: Sau khi quá trình cài đặt hoàn tất, chuyển đến tab "Appearance" và sau đó chọn “AMP”.
Ở đây, bạn có thể điều chỉnh trang AMP theo ý của mình thông qua các tab khác nhau, ví dụ như:
Tab “Design”: Điều chỉnh văn bản, liên kết, hình nền,...
Tab “General”: Chọn sử dụng AMP cho trang, bài viết,...
IX. Cách mở Website dạng AMP trên Chrome
Để sử dụng giao diện của Google AMP trên trình duyệt Chrome, bạn có thể thực hiện theo các bước sau:
Bước 1: Mở trình duyệt Chrome và tải tiện ích mở rộng AMP Browser Extension.
Bước 2: Sau khi cài đặt thành công, bạn có thể tìm kiếm thông tin như thường lệ. Các trang web hỗ trợ AMP sẽ được đánh dấu bằng biểu tượng tia chớp xanh.
Bước 3: Khi bạn truy cập vào một trang web, nó sẽ hiển thị với giao diện AMP thay vì giao diện mặc định của Chrome. Nội dung của trang web sẽ được tải trước, sau đó là hình ảnh và quảng cáo (nếu có).
Bước 4: Nếu bạn muốn quay lại giao diện mặc định, hãy tắt giao diện AMP. Bạn chỉ cần nhấp vào biểu tượng AMP Browser Extension ở cuối thanh địa chỉ trình duyệt để tắt. Khi đó, biểu tượng của tiện ích sẽ chuyển sang màu xám.
Bước 5: Ngoài ra, bạn có thể truy cập vào giao diện cài đặt bằng cách nhấp chuột phải vào biểu tượng tiện ích và chọn tùy chọn “Options”. Tại giao diện này, bạn có thể bỏ chọn “Load AMP or MIP Pages Automatically” để trang web trở về giao diện mặc định, hoặc bạn có thể chọn các trang web mà bạn không muốn sử dụng giao diện AMP.
X. Cách vô hiệu hóa Google AMP trong tìm kiếm Google trên Android và iPhone
Để vô tắt giao diện AMP và xem phiên bản đầy đủ của trang web khi bạn có kết nối Internet tốc độ cao, bạn có thể thực hiện một số cách như sau:
1. Cách 1: Sử dụng tìm kiếm Google được mã hóa
Bạn có thể dùng Google Search được mã hóa để buộc nó hiển thị phiên bản thông thường của trang Web. Thay vì sử dụng thanh tìm kiếm của trình duyệt, hãy mở trang Encrypted.google.com. Sau đó, thực hiện tìm kiếm trên thanh tìm kiếm của Google như thông thường.
Tuy nhiên, không phải lúc nào kết quả tìm kiếm cũng sẽ được chuyển đến các trang web được mã hóa. Vì vậy, một cách khác là đặt trang Encrypted.google.com làm trang chủ mặc định trên các thiết bị Android, iPhone hoặc iPad của bạn.
2. Cách 2: Sử dụng DeAMpify trên Android để loại bỏ liên kết Google AMP
DeAMpify là một ứng dụng trên Android giúp bạn bỏ qua các liên kết AMP. Tuy nhiên, để sử dụng DeAMpify, bạn cần thực hiện các bước sau trên ứng dụng Google Search dành cho Android:
Khi tìm kiếm trên Google Search, hãy nhấn vào liên kết có nhãn AMP.
Sau đó, chọn DeAMpify và bấm vào tùy chọn “Always” để đặt ứng dụng DeAMpify làm ứng dụng mở liên kết ban đầu.
Lúc này, khi bạn nhấp vào các liên kết AMP trên Google Search, DeAMpify sẽ mở chúng trong trình duyệt Chrome thay vì giao diện AMP.
Ngoài ra, phiên bản Pro của DeAMpify cung cấp tính năng loại bỏ quảng cáo phiền phức và mở khóa một số chức năng nâng cao khác.
3. Cách 3: Sử dụng tính năng Bang của DuckDuckGo để loại bỏ liên kết Google AMP
DuckDuckGo là một công cụ tìm kiếm tập trung vào bảo mật và không theo dõi người dùng. Bạn có thể sử dụng DuckDuckGo để tìm kiếm trên Google và hiển thị liên kết ban đầu.
Để sử dụng DuckDuckGo trên các thiết bị di động Android hoặc iOS, bạn có thể làm theo các bước sau:
Nếu bạn đang sử dụng trình duyệt Chrome trên điện thoại, mở DuckDuckGo.com trên Chrome và nhấn vào “Add DuckDuckGo to Chrome”.
Sau đó, mở Chrome Settings và chọn “Search Engine”. Tại đây, chọn DuckDuckGo làm công cụ tìm kiếm mặc định.
Đối với trình duyệt Safari trên iPhone, bạn có thể thiết lập theo các bước sau:
Trên iPhone, mở phần Settings và chọn "Safari".
Tiếp theo, chọn "Search Engine" và chọn DuckDuckGo làm công cụ tìm kiếm mặc định.
Sau khi thiết lập, khi bạn sử dụng DuckDuckGo để tìm kiếm trên trình duyệt, nó sẽ hiển thị liên kết ban đầu của trang Web thay vì phiên bản AMP.
XI. Kết luận
Như vậy, đó là những thông tin chi tiết về Google AMP và cách sử dụng, cài đặt AMP cho website WordPress. Việc áp dụng AMP có thể giúp tối ưu hóa trang web của bạn để mang đến trải nghiệm tốt hơn cho người dùng di động. Nếu bạn tuân thủ các tiêu chuẩn và đảm bảo rằng trang AMP của bạn đáp ứng yêu cầu mobile-friendly, bạn có thể tận dụng lợi ích của AMP trong SEO và cung cấp trang web nhanh chóng và đáng tin cậy hơn.
Hy vọng rằng thông tin về AMP là gì tên đây sẽ giúp bạn thành công trong việc triển khai và tối ưu hóa website của mình. Nếu bạn còn có bất kỳ câu hỏi nào khác, hãy để cho SEO VietNam biết.
