atributos alt y título. ¿Qué son los atributos alt y title en WordPress y para qué sirven? Atributos no completados

El atributo Alt es una etiqueta que establece texto alternativo para una imagen que aún no ha sido cargada por el navegador. Este texto también se muestra cuando la visualización de imágenes está deshabilitada en el navegador de Internet. Con la configuración estándar del navegador, este texto se reemplaza por una imagen a medida que se carga.

Así es como se ve el atributo Alt para imágenes en el código de la página:

Si se especifica una etiqueta Alt para una imagen, en un navegador que no permite cargar imágenes, veremos algo como esto:

¿Qué significan los atributos Alt para las imágenes en términos de optimización SEO? Gracias a estas etiquetas, dejamos claro al robot de búsqueda mediante texto qué información gráfica contiene la página.

Cómo optimizar el atributo ALT

Muchos webmasters y especialistas en SEO tienen una pregunta: ¿cómo se debe firmar una imagen en el atributo Alt?

Vale la pena considerar que los motores de búsqueda solo tienen en cuenta las primeras palabras del atributo Alt de una imagen, por lo que no se recomienda hacer descripciones demasiado largas de la imagen. De 3 a 10 palabras es suficiente.

¿Qué y sobre qué escribir en la etiqueta Alt?

Para decidir qué escribir en el atributo Alt, basta con mirar la imagen misma. En primer lugar, la etiqueta Alt en la descripción de la imagen debería describirla. Si la imagen muestra la etiqueta Alt, entonces el título también debe ser apropiado. Ejemplo:

El texto de la etiqueta Alt para la imagen de arriba es "etiqueta alt en el código de la página", que describe completamente esta ilustración.

Otro requisito para este atributo es que debe contener la palabra clave o frase para la cual está optimizada la página. Esta página trata sobre el atributo Alt; en consecuencia, en las imágenes de este artículo puede ver la aparición de esta frase, así como sinónimos similares (etiqueta, atributo, alt, viola).

Pero no deberías enviar spam con palabras clave en atributos ALT en una página web, ya que podrías terminar con archivos . Google también tiene una actitud negativa hacia el spam.

Sintaxis de atributos alternativos para imágenes

Así es como se ve el código HTML para el atributo Alt de la etiqueta IMG:

En código XHTML:

Se requieren atributos alternativos para una imagen. En cualquier servicio de auditoría SEO de un sitio web online, la ausencia de esta etiqueta se considera un error. Por lo tanto, si revisó su sitio en busca de errores y descubrió que no hay una etiqueta HTML Alt, debe solucionarlo con urgencia. Luego, la próxima vez existe la posibilidad de que la PS tenga en cuenta esta actualización.

Cómo configurar una etiqueta alt para una imagen

En el CMS de WordPress, es bastante fácil configurar atributos Alt para una imagen. Debe hacer clic en la imagen precargada y seleccionar Editar. En la ventana que se abre, agregue una descripción del atributo Alt y haga clic en el botón Actualizar. ¡Listo!

Otros paneles de administración del sitio tienen una funcionalidad muy similar, por lo que configurar este atributo no es difícil.

Algunos CMS tienen complementos para configurar automáticamente el atributo Alt según una plantilla determinada. Por lo tanto, inicialmente, antes de llenar el sitio, agregue plantillas de etiquetas Alt, así no tendrá que escribirlas manualmente.

Tampoco es difícil ingresar manualmente la etiqueta IMG Alt; consulte la sintaxis del código arriba.

Hola amigos.

Hoy toca el siguiente material sobre cómo trabajar con imágenes.

Continúo publicando materiales promocionales y de momento este es el segundo artículo que trata específicamente de imágenes en nuestro sitio web. El primero consistía en crear capturas de pantalla de alta calidad.

En este artículo mostraré cómo optimizar imágenes en un sitio web usando los atributos title y alt para promocionar páginas en los motores de búsqueda.

El artículo no será muy largo, pero sí útil.

Comencemos con el hecho de que debes entender una cosa. No todo el mundo presta atención a los pequeños detalles a la hora de promocionar su sitio web. Especialmente en diversos detalles técnicos, como la optimización de la imagen.

Esto es sólo una pequeña cosa que, si se utiliza correctamente, puede ayudarle a superar a sus competidores en las páginas de búsqueda. Si utiliza todas las pequeñas cosas juntas, obtendrá una ventaja mucho mayor sobre otros sitios.

Por lo tanto, es extremadamente indeseable perderse ese momento. Y ahora hablaremos de cómo optimizar correctamente las imágenes de nuestro sitio web y en qué etapas consta este proceso.

Divido todo el proceso de optimización en 3 etapas:

1. Creando una imagen única;
2. Preparar la imagen final para colocarla en el sitio, que no cargará el blog. En esta etapa, reducimos el tamaño de la imagen para que las páginas se carguen rápidamente;
3. Correcta optimización del título y atributos alt de la imagen.

Aquí también puede agregar el nombre correcto del archivo fuente antes de cargarlo en el sitio. Hablaremos de esto a continuación.

Destacaré artículos detallados separados con tutoriales en video sobre cómo crear una imagen única y lo que sigue. Ahora quiero centrar mi atención específicamente en el título y los atributos alt, ya que muchas personas los completan incorrectamente o no los completan en absoluto. ¡Pero en vano!

Después de todo, al completarlos, podemos agregar relevancia (correspondencia a la consulta promocionada) a nuestras páginas y aumentar la cantidad de tráfico al sitio desde la búsqueda de imágenes. También mejore la página en términos de descripción, ya que incluso las imágenes mostrarán a los motores de búsqueda que están colocadas correctamente, lo que significa que la página es de mayor calidad.

Bueno, ahora veamos el proceso de optimización de imágenes en la práctica. Como dije anteriormente, consideremos completar todos los datos: título e imágenes alternativas.

Pero antes te doy una presentación en vídeo en la que te expliqué los puntos principales, que te serán suficientes para hacer todo correctamente y evitar cometer errores graves. Disfruto ver.

¿Cómo rellenar correctamente el título y alt de las imágenes?

Primero, diré algunas palabras sobre estos atributos. ¿Para qué se necesitan?

La tarea principal es permitir que los motores de búsqueda comprendan de qué se trata tal o cual imagen. Además, estos parámetros permiten incluir imágenes en la búsqueda de imágenes para determinadas consultas, que escribiremos en estos atributos.

Ahora veamos cómo completarlos.

Simplemente hay una gran cantidad de opiniones al respecto. Formé mi propia visión basándose en el estudio de varios cursos e informes de personas que entienden los sitios web.

Primero, veamos cuáles son estos atributos.

• Título: en todos los casos, es la etiqueta de título de algo (título de la publicación, imágenes, etc.);
• Alt es un atributo de la etiqueta img itemprop="image" que describe la imagen. También llamado "texto alternativo".

El atributo alt es muy importante para las imágenes. Debe ser llenado 100% correctamente. Al completar el Título, no sucederá nada malo, pero para obtener el mejor efecto también debes prestarle atención.

El primero también se muestra en el sitio como texto cuando la imagen no se carga por determinados motivos. El título se muestra al pasar el cursor sobre la imagen ubicada en el artículo.

En la práctica, si miras el código de la imagen en el sitio, el título y alt se ven así.

Vemos que estos atributos están en el código de la segunda línea. Se les dan ciertos significados, o más bien aquellas frases o palabras que describen el contenido de la imagen. Es el contenido de la imagen, no palabras clave ni nada más.

Ahora ya no es posible introducir una gran cantidad de palabras clave en estos atributos, y más en cada imagen del artículo. Imagina que tienes 40 imágenes en una página. Si escribe la clave búho en el título y alt de todas las imágenes, es probable que esté sujeto a sanciones por parte de los motores de búsqueda y no vea posiciones altas en los resultados de búsqueda.

La única regla que sigo y recomiendo que la uses también es escribir en estos atributos una descripción muy breve de lo que se muestra en la imagen.

También puedes introducir la palabra clave con la que se promociona el artículo, pero no juegues demasiado con ella. Aplico a un máximo de una imagen en el artículo: a la primera miniatura principal.

Quedará muy bien si tu imagen está rodeada de un texto temático que también la describa. Pero, de nuevo, todo debe quedar claro para el visitante y no percibirse como una especie de manipulación. Hacemos todo de forma natural. Si el texto temático no tiene un lugar para estar cerca de la imagen, entonces simplemente escribe el título y alt a la imagen y listo.

¿Deberían ser el título y el alt iguales?

Y de nuevo, muchas opiniones. Algunos dicen que debería haber una diferencia, mientras que otros dicen que el efecto es mejor cuando son iguales. Estoy más inclinado a creer algunos hechos. Para hacer esto, tomé un par de recursos muy exitosos y observé cómo estaban escritos estos atributos en ellos.

En recursos que rápidamente obtuvieron buenos resultados, la optimización de la imagen se reduce a llenar ambos atributos por igual. Y no contienen palabras clave. De hecho, proporcionan una breve descripción de lo que se muestra en la imagen.

Por lo tanto, la siguiente conclusión es que los atributos title y alt pueden ser iguales.

Pero esto no es 100% dogma. Puedes hacerlos un poco diferentes, pero para que no se pierda el significado. Tanto el título como el alt deben describir la imagen. Además, el título puede faltar por completo (no hay ningún error en esto) y contener otra información además de la descripción de la imagen en sí. Obtenga más información sobre cómo completar correctamente el alt y el título. Usando el enlace anterior, profundicé en el tema de completar estas etiquetas. Recomiendo encarecidamente estudiar el material.

Cómo escribir prácticamente atributos en una imagen

Si utiliza algún motor, proporciona dicha función. Lo más probable es que tengas un sitio de WordPress. Todo se hace de forma muy sencilla.

En la ventana emergente, se configuran los parámetros de la imagen, incluidos el título y la alternativa.

Rellenamos todo y no nos olvidamos de actualizar el archivo para que los cambios surtan efecto. Hacemos esto con cada imagen.

Si tu sitio no está administrado por ninguna plataforma, es decir, una simple página html, entonces tendrás que agregarla manualmente.

Recomiendo hacer esto de la siguiente manera. Naturalmente, necesitará el código fuente del sitio, donde podrá ver el código de la imagen. Necesitas una etiqueta de apertura

Para no devanarte demasiado la cabeza, te daré el mismo código que antes. Tómelo como un espacio en blanco para usted.

Míralo como un ejemplo donde necesitas pegar los atributos que copias del mismo código. Luego las agregas a tus imágenes, completando tu descripción.

No olvides que completamos estos datos en función del contenido de la imagen. ¡Describamos la imagen misma!

Este problema ha sido resuelto. Aquí todo está muy claro.

Brevemente la conclusión es: “rellena el título y alt igual y escribe en ellos una descripción de la imagen en sí, es decir, lo que se muestra en la imagen”.

Hemos considerado este tema. Pero el tema de la optimización de imágenes es multifacético y hay otros puntos importantes que puedes utilizar para mejorar el efecto de tu sitio web.

Otros puntos importantes

Hay 3 cosas más que no cubrí arriba:

• nombre del archivo de imagen;
• reducir el peso de las imágenes;
• Unicidad de las imágenes del sitio.

Ahora consideraré solo el primer punto, ya que para los otros 2 he asignado materiales volumétricos completos.

Pocas personas escriben sobre el nombre del archivo en Internet. Pero aquí también hay algunos matices. ¿Cómo debería nombrar el archivo antes de subirlo al sitio?

Como siempre, las opiniones están divididas. Alguien escribe que es necesario utilizar palabras clave. Alguien que necesita llamarse descripción de la imagen, es decir, exactamente igual que título y alt.

Y algunos cargan archivos con cualquier nombre. Tomamos una captura de pantalla usando algún programa. Se le puso un nombre con la fecha actual y así se cargó.

Me inclino más por la segunda opción, cuando también intentamos describir la imagen en el nombre del archivo. Sin palabras clave, excepto la imagen más importante del artículo. Y luego tampoco tienes que usarlo allí.

Como ejemplo, les mostraré una imagen de un artículo anterior de mi blog sobre la creación de un formulario de suscripción para actualizaciones del sitio. Tomaré la siguiente foto.

El código de la imagen se ve así.

Si nos pidieran una frase para transmitir la importancia del texto alternativo, sonaría así: una imagen sin palabras es como un fuego sin leña. ¿Qué tipo de texto es este y cómo afecta la optimización de los motores de búsqueda de su sitio web?

El texto alternativo es una breve descripción de cualquier imagen. El término proviene de la frase "texto alternativo". No se muestra en el sitio y no es visible para los visitantes; es un tipo de metadatos ocultos a miradas indiscretas. Pero a pesar de que casi nadie lee textos alternativos, son muy importantes por dos razones:

Esta es una herramienta útil para SEO. Los motores de búsqueda no pueden reconocer imágenes y responder exclusivamente a palabras. Al agregar texto alternativo a una imagen, la hace "visible" para Yandex o Google y, como resultado, su sitio comienza a subir en los resultados de búsqueda.

Hacen que el sitio sea accesible. Las personas con discapacidad visual utilizan programas de lectura especiales cuando se conectan a Internet. Estos programas, al igual que los motores de búsqueda, no pueden reconocer imágenes. Los textos alternativos ayudan. Describen la imagen y, para una persona con mala visión, todo queda claro.

Ahora que entendemos la importancia del texto alternativo, veamos qué debería ser y qué tener en cuenta al agregarlo.

No seas prolijo. Al agregar texto alternativo, intente mantenerlo en un máximo de 15 palabras.

Escribe claramente. Cuando agregas texto alternativo, estás describiendo la imagen a alguien que no puede verla. Asegúrate de que el lector imaginario comprenda el texto correctamente y sea capaz de imaginar la imagen basándose en su descripción.

Considere el contexto. El texto alternativo a menudo depende del contenido y el tema del recurso. Imagínese una foto de una pareja feliz preparando la cena. En un blog de comida tendrá un significado, pero en un sitio de citas tendrá un significado completamente diferente. Es por eso que los textos alternativos deben corresponder al contexto del sitio y a la página individual.

No envíes spam. No agregue palabras clave ni metaetiquetas al campo de texto alternativo, incluso si realmente lo desea. En su lugar, cree una buena descripción e incluya cuidadosamente un par de palabras promocionales.

No te salgas del punto. No tienes mucho espacio, así que concéntrate en lo más importante. Pueden ser personas, objetos, lugares, colores, el autor de la foto o la atmósfera. En general, no se disperse y observe a qué debe prestar atención.

Agregar texto alternativo es muy fácil. Aquí están las instrucciones.

Para el sitio Wix:

Haga clic en la imagen.

Haga clic en el icono "Configuración".

Agregue texto alternativo al campo "Textos de fotos": "Describe la imagen para los motores de búsqueda".

Para un blog en Wix:

Abra una publicación nueva o ya escrita en el editor del blog.

Alt es un atributo de la etiqueta img que establece texto alternativo para la imagen. La información de texto se muestra cuando la carga de gráficos está deshabilitada en el navegador del usuario y deja claro lo que se muestra en esta imagen. La etiqueta HTML recibe su nombre "alt" de la palabra "alternativa", una versión alternativa del texto.

¿Por qué completar el atributo alt?

El motor de búsqueda indexa no sólo texto, sino también información gráfica e imágenes, una de las fuentes de tráfico adicional. Para mostrar imágenes relevantes al buscar imágenes, Google y Yandex se centran en etiquetas que dicen lo que se presenta en ellas. Gracias a esto, el usuario obtiene exactamente lo que buscaba en los resultados de búsqueda.

El robot de búsqueda se centra principalmente en imágenes con el atributo alt, por lo que desde el punto de vista de la optimización SEO este es un punto muy importante. Por ejemplo, si tiene más de 1000 imágenes en su sitio en cientos de artículos, cada una de ellas puede generar tráfico adicional.

Los visitantes sólo verán el atributo alt si la carga de imágenes está deshabilitada o si la conexión a Internet es deficiente. Los elementos gráficos se cargan después de que el navegador recibe la información, por lo que el texto alternativo es visible antes en la pantalla del monitor.

El atributo alt sólo ayudará a la hora de buscar imágenes, por lo que no afectará los resultados orgánicos de ninguna manera.

Reglas para completar correctamente alt

Para lograr los máximos resultados al completar las etiquetas alt, debe cumplir con las siguientes reglas.

• Los motores de búsqueda ignoran las descripciones largas, así que ajuste su alt a 5 o 6 palabras, pero no exceda los 200 a 250 caracteres.
• La descripción de la imagen debe corresponder claramente a su contenido. Por ejemplo, no tiene sentido insertar la frase "gato doméstico" en una imagen con un automóvil.
• Para aumentar el efecto de la optimización de la imagen, se recomienda utilizar palabras clave de la etiqueta H1 o del título del artículo, pero sólo si tienen un significado similar.
• No utilices una gran cantidad de palabras clave en el texto, no permitas spam en la descripción.
• No optimice los atributos alt de las imágenes que pertenecen al fondo de su sitio o elementos del menú. Su etiqueta debe estar vacía o ausente por completo. Si es posible, se pueden incluir imágenes para elementos de diseño en sprites CSS.
• No cree etiquetas alt adicionales para imágenes similares del mismo material o producto. Por ejemplo, tienes una tienda online de chaquetas, cada una con varias fotos. Esto significa que escribes el mismo nombre para todos, solo puedes sumar los números 1, 2, 3 para diferenciar.