A raíz de que un usuario me ha preguntado sobre una funcionalidad específica que implementé en mi web, he decidido crear este artículo. Esta funcionalidad se centra en mejorar la experiencia del usuario al interactuar con los enlaces internos del contenido en nuestro sitio web. El código que comparto aquí lo uso personalmente en mi sitio web y asegura que los enlaces internos se abran en una ventana emergente (popup) mientras que los enlaces externos se abren en una pestaña nueva, evitando cualquier confusión y mejorando la navegación del usuario.
Por ejemplo, si haces clic en este enlace en vez de llevarte a otra página, el enlace se abrirá en popup. Este sistema es perfecto si necesitas que tus usuarios obtengan información de otras páginas o entradas de tu web sin tener que abandonar la página o artículo que están leyendo en ese momento.
¿Qué Hace el Código?
El propósito de este código es gestionar cómo se abren los enlaces internos y externos en el contenido de nuestras páginas y entradas. A continuación, detallo las características principales:
- Enlaces Internos: Se abren en un popup usando SweetAlert2, lo que permite al usuario consultar información relevante sin abandonar la página actual.
- Enlaces Externos: Se abren en una pestaña nueva del navegador, evitando confusión y manteniendo la página original intacta.
- Limitaciones: Este comportamiento se aplica únicamente a los enlaces dentro del contenido principal de las páginas y entradas. No afecta los enlaces en menús, footers, o barras laterales.
¿Afecta Este Código al SEO?
El impacto de este código en el SEO de tu sitio web es prácticamente nulo, ya que no altera el contenido del enlace ni su estructura. Aquí hay algunos puntos a considerar para entender mejor por qué este enfoque no afecta negativamente tu SEO:
No Modificación de los Enlaces
El código no modifica los enlaces en sí mismos; simplemente intercepta el evento de clic y abre el enlace en un popup si es interno, o en una nueva pestaña si es externo. Esto significa que los motores de búsqueda siguen viendo los enlaces como siempre, lo cual es crucial para el SEO.
Rastreo y Indexación
Los motores de búsqueda como Google rastrean e indexan los enlaces tal y como están escritos en el HTML de la página. Dado que el contenido del enlace no cambia, los bots seguirán encontrando y siguiendo estos enlaces normalmente. Los enlaces internos siguen ayudando a Google a entender la estructura de tu sitio y a distribuir la autoridad de página (PageRank).
Experiencia del Usuario
La mejora en la experiencia del usuario (UX) que proporciona este código puede tener un impacto positivo indirecto en el SEO. Google tiene en cuenta la experiencia del usuario como un factor de ranking. Si los usuarios encuentran tu sitio más fácil de navegar y permanecen más tiempo en él, esto puede mejorar métricas como el tiempo en la página y la tasa de rebote, lo cual puede ser beneficioso para el SEO.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
function enqueue_sweetalert2() {
// Encolar SweetAlert2 CSS y JS
wp_enqueue_style('sweetalert2', 'https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css', array(), null);
wp_enqueue_script('sweetalert2', 'https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_sweetalert2');
// Asegúrate de que el archivo solo se cargue en entradas individuales y páginas
function enqueue_popup_links_script() {
if (is_single() || is_page()) {
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// Selecciona todos los enlaces dentro de the_content
var contentLinks = document.querySelectorAll('.entry-content a');
contentLinks.forEach(function(link) {
link.addEventListener('click', function(event) {
// Verifica si el enlace pertenece a la tabla de contenido
if (this.closest('.tabla-contenido')) {
return; // Si el enlace está en la tabla de contenido, no hacer nada
}
event.preventDefault(); // Previene la acción por defecto del enlace
var url = this.href;
// Detecta si el enlace es interno o externo
var isExternal = new URL(url).hostname !== location.hostname;
if (isExternal) {
// Redirige los enlaces externos a una nueva pestaña
window.open(url, '_blank');
} else {
// Usar SweetAlert2 para mostrar el popup en pantalla completa con un iframe
Swal.fire({
title: '',
html: '<iframe id="popup-iframe" src="' + url + '" width="100%" height="100%" style="border:none; position: absolute; top: 0; left: 0;"></iframe>',
customClass: {
popup: 'fullscreen-popup'
},
showConfirmButton: false,
showCloseButton: true,
width: '100vw',
heightAuto: false,
padding: '0',
background: 'rgba(0, 0, 0, 0.8)',
didOpen: () => {
const iframe = document.getElementById('popup-iframe');
iframe.onload = function() {
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
// Ocultar header, footer, sidebar y contenedor de publicaciones relacionadas dentro del iframe
if (iframeDocument.querySelector('header')) {
iframeDocument.querySelector('header').style.display = 'none';
}
if (iframeDocument.querySelector('footer')) {
iframeDocument.querySelector('footer').style.display = 'none';
}
if (iframeDocument.querySelector('aside')) {
iframeDocument.querySelector('aside').style.display = 'none';
}
if (iframeDocument.querySelector('.ct-related-posts-container')) {
iframeDocument.querySelector('.ct-related-posts-container').style.display = 'none';
}
iframeDocument.body.style.margin = '0'; // Eliminar márgenes del body
}
}
});
}
});
});
});
</script>
<style>
.fullscreen-popup {
width: 70vw !important;
height: 90vh !important;
max-width: 100vw !important;
max-height: 100vh !important;
margin: 0 !important;
top: 0 !important;
left: 0 !important;
padding: 0 !important;
background-color: rgba(0, 0, 0, 0.8) !important;
}
@media (max-width: 768px) {
.fullscreen-popup {
width: 100vw !important;
height: 100vh !important;
}
}
</style>
<?php
}
}
add_action('wp_footer', 'enqueue_popup_links_script');
Lenguaje del código: PHP (php)Entendiendo el Código
Encolado de SweetAlert2
La función enqueue_sweetalert2 se utiliza para encolar los estilos CSS y el script JavaScript de SweetAlert2 en el sitio web. Esto garantiza que las librerías necesarias para crear los popups estén disponibles en las páginas donde se necesitan. La función wp_enqueue_style encola el archivo CSS, y wp_enqueue_script encola el archivo JavaScript, asegurándose de que jQuery esté disponible antes de cargar SweetAlert2.
Carga Condicional del Script
La función enqueue_popup_links_script se asegura de que el script solo se cargue en páginas individuales (is_single()) y páginas estáticas (is_page()). Esto evita cargar scripts innecesarios en otras partes del sitio web, optimizando así el rendimiento.
Manipulación del DOM
Una vez que el DOM está completamente cargado (DOMContentLoaded), el script selecciona todos los enlaces dentro del contenido principal de la entrada o página (.entry-content a). Esto se hace para asegurarse de que solo los enlaces en el contenido principal sean afectados.
Manejo del Evento de Clic
Para cada enlace, se añade un event listener para el evento de clic. Cuando un enlace es clicado, primero se verifica si pertenece a la tabla de contenido (.tabla-contenido). Si es así, no se hace nada y se permite que el enlace funcione normalmente. Si no, se previene la acción por defecto del enlace (event.preventDefault()).
Detección de Enlaces Internos y Externos
El script luego verifica si el enlace es interno o externo comparando el hostname del enlace con el del sitio actual (location.hostname). Si el enlace es externo, se abre en una nueva pestaña usando window.open(url, '_blank').
Apertura de Enlaces Internos en un Popup
Si el enlace es interno, se utiliza SweetAlert2 para mostrar el contenido del enlace en un popup. El popup se configura para ocupar toda la pantalla, con un iframe que carga el contenido del enlace. Dentro del iframe, se ocultan elementos como el header, footer, sidebar y contenedores de publicaciones relacionadas para proporcionar una experiencia más limpia y enfocada.
Estilos del Popup
Se añaden estilos personalizados para asegurar que el popup tenga un aspecto adecuado y responsive. El popup se configura para ocupar el 70% del ancho de la pantalla y el 90% de la altura en dispositivos grandes, y el 100% tanto en ancho como en altura en dispositivos móviles. Esto asegura que el popup sea usable y accesible en diferentes tamaños de pantalla.
En resumen, este código mejora la experiencia del usuario al interactuar con los enlaces internos sin afectar negativamente el SEO del sitio web. Al cargar los scripts de manera condicional y optimizar la experiencia del usuario con popups, se logra una navegación más intuitiva y eficiente.
Nos vemos en el siguiente tutorial.
Un saludo.
Deja tus opiniones o dudas en los comentarios.