(Case Study) AMP là gì? Hướng dẫn cài đặt trang Mobile tăng tốc

Accelerated Mobile Pages (AMP) là trang tăng tốc cho thiết bị di động, giúp quá trình trải nghiệm người dùng trên thiết bị di động nhanh đến mức “ngay lập tức” khi bạn Click vào một kết quả trên công cụ tìm kiếm.

AMP là gì? Bạn có muốn một trang như vậy?​

Nếu chúng ta đang quá quen với việc click vào một kết quả nào đó trên Google Search, rồi chờ cho website đó tải lần lượt các thành phần, sau đó mới đọc được.

Thì:

Trang tăng tốc cho thiết bị di động sẽ xuất hiện NGAY LẬP TỨC (Vì nó đã được lưu trong bộ nhớ Google AMP Cache).

Nó sẽ xuất hiện như thế này trên Google tìm kiếm:

​

Trang di động tăng tốc cho một bài viết trên RankBrainO​

Bài viết này là Case Study nên tôi sẽ hướng dẫn từng bước để thực hiện chứ không đi sâu vào cái cơ bản.

Nếu muốn đọc hết thông tin cơ bản, các bạn hãy truy cập dự án AMP để nắm rõ thông tin nhé.

Còn bây giờ…

…bật máy tính lên và làm theo hướng dẫn.

Ôi, thôi chết !!!

Đen cho mấy bạn không có mã nguồn là WordPress.

Vì vậy nếu website mấy bạn không phải WordPress thì chịu khó vào đây để lọ mọ Code nhé.

Bởi:

Mấy thằng WordPress.com, Twitter, Pinterest, Chartbeat, Parse.ly, Adobe Analytics và LinkedIn đã được hỗ trợ đến tận: RĂNG… AMP rồi.

Trừ thằng Facebook không chơi cái AMP này, nó đang dùng riêng cái Facebook Instant Articles (Cái này cài đặt còn dễ hơn, hôm nào rảnh tôi sẽ viết nó).

Đây, ông Facebook Instant Articles sẽ xuất hiện như thế này:

​

Bạn có thấy dấu sét được khoanh đỏ ở góc phải ảnh Thumbnail?​

Quay lại việc chính:

Hướng dẫn từng bước cài đặt trang di động tăng tốc (AMP) cho WordPress

Để được hiển thị trang di động tăng tốc (AMP) cho mã nguồn WordPress, chỉ cần mỗi 2 điều kiện:

– Tạo trang AMP.

– Gắn dữ liệu cấu trúc bài viết trên trang đó.

Bước 1: Tìm và cài đặt Plugins có tên “AMP” như hình dưới.

​

Cài đặt xong, thử một bài viết bất kỳ bằng cách thêm “/amp” sau URL bài viết.

VD:

– URL bình thường của 1 bài viết là: http://rankbraino.com/bai-viet-cho-đặt cược bet365_trang web chính thức của bet365_bet365 không thể mở/

​

– Chúng ta sẽ Test thử bằng URL này trên trình duyệt khi cho thêm “/amp” :http://rankbraino.com/bai-viet-cho-đặt cược bet365_trang web chính thức của bet365_bet365 không thể mở/amp/

​

Đến đây nhiều người lầm tưởng là đã có 1 trang AMP ngon lành, chỉ chờ Google cập nhật là xong.

Nhưng nó chỉ là điều kiện cần (Tạo trang AMP) mà chưa có điều kiện đủ.

Điều kiện đủ là phải:

Tạo thêm dữ liệu có cấu trúc cho trang đó.

Bước 2: Tìm và cài đặt Plugins có tên “Schema App Structured Data” như hình dưới.

​

Bước 3: Vào Settings >> Schema App >> Sau đó click vào “Register with Schema App” để tạo tài khoản.

​

Bước 4: Đăng ký với các trường như hướng dẫn, sẽ được chuyển đến trang

​

Bước 5: Bật Email điền thông tin đăng ký để nhận : URL đăng nhập, Username, Password và Account ID.

​

Bước 6: Điền Account ID ở Email vào ô Account ID trong phần Settings.

Publisher Settings:

Publisher Type (Nhà xuất bản) nếu để là Organization (Tổ chức), Publisher Name đặt tên tùy thích.

Thì bạn phải chú ý về Publisher Logo:

Hãy Up ảnh Logo có chiều cao <= 60px và chiều ngang <= 600px nhé.

Sau đó: Lưu lại.

​

Bước 7: Plugins đã cài đặt hết cho bạn các kiểu dữ liệu cấu trúc trên website. Vì vậy bạn không cần làm gì nữa !!!

Còn nếu muốn Voọc sâu hơn thì đăng nhập Username, Password để vào Schema App tùy chỉnh dữ liệu có cấu trúc theo ý của mình.

​

Bước 8: Vào công cụ kiểm tra dữ liệu có cấu trúc

Copy 1 link bài viết bất kỳ trên website lên đó kiểm tra.

Nếu dữ liệu BlogPosting với “0 cảnh báo” thì bạn đã thành công.

​

Bước 9: Index lại các bài viết, chờ đợi tầm vài ngày rồi vào Google Search Console kiểm tra ‘”Trang dành cho thiết bị di động được tăng tốc”.

Nếu xuất hiện những màu xanh và thông báo bao nhiêu bài viết đã được lập chỉ mục trang AMP thì bạn sắp được xuất hiện trên Google tìm kiếm rồi.

​

Bước 10: Tranh thủ kiểm tra luôn “Dữ liệu có cấu trúc” để xem những trang AMP đã được khai báo cấu trúc dữ liệu chưa ?

​

Bước 11: Khi đã được lập chỉ mục ở cả trang AMP lẫn trang chứa dữ liệu có cấu trúc thì bạn vào trang Demo Google trên thiết bị di động để kiểm tra lần cuối.

Trang Demo này các bạn phải truy cập trên thiết bị di động để kiếm tra nhé:https://g.co/ampdemo

VD:

Bạn truy cập link phía trên với thiết bị di động, sau đó gõ từ khóa “viết bài chuẩn đặt cược bet365_trang web chính thức của bet365_bet365 không thể mở”.

Sang trang 2 Google, tìm kết quả của RankBrainO. Click vào kết quả đó bạn sẽ thấy sự ngạc nhiên đến ngỡ ngàng:

… Nhanh không tưởng !

​

Bước 12: Cùng chiêm ngưỡng thành quả nào.

Tại tôi chưa tối ưu Logo và Title website trên trang AMP nên nhìn hơi lởm. Chắc thời gian tới tôi sẽ tối ưu hơn.

À:

Nó chưa áp dụng hàng loạt, nhưng từ Demo đến chính thức sẽ không còn xa đâu ạ !

​

*Tài liệu này đáng lẽ tôi dành cho học viên, nhưng chả vấn đề gì khi chúng ta cùng được đón nhận.

(Lê Thanh Sang – SEO Manager Vinalink)
*Copy vui lòng ghi nguồn bài viết: RankbrainO​

Accelerated Mobile Pages (AMP), code viết tay có phương án nào hướng dẫn mình ko?

Trên bài có mà, thực hiện đủ 2 điều kiện. Sau đó thay đổi hết các thuộc tính như trong hướng dẫn AMP Project

cái này rất phù hợp với tình trạng mạng của việt nam hiện nay nhưng mà nó lược đi nhiều quá, thành ra cũng hơi xấu

cài này dùng cho link mới hay link cũ vậy, nếu bài viết cũ có làm dc k.
Và như vậy có thay đổi url của bài viết cũ đi không.
Cho hỏi thêm luôn là cái này giúp tăng tốc độ load trang, có hỗ trợ tăng cường Seo k.
Cảm ơn

Link mới hay cũ đều được, URL AMP chắc chắn thay đổi và nó chỉ ảnh hưởng trên thiết bị di động. Tăng tốc độ load trang trên Mobile, ảnh hưởng đến trải nghiệm người dùng nhanh hơn. Người dùng nhanh hơn thì bạn biết SEO sẽ như thế nào?

Cảm ơn anh,
Em vẫn chưa hiểu là nếu em có 1 bài viết đã lâu rồi, giờ thêm url amp vào thì nhue vậy có ảnh hưởng đến thứ hạng từ khóa của link cũ k.
Nếu vậy thì phải redirect 301 qua link amp mới đúng k

Ko cần Redirect nhé, Google sẽ tự động bắt AMP khi người dùng Search trên Mobile, còn trên Desktop vẫn là URL bình thường nhé.

Cái này load khá nhanh khi truy cập qua mobile. Nếu code web của bạn được tối ưu tốc độ + AMP thì có lẽ việc cuối cùng chính là viết nội dung sao cho thu hút người đọc nhất sẽ giúp bạn thành công trong việc đưa người dùng tới website của mình.

Bạn ơi cho mình hỏi sao cái logo của mình đã đặt tỉ lệ là ngang 600px cao 60px rồi mà check vẫn bị lỗi là sao ạ?? mình đã thử tỉ lệ nhỏ hơn vẫn lỗi, ai biết cách khắc phục chỉ mình với. Các bước trên làm không lỗi lầm gì và làm ok hết rồi nhé . cảm ơn các bạn trước.

Trong webmaster tớ thấy có phần giới thiệu tăng tốc cho thiết bị di động , nhưng k biết code nên chẳng giám thử , có bác nào làm cái này rồi, viết bài hướng dẫn cho anh em tham khảo với

Đọc kỹ bài viết, nếu kiểm tra trong Testing Tool mà Blogposting báo lỗi chỗ nào thì click vào đó để xem và sửa

nếu dùng mã nguồn wordpress đã cài đặt tối ưu cho mobile rồi thì có cần cài AMP nữa không ạ?

Cái này cài vào có bị hack mất dữ liệu không ?

Giả sử web có giao diện cho mobile khác với giao diện bản destop không phải mã nguồn wordpress thì có cần cài trang AMP không a? ví dụ site em có 1 cái làm bằng blogger, và mã nguồn khác, cũng không rành code lắm nên k dám thử

Mình làm từ a đến z theo hướng dẫn mà. mình thử test link /amp thì ok rồi, nhưng check bằng tool kia thì nó báo là độ rộng ảnh không phù hợp, mình đã chỉnh ảnh chiều rộng là 600px cao là 60px và ảnh bé hơn thế vẫn báo lỗi là sao ạ.

Cần chứ, Mobile-Friendly khác AMP nhé

Google muốn tất cả các website đều có AMP để người dùng có trải nghiệm nhanh hơn

Chắc mới chỉ từ A đến X. Chiều cao <=60px, chiều rộng <=600px. Hãy đáp ứng chiều cao trước, còn chiều rộng theo tỉ lệ, chứ ko phải fix cứng chiều rộng 600

BÁC nói thế là không đúng rồi, rõ ràng yêu cầu như vậy, để thỏa mãn rộng <=600 cao <= 60 có rất nhiều cặp xy bác có biết không?? thế cặp nào là được cặp nào là không được nếu nói như kiểu bác ấy @@.