ronutz

Inspetor de meta, Open Graph e JSON-LD

Cole uma página, ou só o seu head, e leia tudo o que ela declara do modo como cada padrão lê: o title e a codificação de caracteres pelo HTML Standard, cada elemento meta classificado (os nomes do próprio padrão, o registro MetaExtensions do WHATWG, as diretivas pragma, as não conformes), cada elemento link com os seus tokens rel (canonical pela RFC 6596, alternates hreflang, ícones, manifest), o objeto Open Graph com os seus arrays e propriedades estruturadas pelo ogp.me, as propriedades de card twitter:* como registradas, as regras de robots e googlebot pela lista publicada do Google, o viewport, e cada bloco JSON-LD analisado e esboçado pelo JSON-LD 1.1. Quarenta e seis achados, cada um citando a frase em que se apoia. Analisado de modo inerte com o parse5; nada é buscado ou executado.

Documentação (Markdown)

Web e HTTP
Documentação
Experimente

17 elementos meta, 5 elementos link, 10 propriedades Open Graph, 2 propriedades twitter:*, um bloco JSON-LD. Nenhum erro, nenhum aviso, 2 notas, 6 coisas em ordem.

O básico

DOCTYPE e modo
presente no-quirks
lang
en
title
Example Books, used books for children 38 caracteres
charset
utf-8 meta charset, termina no byte 94
description
A bookshop of used children's books, with a catalogue you can search by age and author. 87 caracteres
canonical
https://example.com/books/
viewport
width=device-width, initial-scale=1
robots
robots: indexfollowmax-snippet:150max-image-preview:large
hreflang
pt-BRx-default
ícones e manifest
icon 32x32: /favicon.icomanifest: /site.webmanifest

Achados

  1. notaM23linha 23Valor de twitter:card fora dos quatro do registro

    twitter:card é "summary_large_image", um tipo de uso comum que o registro MetaExtensions não lista (ele nomeia summary, photo, app e player). A documentação de cards do X não está mais publicada (verificado em 2026-10-05), então nenhuma fonte normativa atual é citada.

  2. notaM45linha 9Alternates hreflang

    2 alternates hreflang; há um x-default entre eles. link rel=alternate com hreflang é o tipo de link "alternate" do HTML (4.6.7) com a língua da alternativa; quais páginas devem listar quais alternativas é documentação do consumidor, não do padrão.

  3. okM44Em ordem

    Uma description.

  4. okM44Em ordem

    As quatro propriedades obrigatórias do Open Graph estão presentes.

  5. okM44linha 4Em ordem

    UTF-8 declarado uma vez, dentro dos primeiros 1024 bytes.

  6. okM44linha 6Em ordem

    Um elemento title com texto.

  7. okM44linha 8Em ordem

    Um link canonical.

  8. okM44linha 27Em ordem

    O bloco JSON-LD 1 é JSON válido com @context e todos os nós tipados.

17 elementos meta

#elementocontentclasselinha
1charset="charset"utf-8charset4
2name="viewport"
MetaExtensions: "Provides a way for documents to specify (using markup rather than CSS) the size, zoom factor, and orientation of the viewport." Google: "Presence of this tag indicates to Google that the page is mobile friendly."
width=device-width, initial-scale=1registrado5
3name="description"
HTML 4.2.5.1: "a free-form string that describes the page. The value must be appropriate for use in a directory of pages, e.g. in a search engine." Google: "In some situations, this description is used in the snippet shown in search results."
A bookshop of used children's books, with a catalogue you can search by age and author.nome padrão7
4property="og:title"Example BooksOpen Graph13
5property="og:type"websiteOpen Graph14
6property="og:url"https://example.com/books/Open Graph15
7property="og:image"https://example.com/cover.jpgOpen Graph16
8property="og:image:width"1200Open Graph17
9property="og:image:height"630Open Graph18
10property="og:image:alt"A shelf of picture booksOpen Graph19
11property="og:description"Used children's books, searchable by age and author.Open Graph20
12property="og:locale"en_USOpen Graph21
13property="og:site_name"Example BooksOpen Graph22
14name="twitter:card"summary_large_imagetwitter card23
15name="twitter:site"@exampletwitter card24
16name="robots"
MetaExtensions: "A comma-separated list of operators explaining how search engine crawlers should treat the content." Google: "applies to all search engines".
index, follow, max-snippet:150, max-image-preview:largeregistrado25
17name="theme-color"
HTML 4.2.5.1: "a string that matches the CSS <color> production, defining a suggested color that user agents should use to customize the display of the page or of the surrounding user interface."
#0b7285nome padrão26

5 elementos link

#relhrefatributoslinha
1canonicalhttps://example.com/books/8
2alternatehttps://example.com/pt/livros/hreflang="pt-BR"9
3alternatehttps://example.com/books/hreflang="x-default"10
4icon/favicon.icosizes="32x32"11
5manifest/site.webmanifest12

Open Graph

og:titleog:typeog:imageog:url og:type website.

og:title
Example Books
og:type
website
og:url
https://example.com/books/
og:image
https://example.com/cover.jpg
og:description
Used children's books, searchable by age and author.
og:locale
en_US
og:site_name
Example Books
  • og:image https://example.com/cover.jpg 1200×630 alt

Card twitter:*

  • twitter:card summary_large_image registrada
  • twitter:site @example registrada

JSON-LD: um bloco

  1. 1JSON válido@context https://schema.org; um nólinha 27
    1. BookStore“Example Books”

A árvore inteira que o parser construiu, e os seus reparos, são mostrados pelo explicador de estrutura HTML e DOM, e seletores podem ser testados contra ela no testador de seletores CSS. Esta página lê o head como escrito: nenhuma URL é buscada ou resolvida, então ela não pode dizer se uma imagem existe, se um alvo canonical responde, ou como uma dada plataforma vai renderizar um card. As descrições dos nomes de meta são as frases do próprio padrão e do registro; o que um rastreador ou uma plataforma social faz com uma tag é citado da documentação publicada dessa parte, com data. Entradas acima de 300.000 caracteres são recusadas.

Endpoint da APIGEThttps://ronutz.com/api/v1/meta-og-jsonld-inspectorDocumentado, não servido. Abre a especificação.

Referências