Categories
SEO

Etiquetas de imagen HTML y cómo insertar imágenes para enriquecer sus páginas

¿Qué son las etiquetas de la imagen HTML?

Cuando carga una página web, las imágenes deben aparecer rápidamente. Los humanos son criaturas visuales y nos gusta ver páginas web con imágenes coloridas. Dibujan nuestro ojo y nuestra atención.

Esas imágenes se le solicitan etiquetas de imagen, un tipo de código que le dice al servidor del sitio web donde encontrar las imágenes, cómo cargarlas y qué hacer con ellos una vez que se han cargado.

Las etiquetas de imagen son instrucciones sobre cómo mostrar una imagen, ya que las imágenes no están realmente incrustadas en una página. Las imágenes son archivos que se obtienen y se muestran en la página dependiendo del código o la etiqueta de imagen utilizada. El código puede cambiar los atributos o la funcionalidad de la imagen cuando se carga.

Puede enviar algunas señales de SEO significativas optimizando las imágenes de su sitio web. Discutimos esto en profundidad con nuestra guía en la imagen SEO aquí .

¿Qué es una etiqueta de imagen HTML?

Mire las etiquetas de la imagen más estrechamente:

en el Código anterior, puede ver 2 atributos: SRC y ALT.

SRC indica la ruta a la imagen que se muestra. Alt indica el texto alternativo para mostrar si la imagen en sí no se puede mostrar.

Después del atributo Alt, puede ver atributos de altura y anchura. Puede establecer las dimensiones de una imagen manualmente, lo que puede ser útil si tiene requisitos de espacio estrictos en una página web.

Asegúrese de evitar deformar una imagen al configurar las dimensiones de su imagen; Esto puede crear una experiencia de usuario deficiente.

Atributo SRC

El atributo Fuente (SRC) crea una ruta a laarchivo de imagen. Si el enlace está roto, el archivo se ha movido, o hay un error tipográfico en el código, verá un ícono de ‘imagen rota’ en la página.

Atributo ALT

El atributo ALT especifica el texto alt para las imágenes si no pueden o no cargarse. El texto ALT es útil para las personas con visión limitada. Las herramientas de texto a voz pueden decirle al espectador qué imagen se muestra.

También es bueno para los resultados de SEO. Búsqueda de imágenes de Google ¿Alguien?

Ancho y altura

Estos atributos dictan la altura y el ancho de una imagen. Si usa estos atributos con una etiqueta de imagen, es la mejor práctica configurar tanto la altura como la anchura, por lo que la página sabe cuánto espacio en la página es necesario para mostrar la imagen.

Si no especifica ambos, podría experimentar problemas mientrasLa página intenta cargar la imagen.

Los atributos de ancho y altura aparecen así:

Este código carga el mago del logotipo de Semrush con el nombre de archivo img_logo.jpg. La imagen sería de 500 píxeles de ancho y 600 píxeles de altura.

Otros atributos

Hay algunos atributos más que puede usar en una etiqueta de imagen. Otro que puede usar para formatear es el atributo “alinear”. Este atributo coloca su imagen donde lo desea en la página.

Con los creadores y editores de la página web modernos en estos días, esta etiqueta es en su mayoría redundante. Puede hacer clic y arrastrar e insertar imágenes donde desee. Sin embargo, algunos codificadores aún usan la etiqueta de alineación para alinear sus imágenes donde las desean.

Los ejemplos de este uso de atributos incluyen “izquierda” y “derecha”, que colocan la imagenya sea el lado izquierdo o el lado derecho de la página.

“Top de texto” alinea la imagen con el ejemplo de texto más alto; “Bottom ABS” alinea su imagen con la parte inferior de la línea actual en la que se coloca.

Cómo agregar una etiqueta de imagen HTML

Si desea agregar manualmente una imagen a su página, le mostraremos cómo hacerlo.

Agregue una imagen estándar

Este código encontrará e insertará una imagen del logotipo de Semrush, con un ancho y una altura de 50 x 50 píxeles. Esta imagen se alinearía con la parte inferior de la pantalla.

Este código también inserta una imagen de 50 por 50 píxeles del logotipo de Semrush. El estilo es ‘flotando bien’, lo que significa que la imagen estará en el lado derecho de la página. Los elementos cercanos fluirán alrededor de la imagen,Al igual que la envoltura de texto en un procesador de textos.

Agregue borde de imagen

El código anterior agregará la imagen cuadrada de 50 por 50 píxeles del logotipo de Semrush y agregará un borde verde grueso de 10 píxeles.

Esto puede ayudar a resaltar imágenes importantes en una página y llamar el ojo a donde desea que un usuario se vea. Agregue márgenes a la izquierda y derecha a una imagen

Este código carga el logotipo de Semrush, lo alinea verticalmente en el centro de la página, y agrega un ancho de 50 píxeles Margen hacia el lado izquierdo y derecho de la imagen. Ahora, no aparecerá ningún texto dentro de los 50 píxeles a cada lado de la imagen.

Agregue márgenes superior e inferior a una imagen

Al igual que lo anterior, el logotipo de Semrush se cargará, alineado nuevamente con el centro de la página, pero ahora contará con 50-Pixel margen arriba y debajo de la imagen. Ningún otro elemento vendrá dentro de 50 píxeles de esta imagen, arriba o abajo.

Por qué las etiquetas de la imagen HTML son importantes y cómo usarlas

Elementos visuales agregan a la experiencia del usuario de una página. Si una página se ve atractiva, la gente se mantendrá más tiempo, y Google tomará nota de esto.

Las etiquetas de la imagen anclan la imagen para que aparezca en relación con otros elementos en la página web. Puede usar etiquetas de imagen para configurar cómo aparece la imagen y optimizar tanto para los bots de los motores de búsqueda como para los usuarios.

Las etiquetas que usa impactan sus velocidades de carga de página, que pueden afectar la experiencia del usuario de su sitio web.

Todos los navegadores actuales admiten estos códigos de etiqueta de imagen, por lo que no importará qué navegadores usen usted o sus visitantes. Etiquetas de imagen Traducir a todos los navegadores FOr una experiencia consistente.

Cuándo usar las etiquetas de imagen HTML

Utiliza una etiqueta de imagen cuando la imagen es una parte del contenido, no parte del diseño de la página en sí.

Por ejemplo, si tiene una plantilla de página que incluye una imagen de su logotipo o algo similar, entonces no usaría una etiqueta de imagen en el código. Una plantilla con imágenes debe ser consistente en todo su sitio web.

Su sitio web cargaría la plantilla que incluye la imagen, luego agregaría su contenido a esa página.

La etiqueta de la imagen especifica cómo y dónde se utilizará la imagen y se presentará en el contenido. Cómo la herramienta de auditoría del sitio puede identificar los problemas de etiqueta de imagen HTML

La herramienta de auditoría del sitio

cuenta con más de 130 cheques de sitios web que puede realizar en su sitio web, incluido unPocos para etiquetas de imagen y cualquier enlace relacionado. La herramienta de auditoría del sitio puede ver si los enlaces siguen siendo precisos o si se han roto.

Es más fácil que nunca abordar cualquier error de imagen, reparar enlaces de imágenes rotos y mejorar la experiencia del usuario de su sitio web.

Puede usar la herramienta de auditoría del sitio en Tangente con un proyecto. Si no tiene un proyecto actualmente configurado, deberá configurar uno antes de usar la herramienta de auditoría del sitio.

Una vez que la herramienta esté abierta, se le solicitará que configure el alcance de arrastre de la herramienta:

Cuando se complete la auditoría, la herramienta devolverá una lista de problemas para revisar, incluidas las imágenes con respecto a las imágenes:

3 Las cuestiones principales que pueden surgir con respecto a las imágenes son:

La imagen ya no está ubicada: necesitará localizar la imagen o su código y ChangE su URL de origen. Se eliminó la imagen: Reemplace la imagen con una nueva imagen y actualice el enlace. Ya no es necesario una imagen: elimine la imagen y el código de su página.

Llaves para llevar

Las etiquetas de imagen son parte de estilizar y optimizar su página web, experiencia de usuario y SEO.

Puede caber o colocar sus imágenes agregando atributos adicionales, como “ancho” o “alinear”, a las etiquetas de su imagen. Siempre previsualice su sitio web al realizar cambios para garantizar cualquier atributo que agregue al código de imagen, no rompa la imagen o su sitio web. Use una herramienta de auditoría del sitio para garantizar que su código de imagen sea preciso y que sus imágenes puedan ser obtenidas y vistas.

Leave a Reply

Your email address will not be published. Required fields are marked *