Como corrigir o schema data-vocabulary.org no Blogger

Recentemente, houve muitos avisos sobre o esquema do data-vocabulary.org, descontinuado especialmente para usuários do Blogger. Na verdade, eu estava atrasada para discutir isso. Mas, o que há de errado em compartilhar coisas que podem ser úteis para outras pessoas.

Como resolver o problema do data-vocabulary.org? Quais são os efeitos colaterais se o ignorarmos? Portanto, aqui vamos discutir isso.

O aviso pretende notificar o Google Webmaster que o Google prefere estruturas de dados do schema.org em vez de data-vocabulary.org. Aqui estão alguns trechos que tirei do Blog oficial da Central para webmasters do Google :

Esquemas de dados estruturados, como schema.org e data- vocabulary.org, são usados para definir estruturas significativas compartilhadas para aplicativos baseados em marcação na Web. Com o crescente uso e popularidade do schema.org, decidimos focar nosso desenvolvimento em um único esquema SD. A partir de 6 de abril de 2020, a marcação data-vocabulary.org não será mais elegível para os recursos de resultados avançados do Google.

Ou seja, todos os sites ou blogs que usam a marcação de esquema data-vocabulary.org já não cumprem mais os requisitos dos recursos do Google Rich Results. Para questões de classificação de SEO e outros fatores, de acordo com o Blog Oficial, não há nenhum impacto. Portanto, seria bom para nós, proprietários de sites ou blogs, acompanhar os tempos e a tecnologia.

Para determinar se você está tendo esse problema ou não, visite o Google Search Console. Se você receber um aviso, precisará corrigi-lo.

Como corrigir problemas obsoletos do esquema data-vocabulary.org

Na verdade, para desenvolvedores, esse é um problema muito simples. Você só precisa alterar o esquema data-vocabulary.org para os dados estruturados do schema.org.

Aqui está uma amostra de código da maioria dos modelos do Blogger (Blogspot) de Breadcrumbs com data-vocabulary.org:

<b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
        <div class='breadcrumb'>
            <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
                <a expr:href='data:blog.homepageUrl' itemprop='title'>Home</a>
            </span>

            <b:loop values='data:post.labels' var='post'>
                <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
                    <a expr:href='data:blog.homepageUrl' itemprop='title'>Home</a>
                </span>
            </b:loop>
        </div>
    </b:if>
</b:loop>

Aqui, podemos alterar o data-vocabulary.org para o schema.org :

<b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
        <div class='breadcrumb'>
            <span itemscope='' itemtype='http://schema.org/Breadcrumb'>
                <a expr:href='data:blog.homepageUrl' itemprop='title'>Home</a>
            </span>

            <b:loop values='data:post.labels' var='post'>
                <span itemscope='' itemtype='http://schema.org/Breadcrumb'>
                    <a expr:href='data:blog.homepageUrl' itemprop='title'>Início</a>
                </span>
            </b:loop>
        </div>
    </b:if>
</b:loop>

Para alterá-lo, siga as seguintes diretrizes:

Se você estiver utilizando o novo layout do Blogger, abra o painel do Blogger , selecione o menu Tema > Clique nos três pontinhos e depois selecione >Editar HTML. Veja na imagem abaixo:

Pressione a tecla CTRL + F no teclado e procure o código: 

<b: includable id = 'breadcrumb' var = 'posts'>

Exclua todo o código entre a abertura e o fechamento da tag <b: includable. O próprio Blogger irá te ajudar nisso. 

</b: includable> 

depois copie e cole o seguinte código abaixo:

<b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:view.isPost'>
        <nav id='breadcrumb'>
            <a class='home' expr:href='data:blog.homepageUrl'><data:messages.home/></a>
            <b:if cond='data:post.labels'>
                <a class='label' expr:href='data:post.labels.first.url'>
<data:post.labels.first.name/></a>
            </b:if>
        </nav>
<script type='application/ld+json'>
{"@context":"http://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[{"@type":"ListItem",
"position":1,"name":"<data:messages.home/>","item":"<data:blog.homepageUrl.canonical/>"},
{"@type":"ListItem",
"position":2,"name":"<b:if cond='data:post.labels'><data:post.labels.first.name/></b:if>",
"item":"<data:post.labels.first.url.canonical/>"},
{"@type":"ListItem","position":3,"name":"<data:post.title/>",
"item":"<data:post.url.canonical/>"}]
}
</script>
</b:if>
<b:if cond='data:view.isPage'>
<script type='application/ld+json'>{"@context":"http://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[{"@type":"ListItem","position":1,"name":"<data:messages.home/>",
"item":"<data:blog.homepageUrl.canonical/>"
},
{"@type":"ListItem","position":2,"name":"<data:post.title/>",
"item":"<data:post.url.canonical/>"}]}
</script>
</b:if>
</b:includable>

Em seguida, defina o estilo para o seu breadcrumb.

Pressione a tecla CTRL + F no teclado e procure o código:

]]</b:skin>

Acima desse código, copie e cole o seguinte CSS no modelo e depois clique em salvar.

#breadcrumb a:not(:first-child)::before {
    content: '/';
    margin: 0 5px;
}

Como verificar a correção de problemas com data-vocabulary

Depois de fazer as alterações acima, visite o Google Search Console. Clique no aviso sobre o problema e pressione o botão Validar correção. Tais reparos exigirão um pouco de tempo.

Além disso, você também pode testá-lo usando o Teste de pesquisa avançado do Google .

Espero que este artigo seja útil e possa melhorar e/ou resolver os problemas com data-vocabulary que você enfrenta.

Gostou? Avalie esse artigo e deixe seu comentário para eu saber que consegui te ajudar.

How To, Fix, data-vocabulary.org, Schema, Deprecated, Error,Esquema breadcrumbs data-vocabulary.org obsoleto,como corrigir breadcrumbs no console de pesquisa do google, esquema google data-vocabulary.org obsoleto