Cập nhật thay đổi thẻ điều kiện cho trang AMP chỉ xuất hiện trên mobile với blogspot

Phong trào sử dụng template AMP cho blogspot có từ năm 2018 đến nay cũng đã trải qua khá nhiều thay đổi. Tại bài viết trước đây có giới thiệu về cách Tạo trang blogspot AMP chỉ xuất hiện trên mobile đã có nhiều lỗi thời.

Tại thời điểm khi bạn xem bài viết này với thẻ điều kiện mới cho template AMP chỉ xuất hiện trên mobile đã có nhiều thay đổi mà cụ thể là với một mẫu template AMP kể trên vẫn có thể dùng javascript bên ngoài(của bên thứ 3) để thêm các tiện ích nhưng các các tiện ích này chỉ xuất hiện khi xem trên máy tính bàn hoặc trên mobile với URL m=1 mà không phải là amp=1. Khi người dùng chuyển sang amp=1 thì các tiện ích sử dụng js ngoài sẽ không tồn tại.

Với tính năng này sẽ tạo điều kiện cho ngưỡi xem trên máy tính tiếp cận được nhiều tiện ích trên trang web/blog hơn, tuy nhiên cũng không nên lạm dụng tính năng này vì blog có thể bị lỗi AMP khi phần css quá lớn.

Với 2 mẫu blogspot AMP tại đây và tại đây đã áp dụng thủ thuật này.

Do vậy tại bài viết này sẽ khắc phục những bất cập của bài viết trước về một số thẻ điều kiện cho template AMP. Và sau đây sẽ đi vào nội dung cụ thể.

Thay thẻ

<b:attr cond='data:blog.isMobileRequest == &quot;true&quot;' name='amp' value='amp'/>

Bằng thẻ

<b:attr cond='data:view.url == data:view.url params { amp: &quot;1&quot; }' name='amp' value='amp'/>

Code link blog kiểu cũ có dạng

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

Thay lại thành:
Code 1

<b: if cond = 'data: view.url! = data: view.url params {amp: & quot; 1 & quot; } '>
<link expr: href =' data: blog.canonicalUrl + & quot;? m = 1 & quot; ' rel = 'alternate' />
<link expr: href = 'data: blog.canonicalUrl + & quot;? amp = 1 & quot;' rel = 'amphtml' />
   </ b: if>
<b: if cond = 'data: view.url == data: view.url params {amp: & quot; 1 & quot; } '>
<link expr: href =' data: blog.canonicalUrl 'rel =' canonical '/>
   </ b: if>

Code 2

<b:if cond='data:view.url == data:view.url params { amp: &quot;1&quot; }'>
      <link expr:href='data:blog.url.canonical' rel='canonical'/>
      <link expr:href='data:view.url' rel='alternate'/>
      <b:else/>
      <link expr:href='data:blog.url.canonical' rel='canonical'/>
      <link expr:href='data:view.url + &quot;?m=1&quot;' rel='alternate'/>
      <link expr:href='data:view.url params { amp: &quot;1&quot; }' rel='amphtml'/>
    </b:if>

Với thẻ chỉ hiển thị trên mobile kiểu cũ

<b: if cond = 'data: blog.isMobileRequest == & quot; true & quot;'>

Thay bằng thẻ

<b: if cond = 'data: view.url == data: view.url params {amp: "1"}'>

Với điều kiện không phải trên mobile tức là trên máy tính để bàn thì dùng thẻ

<b: if cond = 'data: view.url != data: view.url params {amp: "1"}'>

Như vậy khi cài đặt code cho mã quảng cáo Adsense bạn cứ thế thay lại thẻ điều kiện mới là xong ví dụ: Thẻ cũ là:

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<!-- 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;'>
<!--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 lại thành:

<b: if cond = 'data: view.url != data: view.url params {amp: & quot; 1 & quot; } '>
<!-- 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: view.url == data: view.url params {amp: & quot; 1 & quot; } '>
<!--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>

Cơ bản là như vậy bạn có thể tìm thêm tài liệu để tham khảo.