Recursos de SEO integrados

O EmDash oferece recursos de otimização para mecanismos de busca (SEO) para entradas de conteúdo, cabeçalhos de página, sitemaps, robots.txt e redirecionamentos. A maioria funciona assim que uma coleção tem o SEO ativado e o site renderiza <EmDashHead> nos cabeçalhos de suas páginas.

Ativar o SEO em uma coleção

Ative SEO para uma coleção em Content Types no admin do EmDash. Em um arquivo seed, adicione "seo" ao array supports da coleção:

{
  "version": "1",
  "collections": [
    {
      "slug": "posts",
      "label": "Posts",
      "urlPattern": "/posts/{slug}",
      "supports": ["drafts", "revisions", "seo"],
      "fields": [{ "slug": "title", "label": "Title", "type": "string", "required": true }]
    }
  ]
}

Com o SEO ativado, o editor de uma entrada salva mostra um painel SEO, e a coleção aparece no sitemap. Coleções com Routable desativado ficam fora do sitemap.

Editar os campos de SEO de cada entrada

O painel SEO no editor de entradas contém estes campos:

• OG Image é a imagem de pré-visualização social (og:image) e a imagem listada para a entrada no sitemap.
• SEO Title substitui o título da entrada nas pré-visualizações sociais e nos dados estruturados, e em <title> quando a página renderiza o título a partir de getSeoMeta().
• Meta Description é o resumo exibido abaixo do título nos resultados de busca. O painel conta os caracteres em relação a uma diretriz de 160 caracteres.
• Canonical URL aponta os mecanismos de busca para a versão original de uma página duplicada de outra URL.
• Hide from search engines adiciona noindex, nofollow à página e remove a entrada do sitemap e das alternativas hreflang.

Os campos vazios recorrem aos valores que a página passa para createPublicPageContext(). getSeoMeta() recorre aos campos title e excerpt da entrada.

Renderizar os metadados de SEO em uma página de conteúdo

<EmDashHead> renderiza os metadados de SEO para um contexto de página. Em uma página de conteúdo, passe a coleção e o ID de banco de dados da entrada como content, para que <EmDashHead> aplique os valores do painel de SEO da entrada.

O exemplo a seguir renderiza o cabeçalho de uma página de post. getSeoMeta() resolve o <title> e a URL canônica, e <EmDashHead> renderiza as demais tags:

---
import { decodeSlug, getEmDashEntry, getSeoMeta, getSiteSettings } from "emdash";
import { createPublicPageContext } from "emdash/page";
import { EmDashHead } from "emdash/ui";

const slug = decodeSlug(Astro.params.slug);
if (!slug) return Astro.rewrite("/404");

const { entry: post } = await getEmDashEntry("posts", slug);
if (!post) return Astro.rewrite("/404");

const settings = await getSiteSettings();
const seo = getSeoMeta(post, {
  siteTitle: settings.title,
  siteUrl: settings.url || Astro.url.origin,
  titleSeparator: settings.seo?.titleSeparator,
  path: Astro.url.pathname,
});

const page = createPublicPageContext({
  Astro,
  kind: "content",
  title: seo.title,
  pageTitle: seo.ogTitle,
  description: seo.description,
  canonical: seo.canonical,
  siteName: settings.title,
  content: { collection: "posts", id: post.data.id, slug: post.data.slug },
});
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{seo.title}</title>
    <EmDashHead page={page} />
  </head>
  <body>
    <h1>{post.data.title}</h1>
  </body>
</html>

<EmDashHead> renderiza estas tags:

• A meta description.
• Uma diretiva robots quando a entrada está oculta dos mecanismos de busca.
• Um link canonical e og:url quando o contexto de página ou a entrada define uma URL canônica.
• Tags Open Graph (og:type, og:title, og:description, og:image, og:site_name) e tags Twitter Card. Quando uma página não tem imagem, og:image usa a imagem social padrão das configurações do site.
• article:published_time, article:modified_time e article:author quando o contexto de página inclui articleMeta.

<EmDashHead> não renderiza o elemento <title>. Renderize-o na página ou no layout, como faz o exemplo.

Para páginas que não são entradas de conteúdo, use kind: "custom". Configurações do site mostra um layout que constrói um contexto de página personalizado a partir das configurações do site.

Os plugins podem adicionar ou substituir tags do cabeçalho por meio do hook page:metadata. Para a mesma tag, o valor de um plugin prevalece sobre as configurações do site, que por sua vez prevalecem sobre os valores gerados a partir do contexto de página.

Dados estruturados

<EmDashHead> adiciona um script JSON-LD a uma página quando o contexto de página tem os dados de que precisa:

• Uma página de artigo com uma URL canônica recebe um grafo BlogPosting com o título, a descrição, a imagem, as datas de publicação e modificação, o autor e o publicador que o contexto de página fornece. kind: "content" define pageType como "article", a menos que o contexto de página defina outro tipo.
• Uma página de qualquer outro tipo recebe um grafo WebSite com o nome e a URL do site quando o contexto de página inclui siteName.

O JSON-LD usa o mesmo título, descrição e imagem das tags Open Graph, incluindo os valores do painel de SEO do editor. Os plugins podem substituí-lo por meio do hook page:metadata.

Sitemaps

O EmDash serve um índice de sitemaps em /sitemap.xml. Ele vincula um sitemap filho em /sitemap-{collection}.xml para cada coleção que tenha pelo menos uma entrada listada.

O sitemap de uma coleção lista as entradas que estão publicadas, não excluídas, têm um slug e não estão ocultas dos mecanismos de busca. Ele constrói cada URL a partir do padrão de URL da coleção, ou /{collection}/{slug} quando a coleção não tem nenhum, e lista a imagem de SEO da entrada com a extensão de sitemap de imagens do Google.

Cada sitemap filho comporta até 2.000 entradas, ordenadas pelo ID da entrada para que editar uma entrada não a mova para outra página. Coleções maiores continuam em /sitemap-{collection}-2.xml, /sitemap-{collection}-3.xml e assim por diante. O índice lista cada página com a data da entrada atualizada mais recentemente dessa página.

Adicione a URL do sitemap ao Google Search Console ou ao Bing Webmaster Tools para ver lá o status de indexação.

robots.txt

O EmDash serve /robots.txt. Por padrão, ele permite todos os rastreadores, bloqueia /_emdash/ e faz referência ao sitemap:

User-agent: *
Allow: /

# Disallow admin and API routes
Disallow: /_emdash/

Sitemap: https://example.com/sitemap.xml

Para substituir o padrão, insira conteúdo personalizado em Settings > SEO > robots.txt. O EmDash acrescenta a linha Sitemap: quando o conteúdo personalizado não tem uma.

robots.txt e os sitemaps constroem URLs absolutas a partir da Site URL em Settings > General, depois da opção siteUrl ou da variável de ambiente EMDASH_SITE_URL, e depois da origem da requisição. Defina uma delas para que as URLs correspondam ao domínio público. Navegadores e caches compartilhados podem manter robots.txt por até um dia e os sitemaps por até uma hora.

Configurações de SEO de todo o site

Settings > SEO no admin do EmDash contém estes valores:

• Title Separator é o texto entre o título da página e o nome do site. Ele entra em vigor quando a página passa settings.seo.titleSeparator para getSeoMeta() como titleSeparator, como faz o exemplo de página de conteúdo.
• Default Social Image é o og:image das páginas sem imagem própria. <EmDashHead> a aplica.
• Google Verification e Bing Verification adicionam as meta tags google-site-verification e msvalidate.01, que comprovam a propriedade do site perante o Google Search Console e o Bing Webmaster Tools. <EmDashHead> as adiciona a todas as páginas.
• robots.txt substitui o robots.txt padrão.

Conteúdo traduzido

Quando o Astro i18n está configurado, o EmDash vincula as traduções de uma entrada para os mecanismos de busca:

• <EmDashHead> adiciona um <link rel="alternate" hreflang="..."> para cada tradução publicada e um link x-default. Consulte Adicionar links hreflang ao cabeçalho da página.
• O sitemap de cada coleção lista cada tradução como uma URL própria com alternativas xhtml:link. Consulte Sitemaps no guia de internacionalização.

Redirecionamentos e o log de 404

Gerencie as regras em Redirects no admin do EmDash. Uma regra redireciona um caminho de origem para um destino com status 301, 302, 307 ou 308, ou o responde com 410 Gone ou 451 Unavailable For Legal Reasons. Os caminhos de origem aceitam segmentos nomeados (/old/[slug]) e segmentos curinga (/old-blog/[...path]), que o destino pode reutilizar.

Quando o slug de uma entrada publicada muda, o EmDash cria um redirecionamento 301 da URL antiga para a nova, com base no padrão de URL da coleção. Ele reduz as cadeias de redirecionamento existentes que apontavam para a URL antiga. Não cria nenhum redirecionamento enquanto outra entrada, como uma tradução, ainda usa o slug antigo.

O EmDash registra as requisições que terminam em uma resposta 404. A aba 404 Errors da página Redirects mostra os caminhos mais frequentemente não encontrados. Para cada um, você pode adicionar um redirecionamento ou marcá-lo como removido (410), o que informa aos mecanismos de busca que a página foi excluída. O log mantém até 10.000 caminhos e descarta os que não são vistos há mais tempo.

Os arquivos seed também podem definir redirecionamentos. Consulte Redirects na referência de arquivos seed.

Dados de SEO importados

A importação do WordPress por meio do EmDash Exporter pode copiar os títulos e descrições de SEO do Yoast e do Rank Math para os campos SEO Title e SEO Description da coleção de destino. Eles são campos de conteúdo comuns, separados do painel SEO, portanto o template da página precisa renderizá-los.

Uma transferência de site copia os valores do painel de SEO, as configurações de SEO e os redirecionamentos para outro site EmDash. O site de destino mantém a própria URL do site, que seus sitemaps e robots.txt usam.