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í 15++ 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

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

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

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

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. Vào tháng 3 năm 2014, Matt Cutts đã chia sẻ với khán giả ở Triển lãm quảng cáo tìm kiếm...
    2 giây trước
  2. Viết bài chuẩn SEO là cách nhanh nhất giúp tăng thứ bậc website của bạn. Vậy làm thế nào để...
    16 giây trước
  3. Dịch vụ tối ưu website, Tăng tốc Website của bạn, Tối ưu hóa hiệu suất của trang web luôn là...
    30 giây trước
  4. Trong các thành phần tạo nên một website thì giao diện là một yếu tố rất quan trọng. Giao diện ảnh...
    28 giây trước
  5. Google AdSense và quảng cáo Facebook có giúp bạn kiếm ra tiền, tăng thu nhập cho một doanh nghiệp? Điều...
    18 giây trước
  6. Mục tiêu chính của các trang web là muốn người tìm kiếm dễ dàng tìm thấy các sản phẩm hoặc...
    4 giây trước
  7. Chạy kiểm tra tốc độ với các công cụ như Google PageSpeed ​​Insights, WebPageTest hoặc kiểm tra tốc độ của...
    28 giây trước
  8. Câu hỏi Làm cách nào để lấy nội dung WordPress post theo post id? m3tsys Câu trả lời chính xác...
    30 giây trước
  9. Đối với SEOer chúng ta, công việc phụ thuộc rất nhiều vào Google. Nhưng càng ngày những quyết định mới...
    23 giây trước
  10. Chạy một trang web WordPress hoặc một blog có thể nói là điều cực kỳ thú vị đối với mỗi...
    12 giây trước