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)

So sánh sự khác biệt giữa AMP HTML và HTML, HTML5

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

Như các bạn đã biết khái niệm về AMP HTML là gì ở bài viết trước đây, vậy sự khác biệt giữa AMP HTML là gì so với HTML và HTML 5 trước đây không đó là câu hỏi thắc mắc của nhiều người mới.

So sánh sự khác biệt giữa AMP HTML và HTML, HTML5 amp-html-la-gi

Thực ra AMP HTML cũng chỉ có một số tùy chỉnh và bổ xung thêm một số thẻ mà HTML 5 trước đây vẫn cho phép chạy để đảm bảo tính ổn định.

  • Thay thế một số thành phần trong tag của HTML5 như: amp-img và amp-video
  • Thực thi thêm một số mã nhúng của các nhà cung cấp đơn vị thứ 3 và đặc biết trong đó là Google như: amp-ad, amp-pinterest, amp-twitter, and amp-youtube
  • Cung cấp thêm một số thẻ phổ biến như: amp-lightbox và amp-carousel
  • Cho phép thực thi một số kỹ thuật mới và dễ dàng cho các hoạt động trong animation như: amp-anim cho phép dễ dàng trình diễn các ảnh động (GIF) hoặc các tập tin Video (WebM hoặc MP4) tất nhiên sẽ có một số trình duyệt tương thích với nó.

Một số lưu ý

Hiển thì Style với AMP <style amp-custom>

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-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><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* any custom style goes here. */
body {
background-color: white;
}
</style>

So sánh sự khác biệt giữa AMP HTML và HTML, HTML5 2016-02-27_094509

Để sử dụng Iframes ta dùng amp-iframe thay cho iframe trước đây

Yêu cầu trong phần thẻ head phải có

<script async custom-element=”amp-iframe” src=”https://cdn.ampproject.org/v0/amp-iframe-0.1.js”></script>

Và được sử dụng như sau:

<amp-iframe width=300 height=300
sandbox=”allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox”
layout=”responsive”
frameborder=”0″
src=”https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA”>
</amp-iframe>

Sử dụng các media file dạng images, video, và audio:

Ví dụ cho amp-img

<amp-img src=”responsive.jpg” width=527 height=193 layout=”responsive” ></amp-img>

Với các file ảnh động hoặc video audio thì cần thiết phải có trong head đoạn code sau

<script async custom-element=”amp-anim” src=”https://cdn.ampproject.org/v0/amp-anim-0.1.js”></script>

Ảnh động chi tiết như sau:

<amp-anim width=400 height=300 src=”my-gif.gif”>
<amp-img placeholder width=400 height=300 src=”my-gif-screencap.jpg”>
</amp-img>
</amp-anim>

Video như sau:

<amp-video width=400 height=300 src=”https://yourhost.com/videos/myvideo.mp4″
poster=”myvideo-poster.jpg”>
<div fallback>
<p>Your browser doesn’t support HTML5 video</p>
</div>
</amp-video>

Đối với file audio phải có code sau trong head:

<script async custom-element=”amp-audio” src=”https://cdn.ampproject.org/v0/amp-audio-0.1.js”></script>

và được sử dụng như sau:

<amp-audio width=400 height=300 src=”https://yourhost.com/audios/myaudio.mp3″>
<div fallback>
<p>Your browser doesn’t support HTML5 audio</p>
</div>
<source type=”audio/mpeg” src=”foo.mp3″>
<source type=”audio/ogg” src=”foo.ogg”>
</amp-audio>

Muốn sử dụng từ Twitter ta cần phải có code sau trong head:

<script async custom-element=”amp-twitter” src=”https://cdn.ampproject.org/v0/amp-twitter-0.1.js”></script>

và phần code được dùng như sau:

<amp-twitter width=390 height=50
layout=”responsive”
data-tweetid=”638793490521001985″>
</amp-twitter>

Sử dụng cho Instagram thì cần phải có đoạn code sau trong head:

<script async custom-element=”amp-instagram” src=”https://cdn.ampproject.org/v0/amp-instagram-0.1.js”></script>

Code được dùng như sau:

<amp-instagram
data-shortcode=”fBwFP”
width=”320″
height=”392″
layout=”responsive”>
</amp-instagram>

Dùng Facebook post hoặc video thì cần phải có đoạn sau trong head:

<script async custom-element=”amp-facebook” src=”https://cdn.ampproject.org/v0/amp-facebook-0.1.js”></script>”></script>

Ví dụ lấy bài viết từ facebook về trang web

<amp-facebook width=486 height=657
layout=”responsive”
data-href=”https://www.facebook.com/zuck/posts/10102593740125791″>
</amp-facebook>

Lấy video từ facebook về trang web

<amp-facebook width=552 height=574
layout=”responsive”
data-embed-as=”video”
data-href=”https://www.facebook.com/zuck/videos/10102509264909801/”>
</amp-facebook>

Làm việc với youtube thì cần có đoạn code sau trong head

<script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script>

Code thêm video từ youtube về web site của bạn

<amp-youtube
data-videoid=”mGENRKrdoGY”
layout=”responsive”
width=”480″ height=”270″>
</amp-youtube>

Sử dụng amp-ad

<amp-ad width=300 height=250
type=”a9″
data-aax_size=”300×250″
data-aax_pubname=”test123″
data-aax_src=”302″>
</amp-ad>

Ngoài ra còn một số tính năng khác mà chúng tôi chưa thể trình bày hết trong khuôn khổ bài viết này

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. Google AMP WordPress Plugin sẽ tự động tạo ra thêm cho bạn thêm một phiên bản riêng cho điện các...
    15 giây trước
  2. Việc khởi chạy một trang web mới là thời điểm thú vị cho doanh nghiệp của bạn. Nó mở ra nhiều...
    6 giây trước
  3. Hình ảnh một trong những yếu tố quan trọng để hoàn thiện hóa một bài viết chuẩn SEO. Sử dụng...
    5 giây trước
  4. Có một điều mà tôi thực sự chưa bao giờ hiểu hết được: Có thể mọi người đoán đó là...
    15 giây trước
  5. Tiêu đề là một trong những yếu tố quan trọng không thể trong một bài viết chuẩn SEO. Chính vì...
    28 giây trước
  6. Kiếm tiền trong khi bạn ngủ? Hay Thu nhập thụ động, Kiếm tiền online đây có phải là một ý tưởng...
    5 giây trước
  7. Như các bạn đã biết, một website chuẩn SEO là một trong những yêu cầu vô cùng quan trọng. Bởi...
    8 giây trước
  8. Làm thế nào để UP tốc độ trang (Page Speed) với Widget Defer? Có cách nào để hoãn một widget ở...
    20 giây trước
  9. Seo onpage Mọi người luôn hỏi tôi rằng điều gì quan trọng nhất trong seo, tôi sẽ trả lời đó...
    14 giây trước
  10. Bạn là một Blogger hay 1 Copywriter? Công việc hàng ngày bạn thường làm có phải là nghiền ngẫm các...
    25 giây trước