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

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

Thảo luận trong 'Thảo luận Seo' bắt đầu bởi Lê Thanh Sang, 10/8/16.

Lượt xem: 20,090
  1. Lê Thanh Sang

    Lê Thanh Sang Administrator

    Gia nhập:
    1/9/15
    Bài viết:
    95
    Đã được thích:
    88
    Nơi ở:
    Hà Nội
    Web:
    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-seo/

    [​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-seo/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 seo”.

    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

  2. asttravel

    asttravel Top 9

    Gia nhập:
    25/7/16
    Bài viết:
    44
    Đã được thích:
    6
    Nơi ở:
    57 Trần Quốc Thảo, P.7, Q.3, TP.HCM
    Web:
    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

    Gia nhập:
    1/9/15
    Bài viết:
    95
    Đã được thích:
    88
    Nơi ở:
    Hà Nội
    Web:
    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

    Gia nhập:
    9/6/16
    Bài viết:
    76
    Đã được thích:
    11
    Web:
    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
    Lê Thanh Sang thích bài này.
  5. kteseo

    kteseo Top 9

    Gia nhập:
    4/6/16
    Bài viết:
    70
    Đã được thích:
    6
    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

    Gia nhập:
    1/9/15
    Bài viết:
    95
    Đã được thích:
    88
    Nơi ở:
    Hà Nội
    Web:
    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

    kteseo Top 9

    Gia nhập:
    4/6/16
    Bài viết:
    70
    Đã được thích:
    6
    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
    Lê Thanh Sang thích bài này.
  8. Lê Thanh Sang

    Lê Thanh Sang Administrator

    Gia nhập:
    1/9/15
    Bài viết:
    95
    Đã được thích:
    88
    Nơi ở:
    Hà Nội
    Web:
    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

    Gia nhập:
    29/2/12
    Bài viết:
    561
    Đã được thích:
    145
    Web:
    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.
    Lê Thanh Sang thích bài này.
  10. designlogo

    designlogo Top 9

    Gia nhập:
    26/5/16
    Bài viết:
    52
    Đã được thích:
    3
    Nơi ở:
    Hà Nội
    Web:
    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

    Gia nhập:
    7/9/13
    Bài viết:
    113
    Đã được thích:
    1
    Web:
    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

    Gia nhập:
    1/9/15
    Bài viết:
    95
    Đã được thích:
    88
    Nơi ở:
    Hà Nội
    Web:
    Đọ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
    designlogo thích bài này.
  13. huyenmy

    huyenmy Top 8

    Gia nhập:
    21/8/15
    Bài viết:
    639
    Đã được thích:
    90
    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 ạ?
    Lê Thanh Sang thích bài này.
  14. dongocnguyetanh

    dongocnguyetanh Top 9

    Gia nhập:
    18/3/16
    Bài viết:
    75
    Đã được thích:
    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

    Gia nhập:
    27/11/14
    Bài viết:
    535
    Đã được thích:
    66
    Nơi ở:
    Xuân Thủy, Cầu Giấy
    Web:
    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ử
    Lê Thanh Sang thích bài này.
  16. designlogo

    designlogo Top 9

    Gia nhập:
    26/5/16
    Bài viết:
    52
    Đã được thích:
    3
    Nơi ở:
    Hà Nội
    Web:
    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

    Gia nhập:
    1/9/15
    Bài viết:
    95
    Đã được thích:
    88
    Nơi ở:
    Hà Nội
    Web:
    Cần chứ, Mobile-Friendly khác AMP nhé :D
  18. Lê Thanh Sang

    Lê Thanh Sang Administrator

    Gia nhập:
    1/9/15
    Bài viết:
    95
    Đã được thích:
    88
    Nơi ở:
    Hà Nội
    Web:
    Google muốn tất cả các website đều có AMP để người dùng có trải nghiệm nhanh hơn
    Phuongxoan_49 thích bài này.
  19. Lê Thanh Sang

    Lê Thanh Sang Administrator

    Gia nhập:
    1/9/15
    Bài viết:
    95
    Đã được thích:
    88
    Nơi ở:
    Hà Nội
    Web:
    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

    Gia nhập:
    26/5/16
    Bài viết:
    52
    Đã được thích:
    3
    Nơi ở:
    Hà Nội
    Web:
    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 @@.

Nội quy khi thảo luận:

Dù bạn có cố tình spam bằng cách nào khi BQT diễn đàn phát hiện sẽ lập tức banned nick và xoá toàn bộ bài viết của bạn. Ngoài ra khi phát hiện ra Spam hãy gửi thông báo cho BQT diễn đàn. Hãy suy nghĩ trước khi hành động..!
✓ Khi muốn trả lời ai đó, bạn gõ @ cộng thêm nick diễn đàn của người đó phía sau @, giống như tag tên trên Facebook.
✓ Yêu cầu khi bình luận, bạn phải gõ chữ rõ ràng, không viết tắt, gõ tiếng Việt đầy đủ dấu câu.
✓ Nên dùng font chữ mặc định của diễn đàn, không tô màu lòe loẹt hay dùng size chữ quá lớn khi bình luận.
✓ Bài viết, comment... không được phép quảng cáo dịch vụ, rao vặt, pr... Loại trừ ở chuyên mục Rao vặt đã cho phép.
✓ Nghiêm cấm các chủ đề dạng: Cứu em với, help me, giật tít, câu view... dưới mọi hình thức.
✓ Tất cả các thành viên tham gia diễn đàn cần đọc kỹ Nội quy chung và nghiêm túc tuân thủ.


Chia sẻ trang này

Đang tải...