Hướng dẫn thêm hình ảnh trên các trang AMP

Sự khác biệt cơ bản nhất giữa các phiên bản AMP và không phải AMP là việc viết mã hình ảnh sử dụng các thẻ đặc biệt <amp-img>.

Để vượt qua xác thực, hãy đảm bảo rằng tất cả các thẻ hình ảnh <img> trong bài đăng của bạn đã được thay thế bằng <amp-img>. Ví dụ về cách viết hình ảnh chính xác trong AMP:

<div>
  <amp-img alt='image_title_here' src='image_url_here' width='xxx' layout='intrinsic' height='xxx'/>
</div>

Việc ghi các thuộc tính chiều rộng và chiều cao là bắt buộc để tỷ lệ cỡ ảnh được biết mà không làm thay đổi kích thước ban đầu của hình ảnh.

Một số tùy chọn bố cục được hỗ trợ bao gồm fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, và responsive. Các bố cục được sử dụng phổ biến nhất là responsive và intrinsic, ngoài việc dễ dàng hơn, hình ảnh hiển thị cũng điều chỉnh theo kích thước màn hình.

Đọc toàn bộ tài liệu tham khảo trên amp-img.

Tầm quan trọng của việc sử dụng thẻ thẻ <noscript>

Công dụng cơ bản của thẻ này là hiển thị nội dung khi javascript bị tắt trong trình duyệt của người dùng.

Trong trường hợp của Blogger, thẻ này là bắt buộc để hiển thị hình ảnh thu nhỏ của bài viết trên trang chủ hoặc trong các tiện ích con khác như PopularPosts hoặc FeaturedPost, ví dụ:

<div>
  <amp-img alt='image_title_here' src='image_url_here' width='xxx' layout='intrinsic' height='xxx'/>
  <noscript><img alt='image_title_here' src='image_url_here'/></noscript>
</div>

Truy cập Bypass Google Account APK để tải file APK nhé