Open Graph

As tags Open Graph fazem suas páginas serem renderizadas bonitamente quando alguém as compartilha no Facebook, X, LinkedIn, Slack e serviços semelhantes. O Chinaski escreve todas as tags Open Graph e as tags Twitter (X) correspondentes para você ao construir seu site.

O que o Chinaski marca automaticamente

Cada página e post na saída estática carrega:

• og:title: seu título OG, com fallback para seu meta título e depois o título da página
• og:description: sua descrição OG, com fallback para sua meta descrição e depois a tagline do site
• og:image: a URL da sua imagem OG, com fallback para a imagem destacada e depois a imagem padrão de compartilhamento
• og:type: article para posts de blog, website para todo o resto (páginas, a home e páginas de listagem)
• og:locale: o código de idioma da página (por exemplo en)
• og:url e og:site_name: apenas quando há uma URL canônica e o site tem um nome

Tags sem valor são deixadas de fora por completo: nada é emitido vazio. As tags Twitter equivalentes (title, description, image) são emitidas junto, usando um cartão de imagem grande quando há uma imagem de compartilhamento e um cartão summary caso contrário, e twitter:site é definido a partir do handle de X/Twitter na aba de configurações de Integrações.

Definindo campos OG por página ou post

O editor de cada página e post tem três campos: Título OG, Descrição OG e URL da Imagem OG.

• Deixe o Título OG em branco para herdar o Meta Título (ou o título da página/post).
• Deixe a Descrição OG em branco para herdar a Meta Descrição.
• A URL da Imagem OG aceita qualquer URL de imagem.

Tudo entra em vigor após o próximo build do site.

Armazenando uma imagem de fallback: imagem padrão do site

Em vez de definir uma imagem OG em cada item, escolha um fallback para todo o site em Configurações → Geral: a configuração Imagem Padrão do Site. Ela é usada como imagem de compartilhamento em qualquer página ou post sem imagem OG e sem imagem destacada. Deixe em branco para omitir o fallback.

Tratando URLs de imagem

Se você definir uma imagem OG (ou imagem padrão de compartilhamento) como um caminho relativo à raiz do site (um que comece com /), o Chinaski o resolve contra a configuração da URL do Site durante o build, para que as plataformas sociais vejam uma URL completa. URLs absolutas (como https://…) e valores sem uma URL de site configurada são passados inalterados.

Templates de tema

Se você constrói temas você mesmo, o contexto do template inclui og_title, og_description, og_image_url e a imagem padrão do site (tanto relativa quanto absoluta), para que marcação personalizada possa reutilizar os mesmos valores. Incluir o snippet compartilhado de meta-tags no seu tema mantém a saída Open Graph consistente com o site padrão.