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

  • 16
AMP-la-gi

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

Category : Blog

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?

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:

10
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:

12
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.

1

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-seo/

13

– 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-seo/amp/

14

Đế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.

2

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

3

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

4

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

5

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.

6.1

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.

6.2

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.

7

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.

8

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 ?

9

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 seo”.

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 !

10

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 ạ !

11

*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)


16 Comments

Dũng Ngô

10/08/2016 at 10:00 am

Cảm ơn anh rất nhiều, dù em chưa phải học sinh của anh nhưng mạn phép gọi anh bằng thầy ạ.

    Lê Thanh Sang

    Lê Thanh Sang

    10/08/2016 at 4:19 pm

    Cám ơn bạn đã theo dõi các bài viết trên Blog 🙂

Phúc

10/08/2016 at 9:17 pm

cảm ơn anh, nhưng em thắc mắc cái này xíu.
Em cũng mới học seo, mấy người đi trước nói là bài viết trên site chính không nên copy lên các diễn đàn để đi link và phải sửa lại.
Cái này đúng không ạ, vì em thấy anh cũng lấy bài viết đưa y chang lên các diễn đàn seo nên em thắc mắc.
Cảm ơn anh!

    Lê Thanh Sang

    Lê Thanh Sang

    10/08/2016 at 9:54 pm

    Nếu nó là bài viết chất lượng, ở mỗi 1 Forum đều có lượng tương tác tại bài viết thì giống 100% không phải vấn đề.

Nguyễn Minh

25/08/2016 at 10:51 am

Chào anh Sang,
Hiện tại trang của em bị rất nhiều lỗi amp vd như:

The attribute ‘vocab’ may not appear in tag ‘div’.
The attribute ‘property’ may not appear in tag ‘span’.
The attribute ‘property’ may not appear in tag ‘div’.
The attribute ‘href’ may not appear in tag ‘div’.
Missing URL for attribute ‘src’ in tag ‘amp-img’.

Mà em k rành về code, nên không biết sửa sao, không biết mấy lỗi này có plugin nào sửa được không anh.

    Lê Thanh Sang

    Lê Thanh Sang

    28/08/2016 at 8:52 pm

    Không rành về Code thì hơi khó. Bạn nên tìm hiểu kỹ về AMP, nó có cả 1 trang AMP Project cho bạn có thể đọc, hãy dùng Google Dịch nếu không đọc thành thạo tiếng anh.

Dịu

12/09/2016 at 3:00 pm

em cảm ơn anh <3

    Lê Thanh Sang

    Lê Thanh Sang

    12/09/2016 at 3:30 pm

    Cám ơn bạn đã đọc bài viết 🙂

Ty Sàn

18/09/2016 at 9:05 pm

Cảm ơn nhiều. Mới vào kiểm tra mail mới biết có vụ này.

    Lê Thanh Sang

    Lê Thanh Sang

    19/09/2016 at 4:07 pm

    Cám ơn bạn đã theo dõi Blog 🙂

Han le

22/09/2016 at 12:55 pm

Cho em hỏi, khi index amp thì kết quả trước đó có bị mất ko, hoặc kết quả amp này thay thế vị trí trước không ạ. Có ảnh hưởng gì tới thứ hạng từ khóa hiện tại ko!?
Cảm ơn anh.

    Lê Thanh Sang

    Lê Thanh Sang

    25/09/2016 at 9:47 pm

    Nó chỉ ảnh hưởng đến kết quả Mobile thôi nhé, kết quả AMP sẽ thay thế vị trí trước. Không ảnh hưởng đến thứ hạng từ khóa 🙂

Nguyễn Hùng

06/10/2016 at 6:39 pm

Cái này có làm vỡ cấu trúc website bán hàng trên WP ko bạn?

    Lê Thanh Sang

    Lê Thanh Sang

    08/11/2016 at 4:20 pm

    Chưa test trên Theme của bạn, còn Theme bán hàng của mình thì ok nhé.

Sơn Standa

08/11/2016 at 3:55 pm

Cảm ơn Sang, mình làm thành công hết rồi, lúc test không có lỗi và cảnh báo gì cả, nhưng không phải ở mục BlogPosting mà là Webpage…vv
Khi làm xong rồi thì có bị mất index không nhỉ?
Mình cảm ơn!

    Lê Thanh Sang

    Lê Thanh Sang

    08/11/2016 at 4:15 pm

    Dùng Google dịch đọc kỹ phần cài đặt: BlogPosting, Article hay News nhé 🙂 Ko bị mất Index đâu ạ 😀

Leave a Reply

NHẬN ĐƯỢC CÁC BÀI VIẾT ĐỘC QUYỀN VỀ SEO VUA

Tìm hiểu làm thế nào để có quy trình SEO VUA? Các thủ thuật mới nhất về SEO? Tôi chỉ chia sẻ với những người nhận bản tin đăng ký từ tôi. (Nên xem lại trong hộp thư Spam nếu không nhận được, vui lòng click vào "không phải Spam")
Name
Email *