Microdados

Frontend SELF PT
Nível 11 , Lição 3
Disponível

9.1 O que são microdados?

Microdados (structured data) — é uma maneira de adicionar metadados aos documentos HTML para melhorar a interpretação do conteúdo da página da web pelos motores de busca e outros serviços. Os microdados são usados para descrever várias entidades e seus relacionamentos em uma página web, o que ajuda a melhorar a visibilidade da página nos resultados de busca e fornece funcionalidades adicionais, como rich snippets.

Microdados são dados estruturados que são adicionados ao código HTML de uma página. Eles fornecem aos motores de busca informações adicionais sobre o conteúdo da página, como tipo de conteúdo, autor, data de publicação, classificação e outros dados.

Principais tipos de microdados:

  • Schema.org: o padrão de microdados mais amplamente utilizado, suportado pelos principais motores de busca (Google, Bing, Yahoo, Yandex)
  • JSON-LD: formato de codificação de microdados em JSON, recomendado pelo Google
  • Microdata: formato de microdados embutido diretamente no código HTML

9.2 Schema.org

Schema.org é um vocabulário de tipos de dados e suas propriedades, desenvolvido para estruturar dados em páginas da web. Ele suporta uma variedade de tipos de dados, como artigos, eventos, organizações, produtos, etc.

Exemplos de uso do Schema.org

Artigo (Article):

HTML
    
      <article>
        <h1>Título do artigo</h1>
        <p>Autor: Nome do autor</p>
        <p>Data de publicação: 1 de janeiro de 2024</p>
        <img src="https://example.com/image.jpg" alt="Exemplo de imagem">
        <p>Texto do artigo...</p>
      </article>
    
  
JavaScript
    
      <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Article",
          "headline": "Título do artigo",
          "author": {
            "@type": "Person",
            "name": "Nome do autor"
          },
          "datePublished": "2024-01-01",
          "image": "https://example.com/image.jpg",
          "publisher": {
            "@type": "Organization",
            "name": "Editora",
            "logo": {
              "@type": "ImageObject",
              "url": "https://example.com/logo.png"
            }
          }
        }
      </script>
    
  

Produto (Product):

HTML
    
      <body>
        <h1>Nome do produto</h1>
        <img src="https://example.com/product.jpg" alt="Imagem do produto">
        <p>Descrição do produto</p>
        <p>Preço: $29.99</p>
      </body>
    
  
JavaScript
    
      <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Product",
          "name": "Nome do produto",
          "image": "https://example.com/product.jpg",
          "description": "Descrição do produto",
          "sku": "0446310786",
          "offers": {
            "@type": "Offer",
            "priceCurrency": "USD",
            "price": "29.99",
            "itemCondition": "https://schema.org/NewCondition",
            "availability": "https://schema.org/InStock",
            "url": "https://example.com/product"
          }
        }
      </script>
    
  

Vantagens de usar Schema.org:

  1. Melhoria da visibilidade: os motores de busca podem exibir dados adicionais nos resultados de busca (rich snippets).
  2. Melhoria da interpretação: os motores de busca compreendem melhor o conteúdo, o que pode melhorar o ranking da página.
  3. Suporte a padrões: o Schema.org é suportado por todos os principais motores de busca.

9.3 JSON-LD

JSON-LD (JavaScript Object Notation for Linked Data) é um método de codificação de microdados no formato JSON, que é inserido na tag <script> na página. O Google recomenda o uso de JSON-LD para dados estruturados.

Exemplo de uso de JSON-LD

Organização (Organization):

HTML
    
      <body>
        <h1>Nome da empresa</h1>
        <p>Descrição da empresa</p>
        <div>Contatos</div>
      </body>
    
  
JavaScript
    
      <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Organization",
          "name": "Nome da empresa",
          "url": "https://example.com",
          "logo": "https://example.com/logo.png",
          "contactPoint": {
            "@type": "ContactPoint",
            "telephone": "+1-800-555-1212",
            "contactType": "Customer Service"
          }
        }
      </script>
    
  

9.4 Microdata

Microdata é um formato de microdados embutido no HTML. Os atributos microdata são adicionados diretamente aos elementos HTML para vinculá-los a tipos e propriedades do vocabulário Schema.org.

Exemplo de uso de Microdata

Evento (Event):

HTML
    
      <body itemscope itemtype="https://schema.org/Event">
        <h1 itemprop="name">Nome do evento</h1>
        <p itemprop="startDate" content="2024-05-01T19:00">1º de maio de 2024, 19:00</p>
        <div itemprop="location" itemscope itemtype="https://schema.org/Place">
          <span itemprop="name">Local do evento</span>
          <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
            <span itemprop="streetAddress">Rua, número</span>
            <span itemprop="addressLocality">Cidade</span>
            <span itemprop="postalCode">Código postal</span>
            <span itemprop="addressCountry">País</span>
          </div>
        </div>
      </body>
    
  

Vantagens de usar microdados:

  1. Rich snippets: os motores de busca podem mostrar snippets avançados nos resultados de busca, aumentando a taxa de cliques.
  2. Compreensão aprimorada do conteúdo: os motores de busca entendem melhor o conteúdo, o que pode melhorar o ranking da página.
  3. Suporte a busca por voz: dados estruturados podem melhorar os resultados da busca por voz.
  4. Integração com outros serviços: microdados permitem integrar conteúdo com vários serviços, como o Google Knowledge Graph e outros.
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION