Funciones SEO integradas

EmDash ofrece funciones de optimización para motores de búsqueda (SEO) para las entradas de contenido, los encabezados de página, los sitemaps, robots.txt y las redirecciones. La mayoría funcionan en cuanto una colección tiene SEO habilitado y el sitio renderiza <EmDashHead> en los encabezados de sus páginas.

Habilitar SEO en una colección

Activa SEO para una colección en Content Types en el administrador de EmDash. En un archivo seed, añade "seo" al array supports de la colección:

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

Con SEO habilitado, el editor de una entrada guardada muestra un panel SEO, y la colección aparece en el sitemap. Las colecciones con Routable desactivado quedan fuera del sitemap.

Editar los campos SEO de cada entrada

El panel SEO del editor de entradas contiene estos campos:

• OG Image es la imagen de vista previa social (og:image) y la imagen que se indica para la entrada en el sitemap.
• SEO Title reemplaza el título de la entrada en las vistas previas sociales y en los datos estructurados, y en <title> cuando la página renderiza el título desde getSeoMeta().
• Meta Description es el resumen que se muestra bajo el título en los resultados de búsqueda. El panel cuenta los caracteres frente a una pauta de 160 caracteres.
• Canonical URL indica a los motores de búsqueda la versión original de una página que está duplicada desde otra URL.
• Hide from search engines añade noindex, nofollow a la página y elimina la entrada del sitemap y de las alternativas hreflang.

Los campos vacíos recurren a los valores que la página pasa a createPublicPageContext(). getSeoMeta() recurre a los campos title y excerpt de la entrada.

Renderizar los metadatos SEO en una página de contenido

<EmDashHead> renderiza los metadatos SEO de un contexto de página. En una página de contenido, pasa la colección y el ID de base de datos de la entrada como content, para que <EmDashHead> aplique los valores del panel SEO de la entrada.

El siguiente ejemplo renderiza el encabezado de una página de artículo. getSeoMeta() resuelve el <title> y la URL canónica, y <EmDashHead> renderiza el resto de las etiquetas:

---
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 etiquetas:

• La meta descripción.
• Una directiva robots cuando la entrada está oculta para los motores de búsqueda.
• Un enlace canonical y og:url cuando el contexto de página o la entrada establecen una URL canónica.
• Etiquetas Open Graph (og:type, og:title, og:description, og:image, og:site_name) y etiquetas Twitter Card. Cuando una página no tiene imagen, og:image usa la imagen social predeterminada de los ajustes del sitio.
• article:published_time, article:modified_time y article:author cuando el contexto de página incluye articleMeta.

<EmDashHead> no renderiza el elemento <title>. Renderízalo en la página o en el layout, como hace el ejemplo.

Para las páginas que no son entradas de contenido, usa kind: "custom". Ajustes del sitio muestra un layout que construye un contexto de página personalizado a partir de los ajustes del sitio.

Los plugins pueden añadir o reemplazar etiquetas del encabezado mediante el hook page:metadata. Para la misma etiqueta, el valor de un plugin prevalece sobre los ajustes del sitio, que a su vez prevalecen sobre los valores generados a partir del contexto de página.

Datos estructurados

<EmDashHead> añade un script JSON-LD a una página cuando el contexto de página tiene los datos que necesita:

• Una página de artículo con URL canónica obtiene un grafo BlogPosting con el titular, la descripción, la imagen, las fechas de publicación y modificación, el autor y el editor que proporciona el contexto de página. kind: "content" establece pageType en "article" a menos que el contexto de página defina otro tipo.
• Una página de cualquier otro tipo obtiene un grafo WebSite con el nombre y la URL del sitio cuando el contexto de página incluye siteName.

El JSON-LD usa el mismo título, descripción e imagen que las etiquetas Open Graph, incluidos los valores del panel SEO del editor. Los plugins pueden reemplazarlo mediante el hook page:metadata.

Sitemaps

EmDash sirve un índice de sitemaps en /sitemap.xml. Enlaza un sitemap hijo en /sitemap-{collection}.xml por cada colección que tenga al menos una entrada listada.

El sitemap de una colección lista las entradas que están publicadas, no eliminadas, tienen un slug y no están ocultas para los motores de búsqueda. Construye cada URL a partir del patrón de URL de la colección, o /{collection}/{slug} cuando la colección no tiene ninguno, y lista la imagen SEO de la entrada con la extensión de sitemap de imágenes de Google.

Cada sitemap hijo contiene hasta 2000 entradas, ordenadas por ID de entrada para que editar una entrada no la mueva a otra página. Las colecciones más grandes continúan en /sitemap-{collection}-2.xml, /sitemap-{collection}-3.xml, y así sucesivamente. El índice lista cada página con la fecha de la entrada actualizada más recientemente de esa página.

Añade la URL del sitemap a Google Search Console o a Bing Webmaster Tools para ver allí su estado de indexación.

robots.txt

EmDash sirve /robots.txt. De forma predeterminada permite todos los rastreadores, deniega /_emdash/ y hace referencia al sitemap:

User-agent: *
Allow: /

# Disallow admin and API routes
Disallow: /_emdash/

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

Para reemplazar el valor predeterminado, introduce contenido personalizado en Settings > SEO > robots.txt. EmDash añade la línea Sitemap: cuando el contenido personalizado no la tiene.

robots.txt y los sitemaps construyen URL absolutas a partir de la Site URL en Settings > General, después de la opción siteUrl o la variable de entorno EMDASH_SITE_URL, y después del origen de la solicitud. Define una de ellas para que las URL coincidan con el dominio público. Los navegadores y las cachés compartidas pueden conservar robots.txt hasta un día y los sitemaps hasta una hora.

Ajustes SEO de todo el sitio

Settings > SEO en el administrador de EmDash contiene estos valores:

• Title Separator es el texto entre el título de la página y el nombre del sitio. Surte efecto cuando la página pasa settings.seo.titleSeparator a getSeoMeta() como titleSeparator, como hace el ejemplo de página de contenido.
• Default Social Image es el og:image de las páginas sin imagen propia. <EmDashHead> lo aplica.
• Google Verification y Bing Verification añaden las etiquetas meta google-site-verification y msvalidate.01, que prueban la propiedad del sitio ante Google Search Console y Bing Webmaster Tools. <EmDashHead> las añade a todas las páginas.
• robots.txt reemplaza el robots.txt predeterminado.

Contenido traducido

Cuando Astro i18n está configurado, EmDash enlaza las traducciones de una entrada para los motores de búsqueda:

• <EmDashHead> añade un <link rel="alternate" hreflang="..."> por cada traducción publicada y un enlace x-default. Consulta Añadir enlaces hreflang al encabezado de la página.
• El sitemap de cada colección lista cada traducción como su propia URL con alternativas xhtml:link. Consulta Sitemaps en la guía de internacionalización.

Redirecciones y el registro de 404

Gestiona las reglas en Redirects en el administrador de EmDash. Una regla redirige una ruta de origen a un destino con estado 301, 302, 307 o 308, o la responde con 410 Gone o 451 Unavailable For Legal Reasons. Las rutas de origen aceptan segmentos con nombre (/old/[slug]) y segmentos comodín (/old-blog/[...path]), que el destino puede reutilizar.

Cuando cambia el slug de una entrada publicada, EmDash crea una redirección 301 de la URL antigua a la nueva, basada en el patrón de URL de la colección. Colapsa las cadenas de redirección existentes que apuntaban a la URL antigua. No crea ninguna redirección mientras otra entrada, como una traducción, siga usando el slug antiguo.

EmDash registra las solicitudes que terminan en una respuesta 404. La pestaña 404 Errors de la página Redirects muestra las rutas más solicitadas sin éxito. Para cada una puedes añadir una redirección o marcarla como eliminada (410), lo que indica a los motores de búsqueda que la página se eliminó. El registro conserva hasta 10 000 rutas y descarta las que llevan más tiempo sin verse.

Los archivos seed también pueden definir redirecciones. Consulta Redirects en la referencia de archivos seed.

Datos SEO importados

La importación de WordPress mediante el EmDash Exporter puede copiar los títulos y descripciones SEO de Yoast y Rank Math a los campos SEO Title y SEO Description de la colección de destino. Son campos de contenido normales, independientes del panel SEO, por lo que la plantilla de la página tiene que renderizarlos.

Una transferencia de sitio copia los valores del panel SEO, los ajustes SEO y las redirecciones a otro sitio EmDash. El sitio de destino conserva su propia URL de sitio, que usan sus sitemaps y su robots.txt.