La mayoría de los sitios de WordPress no tienen una sola página que enumere todo en un solo lugar, por lo que los visitantes tienen que depender de los menús o la búsqueda para encontrar el contenido correcto.
Un mapa del sitio HTML soluciona esto al colocar todo tu contenido importante en una sola página. En esta guía, te mostraremos cómo crear uno con un plugin y sin fragmentos de código.
¿Cuál es la diferencia entre los mapas del sitio XML y HTML?
Un mapa del sitio XML es un archivo que enumera todo el contenido de tu sitio web en un formato que los motores de búsqueda como Google pueden leer. Puedes enviarlo en Google Search Console para ayudar a los motores de búsqueda a encontrar y rastrear tus páginas más rápido.
Un mapa del sitio HTML funciona de manera diferente. Piensa en él como un tablero de directorio en un centro comercial.
En lugar de guiar a los motores de búsqueda, guía a tus visitantes, enumerando tus publicaciones y páginas en una página organizada para que las personas puedan encontrar rápidamente lo que vinieron a buscar.
Ahora que conoces la diferencia, veamos cómo agregar un mapa del sitio HTML a tu sitio de WordPress. Puedes usar los enlaces rápidos a continuación para saltar directamente al método que deseas usar:
Método 1: Agregar una página de mapa del sitio HTML en WordPress con All in One SEO
Usar un plugin de SEO para WordPress, como el plugin gratuito All in One SEO, es la forma más fácil de agregar una página de mapa del sitio HTML en unos pocos clics.
Dado que el plugin ya maneja tu mapa del sitio XML y la configuración básica de SEO, puedes administrar ambos desde el mismo lugar en lugar de instalar una herramienta separada solo para esto.
Primero, necesitas instalar y activar el plugin. Tras la activación, se abrirá el asistente de configuración, donde puedes hacer clic en el botón 'Empecemos'.
Si deseas un recorrido completo de cada configuración, consulta nuestra guía sobre cómo configurar All in One SEO para WordPress.
Una vez que hayas terminado, ve a All in One SEO » Mapas del sitio y haz clic en la pestaña 'Mapa del sitio HTML'. Luego, activa el interruptor 'Habilitar mapa del sitio'.
A continuación, elige cómo deseas mostrar tu mapa del sitio. Para este tutorial, seleccionaremos la opción 'Página dedicada'. Alternativamente, puedes agregarlo como un shortcode, bloque o widget.
Una vez que hagas eso, ingresa la URL donde deseas que aparezca tu mapa del sitio, y el plugin creará automáticamente esa página por ti.
Nota: Dado que All in One SEO crea esta página dinámicamente, no aparecerá en tu lista de páginas en el área de administración de WordPress. Siempre puedes volver a esta pantalla de configuración para realizar cambios.
Luego, desplázate hacia abajo hasta la sección 'Configuración del mapa del sitio HTML'. Aquí, puedes elegir qué tipos de publicaciones y taxonomías, como categorías y etiquetas, se muestran en tu mapa del sitio.
Si deseas un mayor control, la 'Configuración avanzada' te permite excluir publicaciones, páginas o términos específicos de la lista.
También puedes activar 'Archivos compactos' si prefieres mostrar tu mapa del sitio como un archivo de fecha compacta en lugar de una lista completa. Una vez que estés satisfecho con tu configuración, haz clic en 'Guardar cambios'.
Tu mapa del sitio HTML ahora está en vivo. Si elegiste la opción 'Página dedicada', puedes verlo haciendo clic en el botón 'Abrir mapa del sitio HTML'.
Método 2: Agregar una página de mapa del sitio HTML en WordPress con código
Si no deseas usar All in One SEO porque no necesitas todas sus otras funciones, puedes crear un mapa del sitio HTML agregando código personalizado al archivo functions.php de tu tema secundario.
Sin embargo, el más mínimo error puede dañar todo tu sitio y causar la pantalla blanca de la muerte de WordPress.
Es por eso que recomendamos usar un plugin de fragmentos de código como WPCode. Su versión gratuita te permite agregar y administrar tu código de forma segura sin tocar los archivos de tu tema.
Lo primero que debes hacer es instalar y activar el plugin WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez que esté activo, ve a Fragmentos de código » + Agregar fragmento desde tu panel de WordPress. Pasa el cursor sobre ‘Agregar tu código personalizado (Nuevo fragmento)’ y haz clic en ‘Usar fragmento’.
En la nueva pantalla, selecciona ‘Fragmento de PHP’ como tipo de código y dale un título a tu fragmento para que puedas encontrarlo más tarde. Puede ser algo como ‘Mapa del sitio HTML’.
Luego, pega el siguiente código en el cuadro ‘Vista previa del código’.
function custom_html_sitemap() {
$out = '<ul class="custom-sitemap">';
// Pages
$pages = get_pages(
array(
'sort_column' => 'menu_order,post_title',
'post_status' => 'publish',
)
);
foreach ( $pages as $page ) {
$out .= sprintf(
'<li><a href="%s">%s</a></li>',
esc_url( get_permalink( $page->ID ) ),
esc_html( get_the_title( $page->ID ) )
);
}
// Recent posts
$recent_posts = get_posts(
array(
'posts_per_page' => 50,
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
'post_type' => 'post',
'ignore_sticky_posts' => true,
)
);
foreach ( $recent_posts as $p ) {
$out .= sprintf(
'<li><a href="%s">%s</a></li>',
esc_url( get_permalink( $p->ID ) ),
esc_html( get_the_title( $p->ID ) )
);
}
$out .= '</ul>';
return $out;
}
add_shortcode( 'custom_html_sitemap', 'custom_html_sitemap' );
Este código enumera primero todas tus páginas publicadas, luego tus 50 publicaciones recientes, y envuelve todo en un shortcode llamado [custom_html_sitemap] que puedes colocar en cualquier página.
Una vez que termines, cambia el interruptor en la parte superior de ‘Inactivo’ a ‘Activo’, y luego haz clic en ‘Guardar fragmento’.
Ahora, crea una nueva página yendo a Páginas » Agregar nueva, o abre una página existente donde quieras que se muestre tu mapa del sitio. Agrega un bloque de ‘Shortcode’ y pega el siguiente shortcode en él:
[custom_html_sitemap]
Una vez que publiques la página, tus visitantes verán una lista simple de tus páginas y publicaciones recientes, todas enlazadas y listas para navegar.
Preguntas frecuentes sobre sitemaps HTML
¿Es un sitemap HTML bueno para el SEO?
Sí. Un mapa del sitio HTML agrega un enlace interno a cada página importante de tu sitio, lo que ayuda a los motores de búsqueda a descubrir tu contenido. También facilita la navegación de tu sitio para los visitantes.
¿El sitemap HTML se actualiza automáticamente cuando agrego contenido nuevo?
Sí. Ya sea que uses All in One SEO o el método de código personalizado anterior, tu mapa del sitio se actualiza automáticamente cada vez que publicas una nueva publicación o página. No necesitarás hacer nada adicional para mantenerlo actualizado.
¿Dónde debería poner mi sitemap HTML?
El lugar más común para enlazar tu mapa del sitio HTML es el pie de página de tu sitio web. Esto lo hace accesible desde cualquier página sin saturar tu menú de navegación principal.
Otro buen lugar es tu página de error 404. Si un visitante llega a un enlace roto, un enlace a tu mapa del sitio HTML puede ayudarlo a encontrar lo que estaba buscando.
¿Cómo agrego mi nueva página de sitemap HTML a mi menú de navegación?
Una vez que publiques tu mapa del sitio, ve a Apariencia » Menús en tu panel de administración de WordPress para agregarlo a cualquier menú. Si usaste el método de código personalizado, marca la casilla junto a tu nueva página.
Sin embargo, si usaste All in One SEO, tu página creada dinámicamente no aparecerá en la lista de Páginas. Deberás hacer clic en la pestaña ‘Enlaces personalizados’ para pegar la URL de tu mapa del sitio.
Si estás utilizando un tema de bloques, deberás agregar el enlace a través del Editor del Sitio en su lugar.
Tutorial en video
Esperamos que este artículo te haya ayudado a aprender cómo agregar una página de sitemap HTML en WordPress. También te puede interesar ver cómo mostrar la navegación de migas de pan en WordPress y nuestra guía completa de SEO para WordPress.
Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Linh
Hasta ahora, estos 2 métodos no se aplican a mi sitio web, ya que me gustaría elegir solo una categoría específica para que se muestre en el sitemap HTML. Ni AIOSEO ni SimpleSitemap me permiten hacer eso. Por supuesto, he probado la configuración avanzada (solo AIO la tiene), pero entonces tengo que elegir manualmente cada publicación o página individual que se excluirá del sitemap. Este requisito manual simplemente mata el propósito de usar complementos para crear un sitemap HTML.
Otra cosa sobre este AIO (que wpbeginner lo promociona todo el tiempo y me hace sentir que es como un plugin todopoderoso) es con las migas de pan (Breadcrumb):
¡Esta función de AIO simplemente NO sigue la lógica de la URL! Más específicamente, solo se ve bien en tu sitio web hasta que haces clic en ella para volver a la página anterior (o página principal), lo que cualquier humano hace al navegar por cualquier sitio web. AIO te llevará a otras páginas (que es la página de archivos). Personalmente, no lo entiendo.
Para mí, excepto por las herramientas de SEO, AIO ofrece una función demasiado básica, por no decir inútil, cuando se trata de un sitio web autoalojado.
Soporte de WPBeginner
Gracias por tus comentarios. Si solo querías que algunas de tus publicaciones y páginas aparecieran en una página específica en lugar de una colección de todas tus publicaciones y páginas, te recomendaríamos crear manualmente la lista que deseas y eso debería lograr lo que buscas, a menos que estemos malinterpretando el objetivo que intentas alcanzar.
En cuanto a tu comentario sobre las migas de pan (breadcrumbs), estas están ahí para enlazar con la organización de tu contenido y no específicamente para ser un botón de retroceso; normalmente, eso lo haría el navegador o un método alternativo.
Administrador
Jiří Vaněk
Siempre he considerado un sitemap como una herramienta para mejorar el SEO y mostrar a Google u otros bots de motores de búsqueda el contenido de mis páginas. Es interesante cómo a veces te enfocas tanto en los motores de búsqueda que olvidas hacer el sitio web más accesible para los usuarios habituales. Creé un sitemap HTML y lo coloqué en el sitio web para que las personas puedan navegar el contenido más fácilmente si lo desean. Gracias por la nueva perspectiva de que un sitemap puede servir a los usuarios tan bien como a los robots.
Dennis Muthomi
Hola WPBeginner, gracias por este artículo informativo
Siempre me he centrado en los sitemaps XML para los motores de búsqueda, pero ahora veo el valor de los sitemaps HTML para la navegación del usuario.
Gracias por las instrucciones para usar All in One SEO.
Robert Thompson
WordPress quiere que les pague $300 solo para actualizar a su plan de negocios para poder acceder a sus plugins. Rechazaré su oferta.
Soporte de WPBeginner
Esa sería una limitación si estás en WordPress.com, nuestros tutoriales son para sitios de WordPress.org. ¡Puedes ver la diferencia entre ambos en nuestro artículo a continuación!
https://014.leahstevensyj.workers.dev/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administrador
faraz ahmed
¿Cómo puedo mostrar el sitemap por categoría específica?
Soporte de WPBeginner
El segundo plugin de este artículo debería permitirte separar el contenido por categoría.
Administrador
Carol
No puedo hacer que las ENTRADAS se muestren como las páginas, así que es inútil para mí. En mi sitio, las páginas son cosas estáticas, Acerca de, etc. Pero las entradas son los elementos nuevos que la gente quiere ver de inmediato. Investigo sobre varios temas y ese es el corazón y el alma de mi blog. Quiero que vean las cosas nuevas en orden sobre ese tema, en una lista. Realmente no me importan las Páginas, Privacidad, Cookies, Acerca de, cosas que miras una vez, tal vez, si es que alguna vez.
He experimentado con el código, solo obtengo el CÓDIGO en la página terminada.
¿Qué puedo hacer?
Soporte de WPBeginner
Hola Carol,
Consulta nuestro artículo sobre cómo agregar temas en los menús de navegación de WordPress.
Administrador
Shawn
Me gustaría generar una página de sitemap con todas mis categorías y productos de la tienda woocommerce. ¿Puede este plugin hacer eso?
Raghvendra singh Jadon
¿no podemos crear una página de sitemap como la política de privacidad o contacto?
deepa
¿es posible si podemos crear nuestro propio sitemap?
shirish
artículo realmente muy bueno y útil.
ibu solihatun
El artículo es muy interesante. Me ayudó a entender muchas cosas y pronto estaré feliz de escribir así de nuevo.
Memoria
Muchas gracias, este mapa del sitio está increíblemente bien ajustado, absolutamente perfecto y me ahorró mucho tiempo.
srekanth
¿cómo puedo crear el sitemap xml como el sitio html, hay alguna posibilidad?
adilop
Señor, ¿el sitemap del plugin yoast no es suficiente?
Soporte de WPBeginner
Por favor, lea la sección sobre la diferencia entre los sitemaps XML y HTML.
Administrador
adilop
Gracias por su sugerencia, señor.
Blane Beckwith
Agregué un mapa del sitio HTML a mi página web, y resultó en una página de archivo muy atractiva y funcional.
Connor Rickett
Nunca es una mala idea tener un sitemap para tus visitantes. Solo como nota aparte, cuando envíes tu sitemap a Google, ¡asegúrate de que sea el XML!
Natascha
Lo que sí echo de menos es, ¿por qué alguien necesitaría un sitemap HTML o cuándo se recomienda? Quizás una breve lista de pros y contras ayudaría. Gracias
Soporte de WPBeginner
Es más útil para sitios con contenido estático y no cronológico, es decir, páginas. Una página de sitemap puede ayudar a los usuarios a ver todas las páginas en su orden jerárquico.
Administrador