Hreflang para páginas internacionales
Indique a los motores de búsqueda las variantes de idioma y región
Hreflang para páginas internacionales es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
El problema que resuelve hreflang
Cuando publica el mismo artículo en inglés, turco y japonés, los motores de búsqueda necesitan saber qué versión mostrar en los resultados de búsqueda de cada usuario. Sin hreflang, Google puede mostrar el idioma equivocado o tratar las variantes como contenido duplicado.
La etiqueta link
Declare cada versión alternativa con <link rel="alternate" hreflang="..." href="..."> dentro de <head>. El atributo hreflang es un código de idioma BCP-47 (en, tr) o un par de idioma y región (en-US, en-GB, pt-BR).
<link rel="alternate" hreflang="en" href="https://example.com/en/article">
<link rel="alternate" hreflang="tr" href="https://example.com/tr/article">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/article">Se requieren referencias recíprocas
Cada versión debe enlazar a todas las demás, incluida ella misma. Google ignora los grupos de hreflang que no son bidireccionales. La página en inglés enlaza con TR y JA; la página en turco enlaza con EN y JA; y así sucesivamente.
Referencia a sí misma
Cada página debe enlazarse a sí misma mediante hreflang. La página en inglés debe incluir <link rel="alternate" hreflang="en" ...> apuntando a su propia URL. Esto forma parte de la referencia «recíproca»: Google utiliza el enlace a sí misma para confirmar que pertenece al grupo.
El valor x-default
Use hreflang="x-default" para especificar la página alternativa destinada a los usuarios cuyo idioma Google no pueda asociar. Normalmente apunta a la versión en inglés o a una página de destino que permite seleccionar el idioma, de modo que los usuarios no contemplados lleguen a un lugar razonable.
Códigos de idioma frente a códigos de región
en se dirige a todos los hablantes de inglés. en-US, en-GB y en-AU se dirigen a variantes nacionales cuando el contenido difiere según la región (moneda, ortografía o envíos). No especifique una región si el contenido no difiere realmente de la versión genérica.
Declaraciones alternativas
También puede declarar hreflang en el encabezado HTTP Link (para archivos que no sean HTML, como los PDF) o en un mapa del sitio XML con <xhtml:link rel="alternate" hreflang="...">. Los tres métodos son equivalentes; elija el que resulte más fácil de mantener.
Declaración en el mapa del sitio
Declarar hreflang en un mapa del sitio escala mejor que usar etiquetas HTML en sitios con muchos idiomas: una entrada del mapa por cada URL enumera todas las alternativas y elimina la duplicación en las plantillas de cada página. Search Console señala las referencias recíprocas que faltan para que los errores salgan a la luz pronto.
Errores habituales
Usar un guion bajo (en_US) en lugar de un guion (en-US), apuntar a una URL que no devuelva un estado 200, mezclar http y https en el grupo u olvidar el enlace a sí misma rompe hreflang silenciosamente. Ejecute el informe «International Targeting» de Google Search Console después del lanzamiento.
No sustituye a la traducción
hreflang solo indica a Google qué traducción existe ya. Las propias páginas siguen necesitando contenido realmente traducido; Google no traducirá el contenido por usted. Los sitios que implementan hreflang en páginas cuyo contenido está en inglés en un 80 % confunden silenciosamente al índice.
Combinar con og:locale y lang
Establezca <html lang="..."> y og:locale para que coincidan con el idioma real de la página. hreflang informa a los motores de búsqueda sobre las páginas relacionadas; lang y og:locale informan a los navegadores y las redes sociales sobre la página actual. Ambos son necesarios para ofrecer una imagen completa.
Comprobación de conocimientos
¿A qué apunta hreflang="x-default"?
Resumen
hreflang enlaza las versiones traducidas de una página para que los motores de búsqueda sirvan el idioma correcto. Use códigos BCP-47, declare las alternativas de forma recíproca (incluido el enlace a sí misma), añada x-default como alternativa predeterminada y verifique todo en el informe «International Targeting» de Google Search Console. La calidad de la traducción y las etiquetas lang y og:locale también deben coincidir.
Preguntas frecuentes
¿La lección «Hreflang para páginas internacionales» es gratis?
Sí — el texto completo de «Hreflang para páginas internacionales» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Hreflang para páginas internacionales»?
Indique a los motores de búsqueda las variantes de idioma y región Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Hreflang para páginas internacionales»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- OpenGraph: og:title, og:description y og:image
- Etiquetas meta de Twitter Card
- Conceptos básicos de datos estructurados JSON-LD
- Hreflang para páginas internacionales