Making your page discoverable
Agora que você criou um artigo em AMP, vamos garantir que os usuários possam encontrar e descobrir seu conteúdo.
Vincule conteúdo AMP
Seu site pode ser composto totalmente de páginas AMP, de algumas páginas AMP ou nenhuma. Esta parte do tutorial abordará como incorporar AMP na estrutura do site.
A vinculação canônica em páginas HTML regulares é uma técnica comum para declarar a página que deve ser considerada a preferida quando várias páginas incluírem o mesmo conteúdo.
Uma abordagem comum ao adicionar AMP a um site é gerar versões AMP de páginas HTML tradicionais não-AMP. As duas versões têm geralmente o mesmo conteúdo (por exemplo, o texto de um artigo), mas podem ter apresentações diferentes. Neste cenário, é necessário tratar as páginas HTML tradicionais como as "canônicas" e associar as páginas AMP a elas.
Se possível, use o AMPs como qualquer outra biblioteca JavaScript para criar o site e não faça a vinculação canônica. O uso de AMP para criar um site inteiro reduz drasticamente a necessidade de manutenção.
Neste tutorial, veremos casos em que há versões AMP e não-AMP de uma página. O site deste tutorial inclui um artigo que tem uma página HTML não-AMP (article.html) e uma versão AMP da página (article.amp.html). Elas serão emparelhadas por meio de links.
Já realizamos a primeira etapa para isto no nosso documento AMP ao incluir uma tag de vinculação em <head> na página canônica:
<link rel="canonical" href="/article.html" />
A próxima etapa é vincular o artigo canônico à página AMP. Para isto, incluiremos uma tag <link rel="amphtml"> à seção <head> do artigo canônico.
No arquivo article.html, adicione o seguinte código à seção <head>:
<link rel="amphtml" href="/article.amp.html" />
O diagrama a seguir ilustra as direções das tags de vinculação:
É necessário configurar a vinculação bidirecional para que os mecanismos de pesquisa entendam a relação entre o documento canônico HTML e o documento AMP. Se não forem fornecidos links, não ficará claro para o rastreador qual artigo é a "versão AMP" do documento HTML normal. Ao fornecer explicitamente esses links, garantimos que não haja ambiguidade.
Adicione dados estruturados
Páginas AMP válidas não exigem dados estruturados schema.org, mas algumas plataformas como a Busca do Google exigem isso para determinadas experiências (por exemplo, o carrossel de principais notícias). Em geral, recomendamos a inclusão de dados estruturados. Eles ajudam os mecanismos de pesquisa a entender melhor sua página web, além de exibir de maneira mais adequada seu conteúdo nas páginas de resultado do mecanismo de pesquisa (como em rich snippets). Os dados estruturados são incluídos na tag <head> da sua página AMP por meio de uma tag de script do tipo application/ld+json.
Para nosso artigo, adicione os seguintes dados estruturados na parte inferior da seção <head> do seu documento AMP:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://example.com/my-article.html"
},
"headline": "My First AMP Article",
"image": {
"@type": "ImageObject",
"url": "https://example.com/article_thumbnail1.jpg",
"height": 800,
"width": 800
},
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "John Doe"
},
"publisher": {
"@type": "Organization",
"name": "⚡ AMP Times",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/amptimes_logo.jpg",
"width": 600,
"height": 60
}
},
"description": "My first experience in an AMPlified world"
}
</script>
Atualize a página no seu navegador e verifique se não há erros de validação de AMP.
Valide os dados estruturados
Para verificar se os dados estruturados estão corretos, várias plataformas oferecem ferramentas de validação. Neste tutorial, validaremos nossos dados estruturados com a ferramenta de teste de dados estruturados do Google.
- Em uma nova janela do navegador, abra a ferramenta da teste de dados estruturados do Google.
- Selecione a guia Snippet de código.
- Copie e cole todo o código-fonte da sua página AMP no painel de edição de texto da ferramenta de teste.
- Clique em Realizar teste.
Se os dados estruturados forem válidos, você verá 0 erros e 0 avisos.
Bom trabalho! Seu artigo em AMP está pronto!