AMP là gì và Cách bắt đầu với Google AMP bạn cần biết

30-09-2020

Diệu Huyền

AMP là gì và Cách bắt đầu với Google AMP bạn cần biết

Bất kỳ ai có trang web đều nên suy nghĩ về cách làm cho các web trên thiết bị di động của họ trở nên thân thiện hơn và đơn giản hơn đối với người dùng của họ. Đảm bảo rằng một website có thể tải nhanh chóng và hiệu quả sẽ giúp bạn giảm tỷ lệ thoát trang từ mỗi người dùng. AMP , hoặc trang dành cho thiết bị di động được tăng tốc, sẽ giúp được việc đó và việc bắt đầu sử dụng nó cho chính mình dễ dàng hơn bạn tưởng. Bạn chỉ cần hiểu nó là gì và nó hoạt động như thế nào để đi đúng đường. Cho dù bạn sở hữu một trang web thương mại điện tử sử dụng WordPress hay một trang web khác là bộ mặt của doanh nghiệp của bạn, AMP có thể giúp bạn theo nhiều cách. Sau đây công ty thiết kế web Expro cùng các bạn phân tích "AMP là gì và Cách bắt đầu với Google AMP bạn cần biết" bài viết dưới đây.

Mục lục [hide]

1 AMP là gì?
2 Cấu trúc của AMP
3 Bắt đầu bằng ví dụ AMP
- 3.1 Mã hóa chuyên dụng
- 3.2 Tổng kết

AMP là gì?

AMP là gì? Được tạo bởi Google, AMP (cũng như các plugin AMP ) là một khung giúp bạn tạo các trang trên thiết bị di động tải nhanh hơn các trang truyền thống của chúng. Đó là thứ mà các nhà phát triển có kinh nghiệm và tiên tiến hơn đã và đang làm việc (vì nó rất quan trọng), nhưng không phải ai cũng có thể tự làm được. Đó là lý do tại sao AMP rất quan trọng và đó là lý do tại sao nó cũng được rất nhiều nhà phát triển khác sử dụng. Bằng cách tạo ra một phương pháp phát triển web nâng cao đơn giản hơn , Google đang làm cho mọi thứ trở nên dễ dàng hơn cho bất kỳ ai muốn tạo một trang web.

Cấu trúc của AMP

Vậy AMP bao gồm những gì và làm cách nào để bạn có được chính xác những gì bạn đang tìm kiếm từ nó? và chỉ có ba phần khác nhau của hệ thống và một khi bạn hiểu chúng và cách chúng hoạt động, bạn sẽ có thời gian dễ dàng hơn nhiều để cố gắng làm cho hệ thống hoạt động cho mình. Bạn sẽ có thể dễ dàng cộng tác với từng khía cạnh khác nhau khi bạn hiểu chúng và điều đó sẽ đảm bảo rằng bạn có một trang web chất lượng cao và hoạt động tốt.

HTML AMP

AMPHTML là một trong những ngôn ngữ cơ bản nhất và là một trong những ngôn ngữ mã hóa ban đầu và AMP là một phiên bản tập hợp con của chương trình. Nó cho phép bạn tạo các thẻ tùy chỉnh cũng như các thuộc tính. Bạn sẽ phải sử dụng một số đã được thiết lập và bạn sẽ có một số hạn chế đối với những gì bạn có và những gì bạn có thể làm, nhưng bạn sẽ có thể thích ứng từ HTML thông thường sang HTML AMP tương đối nhanh chóng. Nó chỉ yêu cầu một chút về việc gắn thẻ bắt buộc, như những mã này ngay tại đây và sau đó bạn sẽ có thể truy cập vào hệ thống của mình.

AMP JS

Đây là khía cạnh JavaScript của trang di động của bạn. Nó giúp bạn tải không đồng bộ và sẽ quản lý tất cả các hoạt động xử lý tài nguyên. Bạn sẽ không thể sử dụng JavaScript của bên thứ ba với AMP, nhưng bạn cũng có thể nhận được một chút tính độc đáo từ quy trình này. Bạn chỉ cần đảm bảo rằng bạn thực hiện một chút nghiên cứu về cách thức hoạt động của quy trình JavaScript bên thứ ba đó và những gì bạn cần làm để làm cho nó giống như cách bạn muốn.

AMP CDN

Cuối cùng là CDN, Mạng phân phối nội dung là tùy chọn để bạn có thể hoàn thành thiết lập AMP của mình chỉ với hai tùy chọn trước đó. Với điều này, bạn sẽ có một bộ nhớ cache của từng trang của mình được tạo thông qua AMP và nó sẽ giúp tối ưu hóa chúng. Bằng cách đó, bạn sẽ có một trang web được tối ưu hóa tốt hơn và hoạt động tốt hơn, và mỗi trang sẽ tương tác tốt hơn với các khía cạnh và thành phần khác nhau mà bạn quyết định đặt trên đó. Bạn chỉ cần đồng ý thực hiện nó, và tốt hơn hết là bạn cứ như vậy.

Kiểu cách tạo trang AMP

Vì vậy, bây giờ giả sử bạn đã sẵn sàng để bắt đầu tối ưu hóa trang web của mình. Bạn đã có phiên bản của tất cả các trang của mình, nhưng bây giờ bạn sẽ cần phải làm việc với hai phiên bản khác nhau. Một là bản gốc. Loại còn lại là phiên bản AMP với các plugin AMP Wordpress nếu bạn sử dụng wordpress thiết kế web. Bạn sẽ không thể sử dụng các phần tử biểu mẫu, biểu mẫu khách hàng tiềm năng, nhận xét trên trang hoặc bất kỳ JavaScript của bên thứ ba nào. Điều này có nghĩa là bạn sẽ phải giảm bớt một số thứ để có được những gì bạn đang tìm kiếm và nó sẽ phải chuẩn hơn trong việc định dạng. Đối với một số trong số này, bạn có thể thêm iframe, nhưng bạn không thể sử dụng nó cho mọi thứ.

Bạn sẽ cần phải điều chỉnh bất kỳ CSS nào mà bạn có thể đang sử dụng để đảm bảo rằng nó phù hợp và cũng để đảm bảo rằng nó không chiếm quá nhiều dung lượng. Bạn sẽ không nhận được nhiều hơn 50 KB vì cách thức hoạt động của hệ thống này và tầm quan trọng của việc tạo ra một trang web hoạt động tốt. Quá nhiều CSS sẽ làm mọi thứ chậm lại và vì toàn bộ mục tiêu của AMP là tăng tốc độ mọi thứ, quá nhiều sẽ không được phép.

Khi bạn muốn sử dụng hình ảnh (mà bạn sẽ sử dụng trên hầu hết các trang web và trang di động), bạn cần phải thực hiện chúng rất cẩn thận. Chúng cần sử dụng phần tử amp-img và chúng phải được chỉ định. Điều đó có nghĩa là bạn không thể chỉ đặt một bức ảnh và để nó như vậy. Bạn phải cực kỳ chính xác về những gì bạn đang đưa vào và nó sẽ lớn như thế nào. Bạn cần biết mọi thứ về hình ảnh đó và bạn cũng cần phải làm như vậy khi nói đến video. Bạn sẽ cần phải cẩn thận hơn nữa về video vì chúng cần được chỉ định theo một số cách khác nhau.

Nếu bạn muốn có một hình ảnh động, bạn muốn sử dụng thuộc tính amp-anim, điều này sẽ giúp bạn có định dạng chính xác. Đối với video, bạn sử dụng các thẻ tùy chỉnh tùy thuộc vào nguồn gốc của video. Video YouTube thậm chí có thể được thêm trực tiếp từ YouTube. Khi bạn muốn trình chiếu hoặc hộp đèn cho hình ảnh của mình hoặc thậm chí các khía cạnh được nhúng từ các trang web truyền thông xã hội yêu thích của mình, bạn cũng có thể xử lý điều đó bằng một số loại mã hóa và các thẻ khác nhau. Mỗi thứ cần được sắp xếp ra, để bạn biết mình đang sử dụng cái gì và bạn sẽ đặt những thứ mình muốn như thế nào, nhưng chúng không khó khi bạn biết.

Hãy nhớ rằng nếu bạn định đưa AMP vào trang web của mình, bạn cần cho phép nó trong phiên bản gốc của trang web bằng thẻ <link rel = "amphtml" href = "yourwebsite.com/amp /"> . Điều này sẽ đảm bảo rằng các thiết bị di động có thể tìm thấy phiên bản phù hợp của trang web và sẽ hiển thị phiên bản AMP khi ai đó cố gắng mở trang web của bạn từ bất kỳ loại điện thoại hoặc máy tính bảng nào. Chỉ cần đảm bảo rằng bạn đặt mọi thứ vào đúng vị trí.

Bắt đầu bằng ví dụ AMP

Vì vậy, giả sử bạn đã sẵn sàng bắt đầu tự mình sử dụng AMP. Bước đầu tiên là trang web của bạn có khả năng không được tối ưu hóa cho AMP. Nhưng đừng lo lắng; không ai thực sự bắt đầu với một trang web được tối ưu hóa AMP. Nó quá mới và không thực tế nếu bạn đang sử dụng trang web của mình chủ yếu để sử dụng máy tính xách tay và máy tính để bàn khi bạn bắt đầu. Sau đó, bạn bắt đầu suy nghĩ về cách bạn sẽ tận dụng tối ưu thiết bị di động và làm cho mọi thứ dễ dàng hơn cho những người dùng khác đang di chuyển. Kiểm tra mã bên dưới , từ AmpProject.

<html amp lang="vi">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=1">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="apple-touch-startup-image" href="https://www.expro.vn/img/webhd-logo.png">

<link rel="apple-touch-icon" href="https://www.expro.vn/img/webhd-logo.png"/>

<link rel="apple-touch-icon-precomposed" sizes="160x90" href="https://www.expro.vn/amp/img/webhd-logo.png">

<meta name="mobile-web-app-capable" content="yes">

<link rel="shortcut icon" sizes="160x90" href="https://www.expro.vn/img/webhd-logo.png">

<meta name="robots" content="index,follow,noodp" />

<link rel="canonical" href="https://www.expro.vn/"/> <title>Công ty thiết kế website chuyên nghiệp uy tín giá rẻ</title>

<meta name="description" content="Công ty thiết kế web Expro ????????✅ thiết kế website chuyên nghiệp, cao cấp, chuẩn SEO. Bảo hành và hỗ trợ trọn đời. Không thiết kế web giá rẻ kém chất lượng.">

<meta name="keywords" content="thiet ke web, lam web, thiet ke web expro, thiet ke website,web chuyen nghiep, thiet ke web chuan seo, thiet ke web chuyen nghiep, thiet ke website chuyen nghiep, thiet ke web nhanh, lam web chuyen nghiep, thiet ke website nhanh, web nhanh, thiet ke web theo mau, thiet ke web gia re, kho giao dien web">

<meta property="og:title" content="Công ty thiết kế website chuyên nghiệp uy tín giá rẻ">

<meta property="og:description" content="Công ty thiết kế web Expro ????????✅ thiết kế website chuyên nghiệp, cao cấp, chuẩn SEO. Bảo hành và hỗ trợ trọn đời. Không thiết kế web giá rẻ kém chất lượng.">

<meta property="og:url" content="https://www.expro.vn/">

<meta property="og:image" content="https://www.expro.vn/img/logo_mp.png">

<meta name="twitter:card" content="summary">

<meta name="twitter:description" content="Công ty thiết kế web Expro ????????✅ thiết kế website chuyên nghiệp, cao cấp, chuẩn SEO. Bảo hành và hỗ trợ trọn đời. Không thiết kế web giá rẻ kém chất lượng.">

<meta name="twitter:title" content="Công ty thiết kế website chuyên nghiệp uy tín giá rẻ">

<meta name="twitter:site" content="@minhnn250385">

<meta name="twitter:image" content="https://www.expro.vn/img/logo_mp.png">

<meta name="twitter:creator" content="@minhnn250385">

<style amp-boilerplate>body{-webkit-animation:-amp-start 8ssteps(1,end) 0s1normalboth;-moz-animation:-amp-start 8ssteps(1,end) 0s1normalboth;-ms-animation:-amp-start 8ssteps(1,end) 0s1normalboth;animation:-amp-start 8ssteps(1,end) 0s1normalboth}@-webkit-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><styleamp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>











</head>

<body>

<h1>Chào mừng bạn tới với Google AMP</h1>

</body>

</html>

Mã này nên được lưu bằng một phần mở rộng HTML, và sau đó bạn sẽ cần phải làm việc trên các khía cạnh đánh dấu và tùy chỉnh mã này.

<! doctype html> là bắt buộc khi bắt đầu viết mã cho bất kỳ tài liệu HTML nào.

<html amp> là cần thiết để hiển thị rằng nội dung là AMP

<head> và <body> là cần thiết như một phần của nội dung AMP (mặc dù không bắt buộc trong HTML)

Đảm bảo bao gồm mã bản soạn sẵn AMP (mã bắt buộc) trong thẻ <head> để đảm bảo nội dung được ẩn cho đến khi AMP JS của bạn bắt đầu tải.

Tất cả những điều này kết hợp với nhau sẽ đảm bảo rằng bạn có một trang AMP. Đó là tất cả những gì nó cần. Bây giờ, bạn vẫn chưa có nhiều thứ ở đây, nhưng trang của bạn đã được tối ưu hóa và điều đó quan trọng đối với quá trình giới thiệu.

Mã hóa chuyên dụng

Tuy nhiên, bạn sẽ cần một số mã hóa đặc biệt để làm cho trang đầu tiên trông đẹp hơn. Nơi bạn có thể sử dụng HTML thông thường trên hầu hết các trang, để tạo ra thứ gì đó độc đáo, bạn sẽ cần HTML AMP chuyên biệt để có được kết quả tương tự. Đó là bởi vì nó sẽ cần nhiều tính năng được sắp xếp hợp lý hơn và khả năng tải nhanh hơn. Điều này được thực hiện với các mã có nhiều thông số kỹ thuật, như kích thước mà bạn nhận được và vị trí cụ thể cho nội dung, đảm bảo rằng nội dung sẽ tải đúng.

Mã hóa chuyên dụngBắt đầu quá trình tùy chỉnh bằng cách thêm một phần tử kiểu từ một trang tính nội tuyến. Bạn có thể sử dụng CSS làm biểu mẫu phần tử của mình với thẻ <style amp-custom>. Bạn đặt bất kỳ thẻ và định dạng tùy chỉnh nào mà bạn muốn và bạn sẽ có thể tạo bố cục chính xác mà bạn đang tìm kiếm. Bạn cũng có thể đảm bảo rằng bạn có các khía cạnh giống nhau trong cách trình bày và hình ảnh, video hoặc các tính năng bổ sung khác mà bạn có thể muốn. Nó sẽ tạo ra một hiệu suất chất lượng cao và độc đáo trên trang web, dù nó được tải từ đâu.

Bạn sẽ cần phải rõ ràng và cực kỳ chính xác về mọi thứ bạn muốn trên trang vì điều đó quan trọng với AMP. Hệ thống yêu cầu mọi thứ bạn thêm vào phải có thuộc tính kích thước và thông số kỹ thuật ở mọi khía cạnh để bạn có thể chắc chắn rằng mình không bị sa lầy. Không ai muốn dành nhiều thời gian và nỗ lực để truy cập vào một trang web từ thiết bị di động của họ, nhưng họ sẽ muốn thứ gì đó trông tuyệt vời và đó là những gì bạn có thể làm với mã hóa chính xác và với sự kết hợp của AMP các yếu tố.

Tổng kết

Vì vậy, nếu bạn đang tìm kiếm một trang web AMP chất lượng cao, bạn sẽ muốn xem xét các tính năng khác nhau và các khía cạnh khác nhau được bao gồm tất cả. Bạn muốn chắc chắn rằng bạn có tất cả các thành phần khác nhau cần thiết để làm cho AMP của bạn trông tuyệt vời cho dù ai đang tải nó và họ đang sử dụng thiết bị nào vì nó luôn quan trọng đối với họ. Chỉ cần đảm bảo rằng bạn xem xét mã của mình để đảm bảo rằng bạn có tất cả các tính năng và khía cạnh cần thiết. Khi bạn có tất cả những điều đó, bạn sẽ có thể bắt đầu xem xét một số tùy chọn tự chọn hơn.

Tạo trang web AMP của bạn với các tính năng chất lượng cao và các khía cạnh độc đáo sẽ tạo ra thứ gì đó tuyệt vời. Bạn sẽ không gặp vấn đề gì khi tạo ra thứ gì đó mà bất kỳ ai ghé thăm cũng sẽ thích và thứ gì đó mà họ chắc chắn sẽ không bỏ qua.

Nhận thông tin họ muốn một cách nhanh chóng và đảm bảo rằng thông tin đó có chất lượng cao là chìa khóa. Bất kỳ ai đã sử dụng trang AMP so với trang truyền thống trên thiết bị di động của họ đều có thể nhận ra sự khác biệt, điều này sẽ cực kỳ quan trọng khi bạn muốn mọi người gắn bó với dịch vụ của mình.

Các công cụ kiểm tra web AMP: https://search.google.com/test/amp. hoặc bạn có thể cài add on trực tiếp trên Chrome AMP Validator. Hoặc tham khảo website https://www.expro.vn với phiên bản Google AMP tương ứng https://www.expro.vn/amp. Nếu có thắc mắc cần hỗ trợ bình luận phía dưới chúng tôi sẽ giải đáp.