HTML
Cómo configurar metadata para buscadores y redes sociales con title, description, canonical, robots, Open Graph, Twitter Cards y JSON-LD.
La metadata ayuda a navegadores, buscadores, redes sociales y otros consumidores a identificar, indexar y representar un documento.
<title>DomiSys | Nicolás Garzón</title>
<meta
name="description"
content="Sistema de gestión para centralizar inventario, pedidos y operación de negocios."
>
<link rel="canonical" href="https://nicoo.dev/portfolio/domisys"><title>Proyectos de desarrollo web | Nicolás Garzón</title>Debe:
No repitas keywords artificialmente.
<meta name="description" content="...">Resume la página. Un buscador puede utilizar otro fragmento si considera que responde mejor a la consulta.
Escribe una descripción concreta, no una lista de términos.
<link rel="canonical" href="https://example.com/preferred-url">Sugiere la URL preferida cuando hay duplicados o variantes.
Debe alinearse con:
No apuntes todas las páginas al home.
<meta name="robots" content="index, follow">Directivas comunes:
noindex
nofollow
noarchive
nosnippet
max-snippet
max-image-preview
max-video-previewEl soporte depende del crawler. Una página bloqueada por robots.txt puede no permitir que el crawler lea noindex.
<meta name="googlebot" content="index, follow">Solo úsalo cuando una directiva específica debe diferir de robots general. Evita metadata contradictoria.
<link
rel="alternate"
hreflang="es"
href="https://example.com/es/services"
>
<link
rel="alternate"
hreflang="en"
href="https://example.com/en/services"
>Cada versión debe referenciar alternativas coherentes y normalmente incluirse a sí misma. x-default puede representar una página selector/fallback.
Hreflang no traduce contenido ni reemplaza lang del documento.
<meta property="og:title" content="DomiSys">
<meta property="og:description" content="Sistema de gestión para negocios.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://nicoo.dev/portfolio/domisys">
<meta property="og:image" content="https://nicoo.dev/seo/domisys.png">
<meta property="og:image:alt" content="Vista del dashboard de DomiSys">Plataformas pueden generar previews con estos valores, pero mantienen cache y reglas propias.
Utiliza URLs absolutas para recursos compartidos.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="DomiSys">
<meta name="twitter:description" content="Sistema de gestión para negocios.">
<meta name="twitter:image" content="https://nicoo.dev/seo/domisys.png">Algunas plataformas reutilizan Open Graph cuando faltan campos propios. Prueba la representación final.
Una imagen social necesita:
No reutilices una captura diminuta o con información privada.
JSON-LD:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Nicolás Garzón",
"url": "https://nicoo.dev"
}
</script>Describe entidades y relaciones para consumidores compatibles.
No marques:
Structured data incorrecta puede ser ignorada o producir acciones manuales de plataformas.
Elige el tipo que representa la entidad real:
Person
Organization
Article
Product
SoftwareApplication
BreadcrumbList
WebSiteNo existe beneficio en añadir todos los tipos posibles.
El bloque debe ser JSON válido y serializar datos de forma segura. No concatentes strings de usuarios dentro de script sin proteger secuencias que podrían cerrar el elemento.
En frameworks, utiliza una serialización mantenida y comprueba el HTML final.
Visible:
<nav aria-label="Migas de pan">
<ol>
<li><a href="/">Inicio</a></li>
<li><a href="/portfolio">Proyectos</a></li>
<li aria-current="page">DomiSys</li>
</ol>
</nav>Puede acompañarse con BreadcrumbList estructurado. La metadata no debe sustituir la navegación visible si beneficia al usuario.
Frameworks, plugins y layouts pueden generar dos titles, canonicals o descriptions.
Inspecciona la respuesta final, no solo el componente fuente.
Algunos crawlers ejecutan JavaScript; otros previews sociales no esperan una app hidratada. La metadata crítica debe estar en el HTML inicial del servidor o documento entregado.
También forman parte de identidad y descubrimiento:
<link rel="icon" href="/favicon.svg">
<link rel="manifest" href="/manifest.webmanifest">No son sustitutos de title y metadata de cada página.
<title>SpendControl | Nicolás Garzón</title>
<meta
name="description"
content="Aplicación web para definir un presupuesto, registrar gastos y visualizar el dinero disponible."
>
<link
rel="canonical"
href="https://nicoo.dev/portfolio/spendcontrol"
>
<meta property="og:type" content="website">
<meta property="og:title" content="SpendControl">
<meta
property="og:description"
content="Registra gastos y visualiza tu presupuesto en tiempo real."
>
<meta
property="og:image"
content="https://nicoo.dev/seo/spendcontrol.png"
>¿Por qué una canonical hacia el home en todas las páginas sería dañina?
Porque indicaría que el home es la versión preferida de contenido diferente y podría hacer que buscadores ignoren o consoliden incorrectamente las páginas internas.
Seguridad y políticas de recursos reúne controles declarativos para limitar contenido y capacidades.