×

Tạo trang AMP chỉ xuất hiện trên mobile cho blogspot

Việc tạo trang AMP cho blogspot có thể được thực hiện theo 2 cách:
- Tạo 1 phiên bản AMP xuất hiện trên tất cả các thiết bị máy tính để bàn, máy tính bảng hoặc điện thoại thông minh.
- Tạo trang AMP tách biệt với trang chuẩn và trang AMP này chỉ xuất hiện trên mobile.

Thường ở các mẫu blogspot AMP chia sẻ free người ta chỉ tạo 1 phiên bản AMP dùng cho cả máy tính để bàn và thiết bị di động thông minh.
Nhưng trên blogspot ta hoàn toàn có thể tạo trang AMP riêng biệt từ trang chuẩn bằng cách sử dụng m=1URL trên thiết bị di động trong URL của Blogspot. Bằng cách này, AMP sẽ chỉ xuất hiện trên thiết bị di động.

Với việc tạo AMP trên Blogspot theo cách chỉ hiển thị AMP trên URL trên thiết bị di động m=1 này thì biểu tượng trình xác thực AMP trong tiện ích trình duyệt trên màn hình máy tính để bàn và máy tính bảng sẽ có màu xanh lam với biểu tượng liên kết như trong blog WordPress sử dụng plugin AMP.

Biểu tượng trình xác thực AMP trong tiện ích trình duyệt trên màn hình máy tính để bàn và máy tính bảng màu xanh có biểu tượng liên kết này cho người truy cập biết mình đang xem trang chuẩn thay vì xem trang AMP nhưng trang AMP vẫn đang có sẵn. Bằng cách nhấp vào biểu tượng màu xanh, khách truy cập sẽ được chuyển hướng đến trang AMP.

Vì vậy, nếu trên Blogger, chúng tôi chỉ tạo trang AMP trên URL trên thiết bị di động m=1 khi khách truy cập nhấp vào biểu tượng trình xác thực AMP của tiện ích mở rộng màu xanh trên màn hình máy tính để bàn, khi đó khách truy cập sẽ được chuyển hướng đến URLm=1dưới dạng trang AMP.

Ưu điểm với blogspot thiết lập theo cách này nếu sử dụng Google adsense thì việc cài đặt code quảng cáo rất thuận tiện,bạn có thể cài đặt riêng rẽ mã quảng cáo khi xem trên máy tính bàn và khi xem trên mobile vì với 1 phiên bản dùng chung thường code cài theo ads AMP bị lỗi khi xem trên máy tính bàn.

Để tạo trang AMP trên Blogspot chỉ xuất hiện trên URL di động m=1, chúng ta cần một mẫu blogspot phải là AMP hợp lệ chung cho tất cả các loại thiết bị. Sau đó, chúng ta sẽ thực hiện một số thay đổi nhỏ để chỉ tạo AMP với URL m=1 trên thiết bị di động.

Bước 1

Tìm mã sau đây hoặc mã tương tự
<HTML amp='amp'  lang='vi'>
Thay thành
<HTML  lang='vi'>
<b:attr cond='data:blog.isMobileRequest == &quot;true&quot;' name='amp' value='amp'/>
Tìm mã
<link expr:href='data:blog.url' rel='canonical'/>
Thay thành
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url + &quot;?m=1&quot;' rel='amphtml'/>
</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>

Với hai bước này, chúng ta đã thực hiện trang AMP chỉ xuất hiện trên URL di động m=1.Ở đây, chúng ta không cần phải thực hiện thay đổi đối với bố cục trước của mẫu blogspot vì các phần tử AMP sẽ vẫn hoạt động trên màn hình máy tính để bàn mặc dù nó không phải là trang AMP.

Những gì chúng ta cần làm là tối ưu hóa quảng cáo Adsense. Chúng ta sẽ tạo quảng cáo Adsense riêng biệt khi hiển thị trên máy tính để bàn và quảng cáo khi hiển thị trên thiết bị di động.

Đối với quảng cáo hiển thị trên máy tính để bàn ta sử dụng là mã quảng cáo Adsense thông thường với nhiều tùy chỉnh hơn, và quảng cáo AMP hiển thị sử dụng amp-ad mà không bị lỗi khi xem trên máy tính bàn.

Điều đầu tiên cần làm là tách các js quảng cáo , vui lòng tìm mã js sau.
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
Thay thế nó bằng đoạn mã sau
<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
</b:if>
<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<script>
//<![CDATA[
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-1234567890",
          enable_page_level_ads: true
     });
//]]>
</script>
</b:if>
Thay trị số ca-pub-1234567890 theo tài khoản của bạn.

Sau đó, thay đổi tất cả mã quảng cáo cài đặt trước hoặc cài mới theo code như sau.
<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<!-- Quảng cáo trên desktop -->
<ins class='adsbygoogle' data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890'....với các trị số có trong mã quảng cáo cụ thể style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<!--Quảng cáo AMP trên mobile -->
<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' data-auto-format='rspv' data-full-width='' height='320' type='adsense' width='100vw'>
  <div overflow=''/>
</amp-ad>
</b:if>
Thay các trị số  (1234567890) là mã tài khoản và mã  slot theo trị số tài khoản ads của bạn.
Trong code phần "Quảng cáo trên desktop" bạn hoàn toàn có thể thay bằng mã ads thông thường có trong mục các đơn vị quảng cáo với các tùy chỉnh cho phép.
Chú ý
Nhớ vào kiểm tra và đảm bảo robots.txt blog của bạn không chặn m = 1 URL.

8 nhận xét:

  1. chào bạn bạn có thể giúp mình đc không ạ trang của mình không có mã này HTML amp='amp' lang='vi' bạn có thể kiểm tra giúp mình với www.nhomkinhhoangsa.com

    Trả lờiXóa
    Trả lời
    1. Template blog của bạn ko phải là template AMP nên ko có đoạn html đó.
      "Để tạo trang AMP trên Blogspot chỉ xuất hiện trên URL di động m=1, chúng ta cần một mẫu blogspot phải là AMP hợp lệ chung cho tất cả các loại thiết bị."

      Xóa
  2. vậy không có cách nào làm cho nó thành amp ah bạn

    Trả lờiXóa
    Trả lời
    1. Có chứ bạn viết lại code theo chuẩn AMP, tìm một mẫu landing AMP free hoặc mua.Mẫu landing AMP thì hơi ít còn mẫu thường thì rất nhiều.
      Ví dụ một mẫu: https://kompilandingamp.blogspot.com/
      Mẫu AMP chỉ dc sử dụng javascript của dự án amp và ko dc dùng của bên thứ 3 nên bị hạn chế nhiều chức năng cho web.
      Nhanh thì có nhanh nhưng ko nên dùng và chờ bao giờ blogger hỗ trợ amp thì hãy dùng.

      Xóa
  3. bạn có làm đc không có thể viết lại code trang web cho mình

    Trả lờiXóa
    Trả lời
    1. Trước đây mình cũng chạy thử 1 blog AMP dc 1 thời gian thấy bất cập nên bỏ rồi.Riêng khâu post bài cũng phải tuân thủ nếu ko sẽ bị lỗi.
      Giao diện thì đơn điệu.....
      Còn mẫu landing AMP mình ko có nên ko giúp bạn dc.
      Kiểm tra lỗi AMP tại:
      https://search.google.com/test/amp?hl=vi

      Xóa
  4. Liên kết blog không ạ
    https://blogvnz.com

    Trả lờiXóa

Ads in post custom

Ads in post custom1

Ads in post custom2

Ads in post custom3