• Pagina inicial
  • Artigos
  • Em geral
  • Como adicionar rich snippets para comentários e classificações sem nenhum plug-in? Marcação de microdados do Google Structured Schema.org

Como adicionar rich snippets para comentários e classificações sem nenhum plug-in? Marcação de microdados do Google Structured Schema.org

Publicados: 2020-04-21
Como adicionar rich snippets para comentários e classificações sem nenhum plug-in? Marcação do Google Structured Schema.org

Você já se perguntou how and why o Google está mostrando classificação para algumas das postagens de revisão especial na página de resultados de pesquisa do Google (SERP)?

Neste tutorial, discutiremos como add rich snippet para Revisão/Classificação no formulário de schema.org para que o Google possa entender detalhes sobre sua revisão e mostrá-la na página de pesquisa.

Crunchify - Temas Genesis - a Página do Google está qualificada para pesquisa aprimorada

Confira o resultado ao vivo: https://crunchify.me/2VAUkTK. Link de trecho rico.

Antes de começarmos, vamos entender o que é schema.org?

Schema é um tipo de microdata que torna mais fácil para os motores de busca Google ou Bing analisar e interpretar as informações nas páginas do seu blog de forma mais effectively . A ideia é ajudar os mecanismos de pesquisa a entender todos os dados em um structured format para que o mecanismo de pesquisa também mostre esses dados de resultados relevantes de volta aos usuários finais com base nas consultas de pesquisa.

Vamos começar:

Ponto-1) Como adicionar dados estruturados ao seu blog na forma de schema.org?

No Crunchify, estamos usando o Genesis Framework e, por padrão, vem com todos os formatos de schema.org microdata . Ele produz microdados no código do seu site. Não preciso adicionar nada e essa é a beleza do Genesis Framework, exceto a opção de Review metadata , que discuss below .

Ponto-2) Como verificar os dados estruturados do seu site?

Google Search Console , por padrão, oferece uma opção para ver dados estruturados. Dê uma olhada nos diagramas abaixo.

Google Search Console - Relatório de dados estruturados - Crunchify
Verifique todos os tipos de dados estruturados do Schema.org no Google Search Console

Para ver esses dados, você precisa adicionar seu site/blog ao Search Console. Depois de verificar a identidade do seu site, você poderá ver os dados imediatamente OR aguardar uma semana para que esses dados sejam gerados automatically .

Ponto-3 Como verificar se seus dados estruturados são válidos ou apresentam algum problema?

  • Na última coluna adicional no diagrama acima Items with Errors , o Google também fornece uma ferramenta adicional chamada Ferramenta de teste de dados estruturados.
  • Basta ir até lá e clicar em Fetch URL .
  • Forneça o URL e clique em FETCH & VALIDATE .
  • No lado direito – você deve ver o resultado da validação do schema.org.
  • Em caso de falha e mau schema.org - você deve ver a mensagem de cor VERMELHA .
Dicas da Ferramenta de teste de dados estruturados do Google
Resultado do teste de dados estruturados para publicação Crunchify

Expand above Review section e você poderá ver todos os microdados detalhados para sua revisão. Você poderia verificar por si mesmo. Here is a URL.

Este tutorial funcionará se você tiver alguma das perguntas abaixo:

  • Ativando Rich Snippets para avaliações e classificações
  • Dados estruturados para revisão
  • Dados estruturados para classificação
  • Gerador de esquema de classificação agregado
  • Criador de esquema para microdados do schema.org 'Revisar'
  • gerador de revisão de rich snippet
  • google rich snippet para revisão
  • ferramenta de visualização de rich snippets
  • rich snippet para postagem de blog do WordPress
  • receita para site de rich snippets
Crunchify - genesis - Revise os detalhes do esquema de snippets

Etapa 4 Vamos adicionar o snippet Review Schema.org

Aqui está um código HTML que você precisa colocar em seu painel de edição de postagem na TEXT section .

1
2
3
4
5
6
7
8
9
10
< div class = "crunchify-rating" itemscope itemtype = "http://schema.org/Review" >
     < span itemprop = "itemReviewed" itemscope itemtype = "http://schema.org/Thing" style = "font-size: 14px;" > < a itemprop = "url" href = "https://crunchify.me/genesis" target = "_blank" > < span itemprop = "name" > < strong > Genesis WordPress Theme Framework Review < / strong > < / span > < / a > < / span >
     < p > < / p >
     < strong > Description : < / strong > < span itemprop = "description" > One of the best WordPress Theme Framework which we use on Crunchify . com . Default comes with Google ' s rich schema . org snippet microdata . < / span >
     < span itemprop = "author" itemscope itemtype = "http://schema.org/Person" > < strong > Written by : < / strong > < span itemprop = "name" > App Shah < / span > < / span >
     < span itemprop = "reviewRating" itemscope itemtype = "http://schema.org/Rating" > < strong > Rating : < / strong > < span itemprop = "ratingValue" > 5 < / span > out of < span itemprop = "bestRating" > 5 < / span > < / span >
     < span itemprop = "publisher" itemscope itemtype = "http://schema.org/Organization" >
         < meta itemprop = "name" content = "Crunchify, LLC." / >
     < / span >
< / div >

Modifique os valores de acordo e o código acima será convertido em um widget agradável com CSS tricks simples, como você vê na imagem abaixo.

URL com exemplo de revisão ao vivo: https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/

Genesis Framework Review por Crunchify - melhor tema para microdados do schema.org

E é isso. Depois de adicionar o código acima à postagem do blog, volte para a Google Structured Data Validation tool novamente e verifique o URL da postagem :). Pode levar até uma week para atualizar sua postagem no SERP com base no algoritmo de rastreamento.

Qual CSS estamos usando no Crunchify?

No Crunchify, estamos usando o CSS abaixo. Basta adicionar o código abaixo ao arquivo style.css do seu tema, modificar a propriedade conforme sua necessidade e está tudo bem.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
. crunchify - rating {
overflow : hidden ;
margin - bottom : 35px ;
border - radius : 3px ;
box - shadow : 0 0 2px 0 rgba ( 0 , 0 , 0 , . 12 ) , 0 2px 2px 0 rgba ( 0 , 0 , 0 , . 24 ) ;
font - size : 16px ;
color : #333;
padding : 30px 60px 5px ;
background : #fff;
border - left : 2px solid #157BDA;
}
. crunchify - rating : before {
content : "Rating" ! important ;
font - size : 16px ;
text - transform : uppercase ;
color : #fff;
float : left ;
margin : 2px 15px 15px 0 ;
background : #157BDA;
padding : 0px 20px ;
border - radius : 30px ;
}

Como posso adicionar o arquivo CSS acima à página habilitada para AMP?

Basta adicionar o conteúdo CSS acima em <head> da sua página na tag HTML <style amp-custom> .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
   < head >
     . . .
     <style amp-custom>
      /* any custom styles go here. */
.crunchify-rating {
overflow : hidden ;
margin-bottom : 35px ;
border-radius : 3px ;
box-shadow : 0 0 2px 0 rgba ( 0,0,0,.12 ) , 0 2px 2px 0 rgba ( 0,0,0,.24 ) ;
font-size : 16px ;
color : #333 ;
padding : 30px 60px 5px ;
background : #fff ;
border-left : 2px solid #157BDA ;
}
.crunchify-rating:before {
content : "Rating" !important ;
font-size : 16px ;
text-transform : uppercase ;
color : #fff ;
float : left ;
margin : 2px 15px 15px 0 ;
background : #157BDA ;
padding : 0px 20px ;
border-radius : 30px ;
}
     </style>
     . . .
   < / head >

Deixe-me saber se você tiver mais perguntas.

Não se esqueça de obter sua cópia do Genesis Framework.

Blog feliz.