Metadatos del sitio

Actualizado el 1 nov 2026

Unas pocas claves de primer nivel en htmlpress.yaml describen tu sitio a los navegadores, a los motores de búsqueda y a las tarjetas sociales.

Campos

site: https://example.com
title: My Docs
description: Everything you need to build things.
logo: /logo.svg
favicon: /favicon.ico
banner: 'v2 is out · <a href="/es/blog/v2/">Read the release notes</a>'
head:
  meta:
    - name: twitter:site
      content: "@me"

Clave	Predeterminado	Dónde aparece
`site`	ninguno	Origen canónico que usan el sitemap, `<link rel="canonical">`, `og:url` y las URL absolutas de `og:image`
`title`	el nombre de la carpeta	El título de cada pestaña (tras el propio de la página; solo en la página de inicio), `og:site_name` y el título del sitio en la cabecera
`description`	ninguno	`<meta name="description">` y `og:description` para las páginas que no tienen una propia, y la línea bajo el título de la marca
`logo`	ninguno	Imagen mostrada antes del título del sitio en la cabecera (y favicon por defecto)
`favicon`	el logo	Icono de la pestaña del navegador
`banner`	ninguno	Barra de anuncios sobre la cabecera en cada página
`head`	ninguno	`meta`, `links` y `scripts` adicionales en el `<head>` de cada página

Sitemap y `site`

Si se define site, cada compilación escribe un sitemap.xml con todas las páginas en la raíz de la salida, usando site (y base) como origen absoluto de cada URL, y robots.txt apunta a él. Sin site, el sitemap se omite: solo lista URL absolutas. Un archivo del proyecto llamado sitemap.xml o robots.txt tiene prioridad sobre el generado.

Logo y favicon

logo y favicon aceptan cualquier URL o ruta relativa a la raíz (/logo.svg). Cualquier archivo del proyecto se copia a la salida en la misma ruta, así que logo.svg en la raíz funciona como /logo.svg.
Si se omite favicon, htmlpress recurre a logo; sin ninguno de los dos, el icono de htmlpress, que .htmlpress/favicon.svg puede sustituir.
El logo es un <img> antes del título del sitio y su description en <htmlpress-brand>, que enlaza al inicio.

Mantén pequeño el archivo del logo (un SVG es ideal). Cada página lo carga en la cabecera.

banner muestra una barra a todo el ancho sobre la cabecera en cada página. El valor es HTML, escrito tal cual en <htmlpress-banner>, así que un enlace o cualquier marcado inline no necesita un componente propio:

banner: 'Htmlpress is in technical preview · <a href="https://github.com/datisthq/htmlpress/discussions">Share feedback</a>'

Los enlaces relativos a la raíz reciben tu prefijo base.
Para un marcado o un estilo distinto, escapa components/banner/banner.css, o reemplaza el elemento con components/banner/banner.html (Sobrescritura/Escape).

Etiquetas por página

Cada página sobrescribe los valores predeterminados del sitio con su propio <title> (seguido de · site title), description, og:title y og:description; og:type es website. Con site definido, también recibe og:url y un <link rel="canonical">. El <meta name="image"> de una página se convierte en su og:image, que se hace absoluta con site (sin él, una imagen local se omite), y cambia twitter:card de summary a summary_large_image.

Etiquetas adicionales en el head

head añade etiquetas a cada página, después de las predeterminadas y del tema: listas de mapas de atributos. El children de un script es su código inline, y una entrada meta con el mismo name o property que una predeterminada la reemplaza:

head:
  meta:
    - name: twitter:card
      content: summary_large_image
    - name: google-site-verification
      content: abc123
  links:
    - rel: me
      href: https://mastodon.social/@me
  scripts:
    - src: https://example.com/analytics.js
      defer: ""
    - children: console.log("hello")

Los <link>, <style> o <script> propios de una página en su <head> van después de estos, solo para esa página.

Ver también

Enlaces externos: enlaces de la cabecera y de la barra lateral que se sitúan junto al título.
Secciones de artículos: estructurar el contenido del propio sitio.

Hecho con ❤ y Htmlpress