Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Listado de Artículos
Ayudando al posicionamiento SEO sin modificar diseño gracias al CSS
Este artículo surge a raíz del comentario que hizo Señor Muñoz a mi tweet
En el directo « Señor Muñoz – Deja de poner links aleatorios en tus plugins y temas» que dió en la iniciativa #yomequedoencasa creada por mowomo, comentaba que uno de los errores más comunes es poner un enlace, y dentro de él, primero una imagen, y luego un título a causa del diseño.
Para conseguir el diseño de este bloque, lo normal es que se ponga este HTML y luego aplicarle un estilo.
<a href="#">
<img src="http://via.placeholder.com/300x210" alt="">
<h2>Título de ejemplo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quas veritatis, enim, dolor ea, blanditiis velit dicta atque unde dignissimos reiciendis distinctio! Vel esse fuga dolor mollitia, aliquam officia. Placeat.</p>
</a>
Según Señor Muñoz, para mejorar el link tenemos que poner primero el texto que nos interese posicionar, en este caso el título para relacionarlo con el link.
Por lo que el HTML nos quedaría así.
<a href="#">
<h2>Título de ejemplo</h2>
<img src="http://via.placeholder.com/300x210" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quas veritatis, enim, dolor ea, blanditiis velit dicta atque unde dignissimos reiciendis distinctio! Vel esse fuga dolor mollitia, aliquam officia. Placeat.</p>
</a>
Y el resultado sería el siguiente :
Es indiferente dónde se encuentre la imagen, siempre que sea después del título según este ejemplo.
Situar la imagen al principio es muy sencillo con la propiedad FLEX de CSS, añadiendo al contenedor DIV el siguiente código:
display: flex;
flex-direction: column;
Y a la imagen le asignamos el order: -1 para situarla al inicio. Quedaría así el código final CSS:
div{
display: flex;
flex-direction: column;
}
img{
order: -1
}
Aquí os dejo el vídeo para que veáis el resultado.
Conclusión
Gracias al conocimiento del CSS se puede mejorar el posicionamiento de la página, sin que afecte al diseño.
y gracias a Sr.Muñoz por sus tips sobre posicionamientos…. y a Mowomo por los 40 días de eventos sobre WordPress.
CSS SEO Técnico