Verificador e simulador de OGP
- Seguro
- Os resultados do diagnóstico não são armazenados nem publicados em nenhum lugar.
Notas
Uma ferramenta para validar tags OGP e simular como uma página aparece quando é compartilhada nas redes sociais.
Útil para criar imagens OGP e testar meta tags HTML.
Fonte de entrada
Escolha um dos três métodos.
| URL do site | Adequado para sites acessíveis publicamente. |
|---|---|
| Código-fonte HTML | Adequado para sites em desenvolvimento ou com restrição de acesso. |
| Arquivo de imagem | Adequado para conferir o visual de uma imagem OGP durante a criação. |
Resultado do diagnóstico
Avaliado em três níveis.
| Nota A | Atende a todos os requisitos recomendados. |
|---|---|
| Nota B | Atende aos itens obrigatórios, mas há recomendações. |
| Nota C | Alguns itens precisam de correção. |
Exemplo recomendado
As configurações abaixo cobrem as principais redes.
<meta property="og:title" content="Título da página">
<meta property="og:description" content="Descrição da página">
<meta property="og:url" content="URL da página">
<meta property="og:image" content="URL da imagem OGP">
<meta property="og:type" content="Tipo de página">
<meta property="og:site_name" content="Nome do site">
<meta name="twitter:card" content="Tipo de Twitter Card">Detalhes das tags
Tags OGP base
Tags que podem ser usadas em diferentes redes. Recomenda-se definir todas as seguintes.
Use o atributo `property`.
<meta property="og:title" content="Título da página">
<meta property="og:description" content="Descrição da página">
<meta property="og:url" content="URL da página">
<meta property="og:image" content="URL da imagem OGP">
<meta property="og:type" content="Tipo de página">
<meta property="og:site_name" content="Nome do site">og:title
Define o título da página. Geralmente o mesmo valor da tag `title`.
No X (Twitter), se estiver ausente, o Twitter Card pode ser desativado, então é praticamente obrigatório.
<meta property="og:title" content="Título da página">Exemplo
<meta property="og:title" content="Verificador e simulador de OGP">og:description
Define a descrição da página. Geralmente o mesmo valor da tag `description`.
Na maioria das redes, se omitido, `description` pode ser usado como alternativa.
<meta property="og:description" content="Descrição da página">Exemplo
<meta property="og:description" content="Diagnostique as configurações de OGP e visualize como sua página aparecerá ao ser compartilhada nas redes sociais a partir de uma URL ou do HTML. Compatível com X, Facebook e LINE e também pode simular a partir de um arquivo de imagem.">og:url
Defina a URL da página-alvo como URL absoluta.
<meta property="og:url" content="URL da página">Exemplo
<meta property="og:url" content="https://develop.tools/ogp-simulator/">og:image
Defina a URL da imagem OGP como URL absoluta. Tamanho recomendado: `1200px`×`630px`.
Como pode ser exibida em 1:1, mantenha informações importantes na área central `630px`×`630px`.
<meta property="og:image" content="URL da imagem OGP">Exemplo
<meta property="og:image" content="https://develop.tools/_assets/img/meta/ogp/tools/ogp-simulator.png">og:type
Especifica o tipo de página.
| website | Página inicial do site |
|---|---|
| article | Páginas não iniciais, como artigos |
| blog | Página inicial do blog |
| product | Páginas de detalhes de produto/serviço |
<meta property="og:type" content="Tipo de página">Exemplo
<meta property="og:type" content="article">og:site_name
Especifica o nome do site. Geralmente é comum a todas as páginas.
<meta property="og:site_name" content="Nome do site">Exemplo
<meta property="og:site_name" content="develop.tools">Tags do X (Twitter)
Tags priorizadas pelo X (antigo Twitter).
Se as tags OGP base estiverem definidas, você pode omitir todas estas sem problemas.
Defina `twitter:card` apenas quando quiser controlar o tamanho da miniatura.
Use o atributo `name`.
<meta name="twitter:card" content="Tipo de Twitter Card">
<meta name="twitter:title" content="Título da página">
<meta name="twitter:description" content="Descrição da página">
<meta name="twitter:image" content="URL da miniatura">
<meta name="twitter:site" content="Usuário X/Twitter do site">
<meta name="twitter:creator" content="Usuário X/Twitter do autor">twitter:card
Define o tipo de Twitter Card. Especifique se quiser uma miniatura grande.
Se omitido, vira `summary`.
| summary | Miniatura pequena (quadrada) + info do site lado a lado |
|---|---|
| summary_large_image | Miniatura grande + info do site empilhada |
<meta name="twitter:card" content="Tipo de Twitter Card">Exemplo
<meta name="twitter:card" content="summary_large_image">Tags do Facebook
Tags usadas pelo Facebook.
Especifique-as se quiser usar recursos de análise específicos do Facebook.
<meta property="fb:app_id" content="ID do app do Facebook">