Tags Open Graph explicadas, com um gerador de tags ao vivo | We.Inc
As quatro tags Open Graph obrigatórias, propriedades de imagem, valores de og:type e tags de artigo, comentados, além de um gerador que escreve o markup do head.
Tags Open Graph explicadas
Tags Open Graph são elementos meta no head de uma página que controlam como um link aparece quando é compartilhado. O protocolo exige quatro: og:title, og:type, og:image e og:url. Cada uma usa o atributo property, por exemplo meta property="og:title" content="...". Adicione og:description, og:site_name e a largura, a altura e o alt da imagem para ter prévias melhores.
As quatro propriedades obrigatórias
Propriedade
O que colocar nela
og:title
O título como deve aparecer no card de compartilhamento
og:type
O tipo de objeto, como website ou article
og:image
Uma URL completa para a imagem de prévia
og:url
A URL canônica que identifica a página
As prévias de compartilhamento vêm de um punhado de tags fáceis de errar em detalhes: um caminho de imagem relativo, a falta de largura e altura, ou um título que só existe no elemento title. Preencha o gerador para obter o markup correto e depois leia o que cada propriedade faz.
Preencha no gerador o título, a descrição, a URL da página e a URL da imagem.
Escolha o tipo: website para a maioria das páginas, article para posts de blog.
Confira o card de prévia aproximado e copie as tags geradas para o head da sua página.
Teste a página publicada com o depurador de compartilhamento da própria plataforma, já que cada rede guarda as prévias em cache.
Use URLs https absolutas em og:image e og:url. Caminhos relativos são um motivo comum para prévias sem imagem.
Inclua og:image:width e og:image:height para que um app descubra o formato da imagem pelas tags, sem medir o arquivo.
Escreva og:image:alt para quem usa leitor de tela nas redes sociais.
Quando trocar a imagem, use um novo nome de arquivo. As plataformas guardam imagens em cache, então reaproveitar a URL antiga pode manter a imagem desatualizada.
Perguntas frequentes
Qual deve ser o tamanho de uma imagem Open Graph?
O protocolo não define um tamanho. 1200 por 630 pixels é um tamanho paisagem muito usado e é o que a documentação do Next.js usa nos exemplos. Mantenha textos importantes longe das bordas, já que alguns apps cortam a imagem.
As tags Open Graph ajudam no SEO?
A função delas é o card de compartilhamento, não o ranqueamento. Um título e uma imagem claros podem render mais cliques quando as pessoas passam o seu link adiante em conversas e feeds. Mantenha o og:title coerente com o elemento title para que todas as superfícies descrevam a página da mesma forma.
Por que as tags Open Graph usam property em vez de name?
O protocolo é baseado em RDFa, que usa o atributo property. Os exemplos em ogp.me escrevem meta property="og:title". Já as tags de Twitter card usam o atributo name, como em meta name="twitter:card".
Ainda preciso das tags de Twitter card?
Adicione pelo menos twitter:card, com o valor summary_large_image se quiser o layout de imagem grande. Muitos apps leem os valores og para título, descrição e imagem quando as tags twitter correspondentes não existem, mas as regras das plataformas mudam, então teste a sua URL publicada antes de contar com esse fallback.
Uma página pode ter mais de um og:image?
Sim. O protocolo permite arrays: repita a tag og:image e coloque a largura, a altura e o alt de cada imagem logo depois da imagem que descrevem. Quando os valores conflitam, o protocolo dá preferência à primeira tag, de cima para baixo.
Propriedades estruturadas pertencem à tag acima delas
Propriedades como og:image:width descrevem o og:image mais recente declarado antes delas. A ordem importa: declare primeiro a imagem, depois a largura, a altura, o tipo e o alt dela, e só então a próxima imagem.
og:image:secure_url é um endereço https extra para a mesma imagem. Se o seu og:image já usa https, você não precisa dele.
Tipos e suas tags extras
website é o padrão para páginas que não são um tipo específico de objeto. article libera article:published_time, article:modified_time, article:author, article:section e article:tag.
O protocolo também define book, profile e os grupos music e video. Use-os apenas quando a página realmente for esse objeto; uma página de produto normalmente é website.
Todas as propriedades, comentadas
Propriedades Open Graph opcionais e estruturadas
Propriedade
Finalidade
Valor de exemplo
og:description
Uma ou duas frases abaixo do título
Consertos de telhado no mesmo dia em toda Leeds
og:site_name
O nome do site como um todo
Northside Roofing
og:locale
Idioma e território, padrão en_US
en_GB
og:locale:alternate
Outros idiomas em que a página existe
fr_FR
og:determiner
Palavra antes do título em uma frase
a, an, the, vazio ou auto
og:image:secure_url
Endereço https da imagem
og:image:type
Tipo MIME da imagem
image/jpeg
og:image:width
Largura em pixels
og:image:height
Altura em pixels
og:image:alt
Descrição da imagem
Telhadista instalando telhas de ardósia
og:video / og:audio
Um arquivo de vídeo ou áudio que acompanha a página
Primeiro as tags obrigatórias, depois a descrição, o nome do site e o bloco da imagem com as propriedades estruturadas.
Post de blog com tags de artigo
O atributo prefix declara os namespaces. As datas usam ISO 8601.
Conserto de telhado em Leeds | Northside Roofing
Consertos de vazamento no mesmo dia e orçamentos por escrito grátis em toda Leeds.
Telhadista instalando telhas de ardósia em uma casa geminada
A URL da imagem deve ser absoluta, começando com https://
A URL da página deve ser absoluta, começando com https://
og:title é obrigatório
Gerador de tags Open Graph
Preencha os campos para gerar as tags e um card de compartilhamento aproximado. Cada app desenha o próprio card, então use a prévia apenas como referência.