Metadados

As tags de head que toda página renderiza — title, description, canonical, Open Graph e tags de card do X — e como sobrescrevê-las por página a partir do frontmatter.

Toda página renderiza as tags <head> padrão a partir da sua config e do frontmatter — sem nenhuma configuração necessária. Quando um valor pode ser ajustado, ele fica sob a chave seo no blume.config.ts ou sob seo no frontmatter de uma página.

• <title> — o título da página mais o title do seu site.
• <meta name="description"> e og:description — a description da página, com fallback para a description do site.
• og:title e og:site_name — o título da página e o title do seu site.
• <link rel="canonical"> e og:url — a URL absoluta da página (quando deployment.site está definido).
• og:type — article em posts de blog e entradas de changelog, website no restante. Páginas de artigo também emitem article:published_time e article:modified_time a partir da date da página e do timestamp de última modificação.
• og:image — a imagem OG da página. Um card gerado também declara seus og:image:width, og:image:height, og:image:type e og:image:alt, para que um crawler consiga montar o layout do card sem precisar buscá-lo antes; um seo.image que você mesmo fornece não declara nenhum desses, já que seu tamanho e formato são desconhecidos.
• twitter:card, twitter:title, twitter:description, twitter:image — o card do X. Páginas com imagem recebem a variante larga summary_large_image; páginas sem imagem ainda recebem o card compacto summary em vez de aparecerem como um link simples.

Atribuição no X

O X lê todo o resto do card a partir das tags og:*, então os únicos valores que ele não consegue inferir são as contas a creditar. Defina-as sob seo.x e o Blume emite twitter:site (a conta do seu site) e twitter:creator (a do autor). O @ é opcional — acme e @acme funcionam do mesmo jeito.

seo: {
  x: { handle: "@acme", creator: "@jane" },
}

Uma página pode reivindicar seu próprio autor, que é o que você quer para um post convidado:

---
title: How we shipped it
seo:
  x:
    creator: "@guestauthor"
---

Suas próprias tags

Para qualquer coisa para a qual o Blume não tem uma opção, adicione tags sob seo.metatags e todas as páginas vão carregá-las, incluindo páginas personalizadas e referências de API. Isso serve para tokens de verificação de site do Google, Bing ou Facebook, um theme-color ou um banner de app:

seo: {
  metatags: {
    "google-site-verification": "abc123",
    "msvalidate.01": "def456",
    "theme-color": "#0b5fff",
    "apple-itunes-app": "app-id=123456789",
  },
}

Cada chave é o nome da tag e cada valor, o seu conteúdo. As famílias do Open Graph (og:, fb:, article: e as demais) são renderizadas com property, como o protocolo as nomeia, e todo o resto com name. As tags que o próprio Blume escreve, listadas no topo desta página, não podem ser definidas aqui, então uma página nunca carrega dois valores para a mesma tag. O build informa qual opção controla cada uma: og:image vem de seo.og ou do seo.image de uma página, e robots vem do seo.noindex de uma página.

Sobrescritas por página

Sobrescreva qualquer uma das outras tags por página com o frontmatter seo:

---
title: Pricing
description: Plans and pricing for every team size.
seo:
  title: Plans and pricing
  canonical: https://acme.com/pricing
  noindex: false
---

Uma página com noindex também sai do sitemap e pula os dados estruturados.