Crear una galería de fotos filtrable es una excelente forma de mostrar imágenes de manera ordenada y atractiva en tu sitio web. En este artículo, vamos a explorar cómo puedes diseñar una galería de fotos utilizando HTML, CSS y JavaScript, optimizando el contenido para SEO para que tu página sea fácilmente indexada por los motores de búsqueda.
Las galerías de fotos filtrables son útiles por varias razones:
A continuación, detallaremos los pasos para crear tu propia galería filtrable.
Primero, comenzaremos creando la estructura HTML de la galería. Utilizaremos una lista no ordenada para mostrar nuestras imágenes.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Galería de Fotos Filtrable</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Galería de Fotos Filtrable</h1> <input type="text" id="searchInput" placeholder="Filtrar por categoría..."> <ul id="gallery" class="gallery"> <li class="filter-item nature"><img src="https://picsum.photos/id/237/200/300" alt="Naturaleza 1"></li> <li class="filter-item nature"><img src="https://picsum.photos/id/32/200/300" alt="Naturaleza 2"></li> <li class="filter-item architecture"><img src="https://picsum.photos/id/43/200/300" alt="Arquitectura 1"></li> <li class="filter-item architecture"><img src="https://picsum.photos/id/54/200/300" alt="Arquitectura 2"></li> <li class="filter-item technology"><img src="https://picsum.photos/id/53/200/300" alt="Tecnología 1"></li> <li class="filter-item technology"><img src="https://picsum.photos/id/77/200/300" alt="Tecnología 2"></li> </ul> <script src="script.js"></script> </body> </html>
A continuación, agregaremos estilos básicos con CSS para mejorar la apariencia de la galería.
body { font-family: Arial, sans-serif; } .gallery { display: flex; flex-wrap: wrap; list-style: none; padding: 0; } .filter-item { margin: 10px; } .filter-item img { width: 200px; height: auto; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
Finalmente, implementaremos la lógica para filtrar las imágenes usando JavaScript.
document.getElementById('searchInput').addEventListener('keyup', function() { let filter = this.value.toLowerCase(); let items = document.querySelectorAll('.filter-item'); items.forEach(item => { if (item.classList.contains(filter) || filter === '') { item.style.display = ''; } else { item.style.display = 'none'; } }); });
Para optimizar tu galería de fotos filtrable para SEO, considera los siguientes consejos:
Asegúrate de que cada imagen tenga un atributo alt descriptivo. Esto no solo ayuda a la accesibilidad, sino que también es fundamental para el SEO, ya que los motores de búsqueda utilizan esta información para indexar tus imágenes.
Si estás utilizando un sistema de gestión de contenido (CMS), asegúrate de que las URL de tus imágenes sean descriptivas y contengan palabras clave relevantes.
Optimiza las imágenes para web antes de subirlas. Utiliza formatos como JPEG o WebP, y comprime las imágenes para mejorar la velocidad de carga del sitio.
Asegúrate de incluir texto relevante cerca de la galería, que explique el contexto de las imágenes y utilice palabras clave adecuadas para mejorar la indexación.
Crear una galería de fotos filtrable utilizando HTML, CSS y JavaScript es un proceso sencillo que puede enriquecer la experiencia del usuario en tu sitio web. Siguiendo los pasos anteriores y aplicando técnicas de SEO, puedes asegurarte de que tu galería no solo sea visualmente atractiva, sino también fácilmente accesible para los motores de búsqueda. ¡Anímate a implementarlo y mejora tu presentación de contenido visual!
Page loaded in 25.35 ms