A criação de uma página AMP pode ser feita de duas maneiras: criando apenas uma versão AMP que aparece em todos os dispositivos na área de trabalho, tablet ou telefone e a segunda está criando uma página AMP separada da página canônica.Um exemplo faz apenas 1 versão AMP que aparece em todos os dispositivos que é como costuma encontrar no modelo Blogger AMP ou no modelo Blogger AMP que agora usamos.
Mas no Blogger também podemos criar uma página AMP separada da página canônica, utilizando o m=1URL móvel no URL do Blogger. Desta forma, o AMP só aparecerá em dispositivos móveis.
Ao criar o AMP no Blogger apenas exibindo AMP somente m=1neste URL móvel , o ícone do validador AMP na extensão do navegador na tela da área de trabalho e tablet será azul com o ícone do link, como nos blogs do WordPress que usam o plugin AMP.
O ícone do validador AMP na extensão do navegador na tela azul do desktop e tablet com este ícone de link mostra a página que está sendo visualizada em vez da página AMP, mas a página indica que a página AMP da página está disponível. Ao clicar no ícone azul, os visitantes serão redirecionados para a página AMP.
Então, se no Blogger criar uma página AMP somente no URL do celular m=1, quando os visitantes clicarem no ícone do válido AMP da extensão azul na tela da área de trabalho, o visitante será redirecionado para o URLm=1como uma página AMP.
Para criar uma página AMP no Blogger apenas m=1neste URL móvel , precisamos de um blog que tenha sido válido AMP. Em seguida, faremos algumas alterações menores para tornar o AMP apenas no URL móvel m=1.
1. Primeiro passo
Encontre o seguinte código ou código semelhante ao seguinte
<HTML amp='amp' expr:dir='data:blog.languageDirection' lang='id'>Em seguida, substitua o código abaixo
<HTML expr:dir='data:blog.languageDirection' lang='id'>
<b:attr cond='data:blog.isMobileRequest == "true"' name='amp' value='amp'/>2. Primeiro passo
Encontre o seguinte código ou código semelhante ao seguinte
<link expr:href='data:blog.url' rel='canonical'/>
Em seguida, substitua o código abaixo
<b:if cond='data:blog.isMobileRequest == "false"'>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url + "?m=1"' rel='amphtml'/>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true"'>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>
Depois disso, guarde as alterações no modelo. Com estas duas etapas, a página AMP aparece apenas no URL móvel m=1.
Aqui, não precisamos fazer alterações no layout anterior do modelo de blog porque os elementos AMP ainda funcionarão na tela da área de trabalho, mesmo que não seja agora uma página AMP.
E para problemas de postagem, mesmo que fizemos alterações, mas ainda faz postagens com formato AMP como antes.
O que precisamos fazer é otimizar anúncios Adsense. Criaremos anúncios Adsense separados em anúncios de exibição de mesa e anúncios de exibição AMP / móvel.
Para os anúncios gráficos de desktop, então é usado o código usual do anúncio Adsense e para exibir anúncios AMP usando amp-ad.
A primeira coisa a fazer é separar ad js , por favor, encontre o seguinte código js.
Aqui, não precisamos fazer alterações no layout anterior do modelo de blog porque os elementos AMP ainda funcionarão na tela da área de trabalho, mesmo que não seja agora uma página AMP.
E para problemas de postagem, mesmo que fizemos alterações, mas ainda faz postagens com formato AMP como antes.
O que precisamos fazer é otimizar anúncios Adsense. Criaremos anúncios Adsense separados em anúncios de exibição de mesa e anúncios de exibição AMP / móvel.
Para os anúncios gráficos de desktop, então é usado o código usual do anúncio Adsense e para exibir anúncios AMP usando amp-ad.
A primeira coisa a fazer é separar ad js , por favor, encontre o seguinte código js.
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
Remova o código, então, guarde o código abaixo acima do código </head>ou</head><!--<head/>-->
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" 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 {"static_page","error_page"} and data:blog.isMobileRequest == "false" 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>
Ajuste o código de google_ad_clientacordo com a sua conta.
Em seguida, altere todos os slots de anúncio para serem os seguintes.
Em seguida, altere todos os slots de anúncio para serem os seguintes.
<b:if cond='data:blog.isMobileRequest == "false" and not data:blog.searchQuery'>
<!-- Ini iklan untuk tampilan desktop -->
<ins class='adsbygoogle' data-ad-client='ca-pub-1234567890' data-ad-format='rectangle' data-ad-slot='1234567890' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true" and not data:blog.searchQuery'>
<!-- Ini iklan untuk tampilan AMP/mobile -->
<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>
</b:if>
Ajuste o código data-ad-cliente data-ad-sloté de acordo com seu código de anúncio.
E certifique-se de que robots.txtseu blog não bloqueie o URL m = 1. Feito ... boa sorte.
E certifique-se de que robots.txtseu blog não bloqueie o URL m = 1. Feito ... boa sorte.