Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

AMP HTML là gì? Cách tạo trang AMP cho người mới bắt đầu

5/5 - (11 bình chọn)

AMP HTML là từ viết tắt của Accelerated Mobile Pages, một dự án mã ​​nguồn mở nhằm làm cho trang web trở nên tốt hơn cho người dùng. Dự án cho phép tạo ra các trang web và quảng cáo nhanh chóng, đẹp và hiệu suất cao trên các thiết bị di động và các nền tảng khác nhau. AMP sẽ khiến trang web của bạn cải thiện đáng kể tốc độ tải trang trên các thiết bị di động đặc biệt khi bạn dùng kết nối 3G hoặc ở những vùng có tốc độ đường truyền yếu. Trong bài ngày hôm nay chúng ta cùng nhau tìm hiểu về AMP HTML và cách tạo trang web AMP HTML cho người mới bắt đầu.

AMP HTML là gì? Cách tạo trang AMP cho người mới bắt đầu amp_html

Contents

AMP hoạt động như thế nào?

AMP tải nhanh là sự kết hợp của một loạt các yếu tố được sử dụng để tối ưu hóa trang. Các trang AMP được xây dựng dựa trên 3 thành phần chính:

AMP HTML

AMP HTML là HTML mở rộng với các thuộc tính AMP tùy chỉnh. Mặc dù hầu hết các thẻ trong trang AMP HTML đều là các thẻ HTML thông thường, một số thẻ HTML được thay thế bằng các thẻ AMP cụ thể. Những yếu tố tùy chỉnh này được gọi là các thành phần HTML của AMP. Ví dụ, thẻ amp-img cung cấp đầy đủ srcset ngay cả trong các trình duyệt không hỗ trợ nó. Các trang AMP được phát hiện bởi các công cụ tìm kiếm và các nền tảng khác thông qua thẻ HTML <link rel = “”>.

Xem thêm: Các thẻ HTML trong AMP

AMP JavaScript

Thư viện AMP JS đảm bảo việc hiển thị nhanh các trang AMP HTML. Thư viện AMP JS đảm bảo việc hiển thị nhanh các trang AMP HTML, quản lý tài nguyên tải và cung cấp cho bạn các thẻ tùy chỉnh được đề cập ở trên, tất cả vì mục đích hiển thị nhanh trang của bạn.

AMP Cache

Bộ nhớ Google AMP cache có thể sử dụng để phục vụ các trang HTML lưu trữ trong bộ nhớ cache. Bộ nhớ cache của Google là mạng phân phối nội dung dựa trên proxy để phân phối tất cả các tài liệu AMP hợp lệ.  Nó tìm nạp trang AMP HTML, cải thiện hiệu suất trang một cách tự động. Khi sử dụng bộ nhớ cache của Google AMP, tài liệu, tất cả các tệp JS và tất cả các hình ảnh tải từ cùng một nguồn sử dụng HTTP 2.0 để có hiệu quả tối đa.

Cách tạo trang AMP HTML

Điều kiện cần phải có trang AMP HTML:

– Bắt đầu với <!doctype html> : chuẩn HTML5

– Chứa thẻ <html ⚡> hoặc <html amp> : xác định nội dung trang là AMP.

– Chứa thẻ <head><body>

– Chứa thẻ <meta charset="utf-8"> là phần tử con đầu tiên trong thẻ <head>

– Chứa thẻ <script async src="https://cdn.ampproject.org/v0.js"></script> là phần tử con thứ hai trong thẻ <head> : tải thư viện AMP JS.

– Chứa thẻ <link rel="canonical" href="$SOME_URL" /> bên trong <head>.

– Chứa thẻ <meta name="viewport" content="width=device-width,minimum-scale=1"> bên trong thẻ <head> để tương thích với các thiết bị di động. Khuyến cáo thêm  initial-scale=1.

– Chứa đoạn mã AMP đặc biệt trong thẻ <head>

Đoạn mã đầy đủ như sau:

AMP HTML là gì? Cách tạo trang AMP cho người mới bắt đầu amp_html_code-1

Ngoài các điều kiện cần ở trên, đoạn mã trên cũng bao gồm một định nghĩa schema.org trong phần <head>

không phải là bắt buộc cho AMP, nhưng nó là một yêu cầu để tối ưu nội dung của bạn với công cụ tìm kiếm.

Hình ảnh trong AMP HTML

Hầu hết các thẻ HTML có thể được sử dụng trực tiếp trong AMP HTML, nhưng một số thẻ nhất định ví dụ như thẻ

<img> được thay thế bằng các thẻ AMP HTML (một số thẻ hạn chế sử dụng).

Đây là đoạn mã nhúng hình ảnh vào trang sử dụng thẻ <amp-img>

AMP HTML là gì? Cách tạo trang AMP cho người mới bắt đầu amp_img

Xem thêm:Tại sao lại phải thay thế thẻ <img> bằng <amp-img>

Sửa đổi trình bày và bố cục

Sửa đổi bài trình bày

Các trang AMP là các trang web, style cho trang và các phần tử của nó được thực hiện bằng cách sử dụng các thuộc tính thường dùng của CSS. Các định dạng phần tử sử dụng class hoặc bộ chọn phần tử inline style trong thẻ <head>, được gọi là <style amp-custom>

AMP HTML là gì? Cách tạo trang AMP cho người mới bắt đầu style_amp

Mỗi trang AMP chỉ có thể có một bản inline style, và có một số bộ chọn bạn không được phép sử dụng.

Xem thêm: Định dạng trang với AMP

Kiểm soát bố cục trang web

AMP tuân thủ các quy tắc nghiêm ngặt khi đặt các yếu tố trên trang. Trên một trang HTML thông thường, bạn hầu như chỉ sử dụng CSS để định dạng các phần tử. Nhưng vì các lý do hiệu suất, AMP đòi hỏi tất cả các yếu tố phải có một kích thước rõ ràng.

Xem thêm: Cách hiển thị và bố cục trang AMP

Xem trước và Validate

Xem trước

Xem trước trang AMP giống như bạn sẽ xem trước bất kỳ trang tĩnh HTML khác. Bạn có thể chọn để:

– Mở trang trực tiếp trong trình duyệt từ tập tin.

– Sử dụng một máy chủ web cục bộ như apache.

Validate

Tiếp theo, đảm bảo rằng trang AMP của bạn thực sự là AMP hợp lệ, hoặc nó sẽ không được phát hiện và phân phối bởi nền tảng bên thứ ba như trình tìm kiếm của Google. Để validate ta làm như sau:

– Mở trang trong trình duyệt.

– Thêm “#development=1” vào sau URL, ví dụ, http://localhost:8000/released.amp.html#development=1.

– Mở Chrome DevTools và  Firefox Developer Tools để kiểm tra lỗi validate.

Chuẩn bị trang để được tìm thấy và phân phối

Trong một số trường hợp, bạn có thể muốn có cả phiên bản AMP và phiên bản không phải AMP trên cùng một trang, ví dụ như một bài viết. Nếu công cụ tìm kiếm Google tìm thấy phiên bản không phải là AMP của trang đó, làm sao để biết phiên bản AMP của nó?

Liên kết các trang với thẻ <link>

Để xác định rằng một trang không phải là AMP và một trang AMP là một cặp, chúng ta thêm thông tin về trang AMP vào trang không phải AMP và ngược lại bằng cách chèn thẻ <link> vào trong <head>

Thêm phần sau vào trang không phải AMP:

AMP HTML là gì? Cách tạo trang AMP cho người mới bắt đầu link_nonAMP

Và phần sau vào trang AMP

AMP HTML là gì? Cách tạo trang AMP cho người mới bắt đầu link_AMP

Điều gì xảy ra nếu chúng ta chỉ có một trang?

Nếu bạn chỉ có một trang, và đây là một trang AMP, bạn phải thêm link với thuộc tính rel=”canonical”

AMP HTML là gì? Cách tạo trang AMP cho người mới bắt đầu one_page_link_amp

Xem thêm: Cách Google tìm thấy các trang AMP

Kết luận

Qua bài viết này giúp các bạn biết được AMP HTML là gì và cách làm sao để tạo ra một trang web AMP đơn giản. Hy vọng rằng các bạn sẽ áp dụng được những kiến thức này vào trang web của mình.

Xem thêm:  Dịch vụ thiết kế Website

Tin mới nhất

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Ngành Công nghệ thông tin (IT) hiện nay đang là một ngành được nhiều người yêu thích và lựa chọn....
    11 giây trước
  2. Có vẻ như một nửa số hướng dẫn trong Codex và cộng đồng viết blog (blogosphere) sử dụng query_posts() và nửa số...
    25 giây trước
  3. Nghiên cứu từ khóa cho thông tin là chủ đề đã và đang được đề cập hàng nghìn lần trên...
    10 giây trước
  4. Chorme Developer Tools (viết tắt là DevTools) là một bộ các công cụ hỗ trợ gỡ lỗi web được tích...
    7 giây trước
  5. Hiện nay, Facebook gần như phủ sóng trên toàn cầu. Và nếu bạn đang làm kinh doanh hay bất kỳ...
    21 giây trước
  6. URL là đại diện của một website. Đại diện của doanh nghiệp trên cộng đồng mạng. Vì thế nó cần...
    8 giây trước
  7. Kỷ nguyên công nghệ thông tin 4.0 bùng nổ, nhu cầu mua sắm Online trực tuyến cũng trở thành xu...
    21 giây trước
  8. Hostvn.net là một nhà cung cấp dich vụ Tên miền (Domain) Hosting máy chủ nổi tiếng hiện nay tại Việt...
    6 giây trước
  9. Bài này sẽ giúp bạn hiểu làm thế nào xây dựng Internal link hữu ích và làm thế nào bạn có...
    26 giây trước
  10. Câu hỏi: Tôi từng biết một hàm có chức năng hiển thị lại chính xác code SQL được sử dụng...
    26 giây trước