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

Discussion in 'Thảo luận Seo' started by Lê Thanh Sang, Aug 10, 2016.

  1. Hiện tại có một số member mạo danh BQT để giao dịch trên diễn đàn và đã LỪA ĐẢO khá nhiều tại chuyên mục Adwords... Mọi người cảnh giác và đọc bài: Giới thiệu giao dịch đảm bảo bởi @Admin
Lượt xem: 19,742
  1. Lê Thanh Sang

    Lê Thanh Sang Administrator

    Joined:
    Sep 1, 2015
    Messages:
    95
    Likes Received:
    88
    Trophy Points:
    180
    Gender:
    Male
    Home page:
    Best Answers:
    0
    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.

    [​IMG]
    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:

    [​IMG]
    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:

    [​IMG]
    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.

    [​IMG]

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

    [​IMG]

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

    [​IMG]

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

    [​IMG]

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

    [​IMG]

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

    [​IMG]

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

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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 ?

    [​IMG]

    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 !

    [​IMG]

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

    [​IMG]

    *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
    Những thành viên đã thích bài này: tuan92oscar Phuongxoan_49 huydatvangiang
  2. asttravel

    asttravel Top 9

    Joined:
    Jul 25, 2016
    Messages:
    41
    Likes Received:
    6
    Trophy Points:
    80
    Gender:
    Male
    Home page:
    Best Answers:
    0
    Accelerated Mobile Pages (AMP), code viết tay có phương án nào hướng dẫn mình ko?
  3. Lê Thanh Sang

    Lê Thanh Sang Administrator

    Joined:
    Sep 1, 2015
    Messages:
    95
    Likes Received:
    88
    Trophy Points:
    180
    Gender:
    Male
    Home page:
    Best Answers:
    0
    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
  4. LoveTheTop95

    LoveTheTop95 Top 9

    Joined:
    Jun 9, 2016
    Messages:
    76
    Likes Received:
    11
    Trophy Points:
    80
    Gender:
    Male
    Home page:
    Best Answers:
    0
    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 :D nhưng mà nó lược đi nhiều quá, thành ra cũng hơi xấu
    Những thành viên đã thích bài này: Lê Thanh Sang
  5. kteseo

    kteđặt cược bet365_trang web chính thức của bet365_bet365 không thể mở Top 9

    Joined:
    Jun 4, 2016
    Messages:
    70
    Likes Received:
    6
    Trophy Points:
    80
    Best Answers:
    0
    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
  6. Lê Thanh Sang

    Lê Thanh Sang Administrator

    Joined:
    Sep 1, 2015
    Messages:
    95
    Likes Received:
    88
    Trophy Points:
    180
    Gender:
    Male
    Home page:
    Best Answers:
    0
    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?
  7. kteseo

    kteđặt cược bet365_trang web chính thức của bet365_bet365 không thể mở Top 9

    Joined:
    Jun 4, 2016
    Messages:
    70
    Likes Received:
    6
    Trophy Points:
    80
    Best Answers:
    0
    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
    Những thành viên đã thích bài này: Lê Thanh Sang
  8. Lê Thanh Sang

    Lê Thanh Sang Administrator

    Joined:
    Sep 1, 2015
    Messages:
    95
    Likes Received:
    88
    Trophy Points:
    180
    Gender:
    Male
    Home page:
    Best Answers:
    0
    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é.
  9. evnbay

    evnbay Top 7

    Joined:
    Feb 29, 2012
    Messages:
    561
    Likes Received:
    145
    Trophy Points:
    430
    Home page:
    Best Answers:
    0
    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.
    Những thành viên đã thích bài này: Lê Thanh Sang
  10. designlogo

    designlogo Top 9

    Joined:
    May 26, 2016
    Messages:
    52
    Likes Received:
    3
    Trophy Points:
    80
    Gender:
    Female
    Home page:
    Best Answers:
    0
    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.
  11. huydatvangiang

    huydatvangiang Top 9

    Joined:
    Sep 7, 2013
    Messages:
    113
    Likes Received:
    1
    Trophy Points:
    180
    Home page:
    Best Answers:
    0
    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
    upload_2016-8-12_11-22-7
  12. Lê Thanh Sang

    Lê Thanh Sang Administrator

    Joined:
    Sep 1, 2015
    Messages:
    95
    Likes Received:
    88
    Trophy Points:
    180
    Gender:
    Male
    Home page:
    Best Answers:
    0
    Đọ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
    Những thành viên đã thích bài này: designlogo
  13. huyenmy

    huyenmy Top 8

    Joined:
    Aug 21, 2015
    Messages:
    614
    Likes Received:
    89
    Trophy Points:
    280
    Gender:
    Female
    Home page:
    Best Answers:
    0
    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 ạ?
    Những thành viên đã thích bài này: Lê Thanh Sang
  14. dongocnguyetanh

    dongocnguyetanh Top 9

    Joined:
    Mar 18, 2016
    Messages:
    75
    Likes Received:
    0
    Trophy Points:
    60
    Gender:
    Female
    Best Answers:
    0
    Cái này cài vào có bị hack mất dữ liệu không ?
  15. Phuongxoan_49

    Phuongxoan_49 Top 8

    Joined:
    Nov 27, 2014
    Messages:
    535
    Likes Received:
    66
    Trophy Points:
    280
    Gender:
    Male
    Home page:
    Best Answers:
    0
    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ử
    Những thành viên đã thích bài này: Lê Thanh Sang
  16. designlogo

    designlogo Top 9

    Joined:
    May 26, 2016
    Messages:
    52
    Likes Received:
    3
    Trophy Points:
    80
    Gender:
    Female
    Home page:
    Best Answers:
    0
    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 ạ.
  17. Lê Thanh Sang

    Lê Thanh Sang Administrator

    Joined:
    Sep 1, 2015
    Messages:
    95
    Likes Received:
    88
    Trophy Points:
    180
    Gender:
    Male
    Home page:
    Best Answers:
    0
    Cần chứ, Mobile-Friendly khác AMP nhé :D
  18. Lê Thanh Sang

    Lê Thanh Sang Administrator

    Joined:
    Sep 1, 2015
    Messages:
    95
    Likes Received:
    88
    Trophy Points:
    180
    Gender:
    Male
    Home page:
    Best Answers:
    0
    Google muốn tất cả các website đều có AMP để người dùng có trải nghiệm nhanh hơn
    Những thành viên đã thích bài này: Phuongxoan_49
  19. Lê Thanh Sang

    Lê Thanh Sang Administrator

    Joined:
    Sep 1, 2015
    Messages:
    95
    Likes Received:
    88
    Trophy Points:
    180
    Gender:
    Male
    Home page:
    Best Answers:
    0
    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
  20. designlogo

    designlogo Top 9

    Joined:
    May 26, 2016
    Messages:
    52
    Likes Received:
    3
    Trophy Points:
    80
    Gender:
    Female
    Home page:
    Best Answers:
    0
    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 @@.

Share This Page

Loading...