Como adicionar marcação de esquema ao WordPress programaticamente

Publicados: 2022-04-21

Deseja adicionar marcação de esquema ao WordPress programaticamente ? Nesse caso, você pode usar vários trechos de código de várias maneiras para o seu site WordPress.

Mas antes de darmos uma olhada em como adicioná-los, vamos ver brevemente o que você quer dizer com marcação de esquema.

O que é marcação de esquema?

A marcação de esquema é uma estrutura de dados padronizada fornecida pelo schema.org. Basicamente, ele fornecerá informações sobre a página atual para os mecanismos de pesquisa . Assim, seus bots rastreadores podem entender sobre o que é o conteúdo e criar rich snippets nos resultados da pesquisa.

Os dados contidos no esquema são apresentados em um par chave-valor como [“telefone”: “152234029”]. Também pode ter vários níveis de herança. Eles são muito importantes para aumentar a taxa de cliques (CTR) do seu site e são considerados uma das melhores práticas de SEO também.

Há muitos tipos de propriedades de chave que podem ser usadas com o esquema. Eles variam de dados e tipos de dados baseados em hierarquias abertas e fechadas. Visite o site shcema.org para descobrir todos os tipos disponíveis que podem ser usados ​​atualmente.

Como adicionar marcação de esquema ao WordPress programaticamente?

Já falamos sobre como adicionar esquema ao WordPress usando um plugin em um post anterior. Da mesma forma, já discutimos mais algumas maneiras de adicionar marcação de esquema ao WordPress por meio do painel e dos temas também.

Mas agora, vamos aprender como alcançar o mesmo resultado programaticamente. Ao fazer isso, seu site não precisará carregar todo o código extra que um plug-in fornece. E você estará adicionando apenas o código que seu site precisa.

Para incluir o esquema em um conteúdo, precisamos adicionar as tags de esquema à saída HTML do nosso site. Podemos editar o HTML de nossos sites de várias maneiras. A melhor maneira é sobrescrever os arquivos de modelo de tema no tema filho.

Você precisará de um tema filho para incluir as marcações de esquema programaticamente. Então, se você ainda não tem um instalado, vá em frente e crie e instale um tema filho. Você pode até usar um dos plugins de temas filhos para criá-lo.

Você pode adicionar marcação de esquema ao WordPress programaticamente de duas maneiras principais :

  1. Adicione um arquivo JSON-LD na cabeça
  2. Adicionar marcação de microdados à saída HTML

Ambos são métodos válidos, e você pode usar livremente aquele que melhor se adapta às suas necessidades.

1. Adicione o arquivo JSON-LD

Um arquivo JSON-LD é um tipo específico de formato, baseado em JSON e usado para codificar dados vinculados. Como acontece nos arquivos JSON, ele contém uma lista de pares de valores-chave:

 {
    "telefone": "152234029",
    "nome": "O nome",
    "endereço": "Johann Street N 433",
    "url": "https://QuadLayers.com",
    "priceRange": "19 - 90",
    "legalName": "QuadLayers",
    "@context": "http://schema.org",
    "@type": "LocalBusiness"
}

Como você pode ver, até a sintaxe é muito semelhante a um arquivo JSON.

Existem vários geradores JSON-LD que você pode usar para obter o arquivo que melhor se adapta às suas necessidades.

Então, o próximo passo é imprimir este código na seção HTML <head> do site.

Podemos usar a seguinte função no arquivo functions.php do tema filho para conseguir isso.

Observação: antes de continuarmos, certifique-se de fazer backup do seu site também. Estaremos modificando os arquivos principais do seu site e quaisquer alterações indesejadas podem trazer mais problemas para ele.

 add_action('wp_head','QuadLayers_add_schema');
function QuadLayers_add_schema(){
echo '<script type="application/ld+json">
{
"telefone": "152234029",
"nome": "O nome",
"endereço": "Johann Street N 433",
"url": "https://QuadLayers.com",
"priceRange": "19 - 90",
"legalName": "QuadLayers",
"@context": "http://schema.org",
"@type": "LocalBusiness"
}';
}

Você pode ver como o arquivo JSON-LD está incluído nas tags <script> . Só não esqueça de atualizar o arquivo .

Para entender como o esquema funciona, observe que o código de exemplo anterior adicionará o JSON a todas as páginas de um site. Portanto, quando um mecanismo de pesquisa ou qualquer outro tipo de bot o ler, ele será definido como um esquema válido para todas as páginas em que o script estiver presente. Neste caso, é todo o site.

Podemos aplicar o código JSON a páginas específicas aplicando alguma lógica condicional à nossa função PHP. Mas a marcação do esquema também pode ser incluída no HTML interno do nosso conteúdo, permitindo incluir marcações complexas em algum conteúdo muito específico.

2. Adicione marcação de microdados ao HTML

Seguindo as tendências modernas, o método anterior é o recomendado. Mas o uso de marcação de microdados nos permitirá incorporar a marcação de esquema diretamente nos arquivos de modelo .

Colar nossos scripts no arquivo functions.php do tema filho também funciona bem. Para aplicar o esquema certo a cada parte do conteúdo, acabaríamos tendo um código grande e complexo.

Portanto, para adicionar marcação de microdados dentro do HTML, precisamos substituir os arquivos de modelo do seu site WordPress.

2.1. Adicionar marcação de esquema às postagens do WP

Neste exemplo, nosso tema filho herda o tema Twenty Twenty-One, então o arquivo que precisamos substituir é content-single.php . Este é o arquivo onde podemos adicionar nosso esquema diretamente na saída HTML.

Este arquivo pode ser encontrado com um nome ou pasta diferente em alguns temas.

Crie as pastas necessárias no seu tema filho (partes e conteúdo do modelo) e um novo arquivo content-single.php dentro da pasta de conteúdo.

 Tema filho
/__template-parts
__/__contente
__/__/__content-single.php

Copie/cole todo o código do arquivo content-single.php do tema pai.

Substituir arquivo de modelo de postagem

O código que vamos editar é o seguinte:

 <artigo <?php post_class(); ?>>

Adicionando o escopo do esquema e digite como o snippet a seguir.

 <article itemscope itemtype ="http://schema.org/Article" <?php post_class(); ?>>

Isso está informando aos mecanismos de pesquisa que o conteúdo da tag HTML <article> é um tipo de artigo.
Depois de declarar o tipo e o escopo, podemos usar algumas propriedades padrão. Por exemplo, declarando o título do post como o nome do item:

Código fonte:

 <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

Adicionar propriedade de nome:

 <?php the_title( '<h1 itemprop="name" class="entry-title">', '</h1>' ); ?>

Além disso, podemos usar a propriedade da chave articleBody para marcar o conteúdo de nossas postagens.

Código fonte:

 <div class="entry-content">
<?php 

o conteúdo();

Adicionando a propriedade articleBody:

 <div itemprop="articleBody" class="entry-content">
<?php
o conteúdo();

2.2. Adicionando marcação de esquema aos produtos WooCommerce

De maneira semelhante, podemos substituir o arquivo de modelo de produtos WooCommerce para incluir nosso esquema.

O arquivo que precisamos substituir é o arquivo content-single-product.php . Este arquivo deve estar em uma pasta WooCommerce no tema filho. Se você estiver tendo dificuldades para encontrá-lo, certifique-se de que configurou o WooCommerce corretamente.

 Tema filho
__/woocommerce
__/__content-single-product.php

Conclua o mesmo processo acima criando um novo arquivo em seu lugar.

Defina o escopo e o tipo de esquema no wrapper div principal:

 <div itemscope itemtype ="http://schema.org/Product" <?php wc_product_class( '', $product ); ?>>

Também podemos usar a propriedade “description” neste arquivo:

 <div itemprop="description" class="summary entry-summary">

No entanto, para adicionar mais marcações aos nossos produtos, precisaremos substituir arquivos diferentes.

Por exemplo, para adicionar o preço dos produtos ao esquema, crie um novo caminho nos arquivos do tema filho:

woocommerce/templates/single-product/price.php

 Tema filho
__/woocommerce
__/__/produto único
__/__/__/price.php

substituir arquivos de modelo do woocommerce

Após copiar o arquivo price.php em seu lugar edite da seguinte forma:

Código fonte:

 <p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $product->get_price_html(); ?></p>

Adicionando marcação:

 <p itemscope itemtype="https://schema.org/Offer" itemprop="price" class=" <?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $produto->get_price_html(); ?></p>

Observe que criamos um novo item com o tipo “Oferta” para definir o preço. É uma pista para entender como podemos aninhar diferentes tipos de itens entre si, seguindo a estrutura HTML original.

Existem alguns outros arquivos que você pode substituir para incluir mais marcação.

  • title.php
  • stock.php
  • review.php
  • rating.php
  • product-image.php

Conclusão

Isso nos leva ao final do nosso tutorial sobre como adicionar marcação de esquema ao WordPress programaticamente. Para fazer isso, você precisa de um entendimento básico de como um esquema funciona junto com algum conhecimento de programação.

Também é muito importante entender que todas as propriedades e tipos devem corresponder aos definidos no site schema.org. Isso inclui propriedades com vários níveis de herança também.

Para resumir, você pode adicionar esquema ao seu site usando duas maneiras principais:

  • Adicione um arquivo JSON-LD na cabeça
  • Adicionar marcação de microdados à saída HTML

Adicionar o arquivo JSON-LD é uma abordagem muito fácil e é considerada pela maioria dos usuários. Tudo o que você precisa fazer é imprimir o código JSON-LD na seção <head> do seu site.

No entanto, usar a abordagem de marcação de microdados para incorporar a marcação de esquema diretamente nos arquivos de modelo também pode ser muito útil para você. A substituição dos arquivos de modelo pode ajudá-lo a personalizar o site com ainda mais flexibilidade se você tiver os recursos necessários para isso. Você pode até adicionar a marcação de esquema a elementos específicos do seu site, como postagens e produtos WooCommerce.

Então, você pode adicionar marcação de esquema ao seu site usando esses trechos de código agora? Por favor, deixe-nos saber se este tutorial foi útil ou não nos comentários.

Enquanto isso, aqui estão mais alguns de nossos posts que podem lhe interessar e ajudá-lo a melhorar seu site WordPress:

  • Como criar um plugin WordPress personalizado
  • Adicionar Telegram ao WordPress (Guia Completo)
  • Como editar HTML no WordPress