Um guia de SEO para escrever dados estruturados (JSON-LD)

O vocabulário do Schema.org é o colaboração final

Graças a um acordo mútuo entre Google, Microsoft, Yahoo e Yandex, temos uma biblioteca de campos que podemos usar para destacar e definir com mais precisão as informações nas páginas da web. Ao usar dados estruturados, fornecemos mais segurança aos mecanismos de pesquisa (ou seja, um melhor entendimento do conteúdo da página), como explica Alexis Sanders neste maravilhoso podcast. Isso pode ter vários efeitos positivos, incluindo visualizações de SERP chamativas e classificações aprimoradas.

Se você é um SEO, até que ponto é seguro auditar ou criar uma marca de dados estruturada usando o vocabulário Schema.org? Se você se mexeu desconfortavelmente em seu assento, então este é o guia para você. Nele, proponho desmistificar parte da sintaxe JSON-LD, bem como compartilhar dicas úteis sobre a criação de dados estruturados para páginas da web.

Entendendo a sintaxe JSON-LD

Embora haja algumas maneiras diferentes de marcar o conteúdo da página, este guia enfocará o formato preferido pelo Google. JSON-LD. Além disso, não vamos entrar em todas as suas complexidades, mas nos casos mais comuns e úteis para SEO.

Keys

A primeira coisa que você notará depois da abertura. rótulo, uma chave fechada.

Todos os nossos dados estruturados residirão nessas duas chaves. À medida que desenvolvemos nossa marcação, provavelmente veremos chaves adicionais, e é aí que o sangramento realmente ajuda a impedir que as coisas fiquem confusas demais!

Comillas

A próxima coisa que você notará são as citações. Toda vez que chamamos um tipo de esquema, uma propriedade ou preenchemos um campo, colocamos as informações entre aspas.

Colones

A seguir estão os dois pontos (não ria). Basicamente, toda vez que chamamos um tipo ou uma propriedade, precisamos usar dois pontos para continuar inserindo informações. É um separador de campo.

Comas

As vírgulas são usadas para estabelecer a expectativa de que outro valor (ou seja, mais informações) está chegando.

Observe que depois de preencher o campo de informações da propriedade "logo", não há vírgula. Isso ocorre porque não há informações adicionais a serem declaradas.

Suporta

Quando chamamos uma propriedade que inclui duas ou mais entradas, podemos usar um suporte aberto e um suporte fechado como um gabinete.

Veja como incluímos os perfis Facebook e Twitter da Go Fish Digital dentro da propriedade "sameAs"? Como há mais de uma entrada, colocamos as duas entradas entre parênteses (isso é chamado de matriz). Se incluirmos apenas o URL do Facebook, não usaríamos colchetes. Nós simplesmente colocamos o valor (URL) entre aspas.

Suspensórios internos

Sempre que chamamos uma propriedade que tenha um "tipo" esperado, usaremos as chaves internas para incluir as informações.

Na imagem acima, a propriedade "contactPoint" foi chamada. Esta propriedade específica tem um tipo esperado de "ContactPoint". Não é tão legal e confuso? Vamos analisar isso em mais detalhes mais tarde, mas por enquanto só percebemos que depois de chamar a propriedade "contactPoint", uma chave interna foi aberta. Na próxima linha, você verá o tipo de ContactPoint chamado. As propriedades dentro desse tipo foram indicadas ("telefone" e "tipo de contato") e, em seguida, as chaves internas foram fechadas.

Há mais alguma coisa neste caso de uso que, se você puder entender agora, salvará muitos problemas no futuro:

Olha como não há uma vírgula depois de "atendimento ao cliente". Isso porque não há mais informações para compartilhar nesse conjunto. Mas há uma vírgula depois que a chave interna é fechada, já que há mais dados por vir (especificamente, a propriedade "sameAs").

Criação de marcação de dados estruturados com um gerador online.

Agora que sabemos um pouco sobre a sintaxe, vamos começar a criar uma marcação de dados estruturada.

Os geradores on-line são excelentes se você é um iniciante ou uma maneira de criar uma margem de referência para criar (e economizar tempo). Meu favorito é o gerador de marcas de contorno Merkle, e é o que eu usarei para esta parte do guia.

Em seguida, você deve escolher uma página e um tipo de marca. Para este exemplo, escolhi https://gofishdigital.com/ como nossa página e organização como nosso tipo de marca.

Depois de completar algumas informações, nossa ferramenta criou uma fantástica margem de referência para a página inicial:

Espero que, após nossa aula sobre sintaxe, você possa ler a maioria (ou todos) deste exemplo sem problemas.

Criando marcação de dados estruturados personalizados com um editor de texto

A marcação da linha de base funcionará bem, mas podemos ir além das configurações padrão do gerador on-line, assumir o controle total e escrever dados personalizados e estruturados para a nossa página. Em https://schema.org/Organization, você verá todas as propriedades disponíveis incluídas no tipo de marca Organização. Isso é muito mais do que aquilo que as ferramentas on-line oferecem, por isso, vamos acumular e ter problemas!

Baixe um editor de texto

Neste ponto, temos que armazenar as rodas de treinamento e deixar as ferramentas on-line (uma única lágrima). Precisamos de um lugar onde possamos editar e criar uma marcação personalizada. Eu não vou ser legal com isso, pegue um editor de texto AGORA. Vale a pena e vai servir muito além da marcação de dados estruturados. Vou usar o meu editor de texto favorito, o Sublime Text 3.

Dica profissional: vá em Exibir> Sintaxe> Javascript> JSON para configurar sua sintaxe corretamente.

Eu fui em frente e colei uma margem de referência da Organização do gerador para o Sublime Text. Isto é o que parece:

Adicionando propriedades: Modo Fácil

A página em https://schema.org/Organization tem todos os campos disponíveis para o tipo de Organização. Nossa marcação de linha de base não possui informações de e-mail, então verifiquei a página esquemática e achei isto:

A primeira coluna mostra que há uma propriedade para o email. Pontuação! Eu adicionarei uma vírgula depois do nosso colchete de fechamento para configurar a expectativa de obter mais informações, então eu adicionarei a propriedade "email":

A segunda coluna no Schema.org é o "tipo esperado". Desta vez, diz "texto", o que significa que podemos simplesmente escrever o endereço de e-mail. Meu Deus, eu amo quando é fácil.

Vamos continuar empurrando Eu quero ter certeza de que nosso número de telefone é parte desta marcação, então vamos ver se há uma propriedade para isso …

Bingo E o tipo esperado é simplesmente "texto". Vou adicionar uma vírgula após a propriedade "email" e vou lançá-lo em "telefone". Não é necessário destacar nada neste exemplo; Eu posso dizer que você está aprendendo.

Adicionando propriedades: modo Hard

Em seguida, vamos adicionar uma propriedade que é um pouco mais complicada: a propriedade "address". Como "e-mail" e "telefone", vamos rastreá-lo em https://schema.org/Organization.

Portanto, vejo "texto", mas também vejo um tipo esperado de "Endereço postal". O nome do jogo com a marca de dados é: se puder ser mais específico, seja mais específico. Vamos clicar em "Endereço postal" e ver o que está aí.

Eu vejo uma série de propriedades que exigem valores de texto simples. Escolha algumas dessas propriedades e adicione nossa marca "endereço"!

Aqui estão os passos que tomei para adicionar esta marcação:

• Uma vírgula é colocada após a propriedade "phone".
• Chamado de propriedade "endereço"
• Como a propriedade "address" tem um tipo esperado, eu abri as chaves internas
• Chamado o tipo "PostalAddress"
• Chamado as propriedades dentro do tipo "PostalAddress"
• Suspensórios internos fechados

Você pode ver tudo o que na imagem acima? Se assim for, então parabéns – você completou o modo difícil!

Criando uma matriz complexa

Em nossa discussão de parênteses, mencionei uma matriz. Arrays podem ser usados ​​quando uma propriedade (por exemplo, "sameAs") tem duas ou mais entradas.

Esse é um ótimo exemplo de uma matriz simples. Mas haverá momentos em que temos que criar arranjos complexos. Por exemplo, o Go Fish Digital tem dois locais diferentes. Como poderíamos criar uma matriz para isso?

Não é tão complexo se o quebrarmos. Após as informações da Carolina do Norte, você verá um grampo interno fechado. Acabei de inserir uma vírgula e, em seguida, adicionei o mesmo tipo (PostalAddress) e propriedades para a localização da Virgínia. Como duas entradas foram feitas para a propriedade "address", coloquei tudo entre parênteses.

Criando uma matriz de nós usando @graph

Em 16 de abril de 2019, Joost de Valk desde que Yoast anunciou a chegada do Yoast SEO 11.0, que tinha novos recursos para marcação de dados estruturados. Você pode obter uma descrição geral da atualização nesta publicação e neste vídeo. No entanto, gostaria de me aprofundar em uma técnica específica que o Yoast está usando para oferecer mecanismos de pesquisa incrivelmente informativos, marcas conectadas: criando uma matriz de nós usando @graph (* as calças da multidão).

O código é aberto com "@graph" e, em seguida, um colchete aberto, que chama uma matriz. Essa é a mesma técnica usada na seção anterior, intitulada "Criando uma matriz complexa". Com a matriz agora aberta, você verá uma série de nós (ou tipos de esquema):

• Organização
• Site web
• Pagina web
• BreadcrumbList
• Artigo
• Pessoa

Eu separei cada um (veja abaixo) para que você possa ver facilmente como a matriz é organizada. Existem muitas propriedades chamadas em cada nó, mas a mágica real está em "@id".

Sob a webSite nó, eles chamam "@id" e indicam o seguinte URL: https://yoast.com/#website. Mais tarde, depois de terem estabelecido a web.Página nó, dizem que o site faz parte do site yoast.com com a seguinte linha:

"isPartOf ": {" @id ":" https://yoast.com/#website "}.

Quão impressionante é isso? Eles estabeleceram informações sobre o site e uma página da Web específica e, em seguida, estabeleceram uma conexão entre os dois.

Yoast faz o mesmo no nó Article. Primeiro, na página da Web, eles chamam "@id" novamente e definem o URL como https://yoast.com/wordpress-seo/#webpage. Em seguida, no artigo, eles dizem aos mecanismos de pesquisa que o artigo (ou postagem no blog) faz parte da página da Web com o seguinte código:

"isPartOf ": {" @id ":" https://yoast.com/wordpress-seo/#webpage "}

Ao ler a marcação abaixo, preste atenção especial a estas duas coisas:

• Os 6 nós listados acima, cada um separado para melhor visualização.
• As chamadas "@id" e "isPartOf", que definem, estabelecem e conectam elementos dentro da matriz

Bravo, Yoast!

Página de origem: https://yoast.com/wordpress-seo/

Troubleshooting your markup With all these brackets, braces, and commas in play, mistakes can happen. So how do we detect and fix them?

Sublime Text error reporting

If you followed my pro tip above and set your syntax to JSON, Sublime Text will highlight certain errors for you.

Sublime Text has detected an error and made a highlight. It’s important to note that errors are “reported” in three ways:

• The error is the highlighted item.
• The error is somewhere on the highlighted line.
• The error is somewhere in a previous field.

In this case, it’s the third option. Did you spot it? There’s a missing comma after “[email protected].” Honestly, this error reporting can be confusing at first, but you’ll quickly get used to it and will start pinpointing the mistake(s) fairly easily.

Google’s structured data tool error reporting

Go to https://search.google.com/structured-data/testing-tool > New Test > Code Snippet. Paste and run your code. If there is an error, this is what you’ll see:

Click the error report and the tool will highlight the field after the error. As you’ll see, the missing comma after “info@gofishdigital” has caused the tool to highlight “telephone.” The logic there is that without the comma, that line actually is the error. It makes logical sense, but can be confusing, so it’s worth pointing out.

Sublime Text’s “hidden” underscore feature

Validating structured data markup can be maddening, and every little trick helps. As your structured data gets more complicated, the number of sections and brackets and curly braces is likely to increase. Sublime Text has a feature you may not have noticed that can help you keep track of everything!

In the above image, I’ve placed my cursor on the first line associated with the “sameAs” property. Look closely and you’ll notice that Sublime Text has underscored the brackets associated with this grouping. If the cursor is placed anywhere inside the grouping, you’ll need those underscores. I often use this feature to match up my brackets and/or curly braces to be sure I haven’t left any out or added in an extra.

Validating your structured data

Of course, the ultimate goal of all this error checking is to get your code to validate. The troubleshooting tips above will help you develop a bulletproof method of error checking, and that you’ll end up with the euphoric feeling that validated markup gives!

Using Google search for unique cases

The lessons and examples in this guide should provide a solid, versatile knowledge base for most SEOs to work with. But you may run into a situation that you’re unsure how to accommodate. In those cases, Google it. I learned a lot about JSON-LD structured data and the Schema vocabulary by studying use cases (some that only loosely fit my situation) and fiddling with the code. You’ll run into a lot of clever and unique nesting techniques that will really get your wheels spinning.

Structured data and the future of search

The rumblings are that structured data is only going to become more important in moving forward. It’s one of the ways Google gathers information about the web and the world in general. It’s in your best interest as an SEO to untie the knot of JSON-LD structured data and the Schema vocabulary, and I hope this guide has helped do that.