¿Qué es el atributo alt en WordPress? Escribimos alt y título. Cómo escribir: con mayúscula o minúscula

En el artículo de hoy, quiero ver por qué todavía vale la pena completar el atributo Alt HTML para imágenes y en qué se diferencia del atributo Título. El material está destinado a webmasters principiantes y novatos que estén interesados ​​​​en la pregunta de por qué y por qué es necesario completar el atributo Alt. Al final del artículo, he preparado respuestas a preguntas populares sobre estos atributos. Empecemos con lo básico.

¿Qué es el atributo Alt?

Alt para la imagen es fuente alternativa información para los usuarios que, por algún motivo ( Internet lento, la visualización de imágenes está desactivada, etc.) las imágenes no se muestran en la página. Se muestra como texto donde debería haber una imagen.

Veamos un ejemplo.

Por ejemplo, tomé una foto de un sitio de fondos de escritorio. El contenido principal de la página son imágenes.

Después de que desactivé la visualización de imágenes en el navegador, todos los gráficos de la página dejaron de mostrarse y se pueden ver. descripción alternativa Imágenes.

Con su ayuda, entendemos lo que hay en la página. Además, este atributo no sólo es útil para el usuario, sino que también ayuda al robot de búsqueda a comprender lo que se muestra en la imagen. Tanto Google como Yandex utilizan Alt como uno de los criterios de clasificación para las búsquedas de imágenes.

Surge la siguiente pregunta: ¿qué se debe agregar a Alt para que sea lo más útil posible tanto para el usuario como para el motor de búsqueda?

Cómo llenar correctamente el atributo Alt para imágenes

Para entender cómo completar correctamente el atributo Alt, considere el siguiente ejemplo: tenemos una tienda de artículos para mascotas en línea y queremos especificar Alt para la tarjeta de producto con una "pelota para perros".

Hay varias opciones para completar el atributo:

Opción 2. Escribe en Alt “Perro con una pelota en la boca”. En este caso, describimos la imagen en sí, pero hay que prestar atención a que la solicitud “Perro con una pelota en la boca” es informativa. No es adecuado para describir una imagen de una tienda online.

Opción 3. Alt "Pelota para perros": esta opción nos conviene más, pero como puede haber muchas pelotas en la tienda, es mejor aclarar la solicitud.

Opción 4. Alt “Pelota para perros Humunga Chomp”: esta opción es óptima para nosotros. El atributo contiene el nombre del producto y su fabricante. Si hay muchos productos de este tipo, puede expandir Alt usando el color y el nombre del modelo.

Opción 5. Alt "Pelota para perros Humunga Chomp, juguete Humunga Chomp, comprar, económico, Moscú": el motor de búsqueda puede percibir esta opción como spam y resultado deseado no lo traerá.

De estos ejemplos se deduce que el atributo Alt:

  • debe ser significativo y describir la imagen;
  • constan de 3 a 5 palabras, pero no más de 250 caracteres (es difícil describir una imagen en dos palabras);
  • no debería ser spam.

¿Por qué se necesita el atributo Título?

El título de las imágenes da Información adicional sobre la imagen. Es necesario para que al usuario le resulte más fácil comprender lo que se muestra en la imagen. El atributo se muestra cuando pasa el cursor sobre la imagen.

La imagen de arriba muestra cómo se muestra el atributo en la página.

En el código HTML, el atributo se escribe de la siguiente manera:

.

Se recomienda llenar Título. Puede tener un efecto positivo en los parámetros de comportamiento del sitio. Cuando al usuario le resulta difícil entender lo que se muestra en la imagen, puede apuntar automáticamente con el ratón y la sugerencia del título le ayudará a encontrar el camino.

Los requisitos básicos para el Título son similares a los de Alt:

  • debe ser significativo y describir la imagen;
  • constar de 3 a 5 palabras, pero no más de 250 caracteres;
  • no debe ser demasiado grande, ya que al pasar el mouse, un texto de 3 a 4 líneas puede resultar intimidante;
  • si es posible, contenga una consulta clave;
  • no debería ser spam.

Sabiendo esto, pasemos a las preguntas.

Respuestas a preguntas populares sobre Alt y Título

¿Alt son descripciones de imágenes?

No precisamente. Alt es una descripción alternativa que se mostrará en lugar de una imagen si el usuario no muestra imágenes.

¿Es necesario completar? atributos alternativos y Título de las fotos?

Si está interesado en el tráfico de la búsqueda de imágenes, debe completar Alt, el Título es opcional.

¿Alt y Título deberían ser diferentes o iguales?

Hay dos opiniones principales al respecto:

1) Alt y Título deben ser únicos;

2) los atributos deben ser los mismos.

Si observa cómo los sitios cuyas imágenes se encuentran en el TOP de búsquedas de imágenes completan estos atributos, veremos ambas opciones para completar.

Yandex escribe lo siguiente sobre esto:

Creo que estos atributos pueden ser los mismos. Lo principal es que brinden una descripción clara y estructurada de tu imagen.

¿Es necesario incluir el Título al lado del atributo Alt?

Opcional, pero tenga en cuenta: el atributo Título en algunos casos ayuda a comprender mejor lo que se muestra en la imagen. Esto puede tener un impacto positivo en el comportamiento del sitio.

EN Imágenes alternativas tienes que poner los mismos palabras clave, igual que el artículo, u otros?

Preferiblemente. Lo principal es que Alt tiene significado y describe la imagen.

¿Necesito incluir palabras clave en estos atributos?

Si estas palabras clave describen la imagen, entonces sí.

¿Cómo escribir correctamente el atributo Alt: cirílico o latino?

Si su sitio está en ruso, complételo en cirílico.

¿Cómo escribir, con mayúscula o minúscula?

No importa.

Y si el artículo ya ha sido indexado por los buscadores, ¿es posible incluir una descripción en las imágenes o no merece la pena?

Poder. Cuando los motores de búsqueda vuelvan a indexar su página, tendrán en cuenta estas descripciones.

¿Dónde debo completar Alt y Título?

Todo depende del CMS en el que esté creado su sitio.

Si esto HTML puro, Eso:

Generalmente los campos para rellenar Alt y Título están en los parámetros de la imagen. Por ejemplo, si su sitio está creado en WordPress, cuando abra las opciones de imagen, verá un campo para completar el atributo Alt. EN ajustes adicionales Hay un campo para el atributo Título.

Si su sitio está en 1C-Bitrix, en la configuración adicional de los parámetros de la imagen hay un campo para el atributo Alt. El atributo Título se extraerá del campo "Título".

Debes comprender que todo es individual. Mucho depende de en qué CMS esté creado su sitio y de cómo esté configurado.

¿Vale la pena? ¿Es posible especificar Alt y Título para tus imágenes en los comentarios?

No veo la necesidad de esto y es poco probable que alguien en los comentarios tenga la oportunidad de optimizar las imágenes.

Cuando escribo un título y un alt en ruso para imágenes, se muestran jeroglíficos en el sitio, ¿qué debo hacer?

Esto sucede debido a la codificación. Debe convertir la codificación actual a UTF-8.

Resultados

Repasemos una vez más qué deberían ser Alt y Título.

Requisitos básicos para el atributo Alt:

  • significativo, describe la imagen;
  • entre 3 y 5 palabras (hasta 250 caracteres);
  • debe incluir una consulta clave si es posible;
  • no debería ser spam.

Por qué deberías completar Alt:

1. los motores de búsqueda lo tienen en cuenta al clasificar las imágenes, lo que significa que si su imagen llega al TOP, es una fuente de tráfico adicional;

2. Será útil para un usuario que haya desactivado las imágenes en el sitio.

Título Atributo:

  • significativo y describe la imagen;
  • alrededor de 3 a 5 palabras o hasta 250 caracteres;
  • si es posible, debe contener una consulta clave;
  • no es basura.

Por qué deberías completar el Título:

1. será útil para el usuario que tiene dificultades para entender lo que se muestra en la imagen;
2. Las sugerencias de título pueden tener un impacto positivo en el comportamiento del sitio.

liberamos Nuevo libro"El marketing de contenidos en en las redes sociales: Cómo entrar en la cabeza de tus suscriptores y enamorarlos de tu marca.”

Suscribir

¿Qué son las etiquetas alt?

Las etiquetas alternativas son descripción del texto contenido de la imagen gráfica en la página, permitiéndole obtener más información completa al respecto y mejorar la navegación en el sitio. Para aquellos usuarios que apagan imágenes gráficas En el navegador, será conveniente utilizar la etiqueta alt para determinar qué debería haber en la imagen. Y el título contiene información sobre herramientas para la imagen que aparece cuando pasas el cursor sobre ella.

Todos ya sabemos lo importante que es dividir el texto en bloques, agregar imágenes que hagan que el texto sea visualmente atractivo y más fácil de leer. si te imaginas SEO Como en las carreras de caballos en un hipódromo, el caballo que lo ha dado todo siempre llegará primero a la meta. Cuando era necesario, aceleraba o caminaba alrededor del círculo interior, y el jinete iba lo más ligero posible con un traje ajustado. Aquí ocurre lo mismo: debes aprovechar la promoción al máximo. Un rastreador de motor de búsqueda que rastrea su página y ve una imagen optimizada tendrá una buena idea de lo que hay allí cuando lea la etiqueta alt. Él agregará esta información al índice y usted recibirá un beneficio de SEO para su página y una ventaja en los resultados de búsqueda.

atributo alternativo(texto alternativo) es un atributo de etiqueta , permitiendo al robot de búsqueda “ver” la imagen e indexarla. De hecho, Breve descripción lo que se muestra en la imagen

Título Atributo es un atributo , que actúa como título de la imagen. Genera información sobre herramientas para imágenes.

Así es como se ven las etiquetas alt y title en el código de la página:

Reglas para escribir texto en los atributos alt y title

  • La descripción debe corresponder completamente al contenido de la imagen.
  • Debe contener una palabra clave.
  • Debería haber diferentes etiquetas alt en la misma página. Si usas las mismas claves para todas las imágenes, esta página se verá mal rango, y existe la posibilidad de caer bajo el filtro AGS
  • El volumen óptimo es de 3 a 10 palabras para alt. El título debería ser más largo y desarrollado.
  • Los textos para alt y title deben ser diferentes

Configurar alt para imágenes

En la mayoría de los CMS, configurar este atributo es bastante sencillo. Por ejemplo, en Wordpress hacemos clic botón derecho del ratón a la imagen -> "Editar" -> agregue una descripción del atributo alt.

Muchos CMS tienen una funcionalidad similar. Algunos incluso tienen complementos para configurar plantillas de estas etiquetas.Para ingresar manualmente el atributo alt, siga la sintaxis de la etiqueta , presentado anteriormente.

Si quieres información detallada, está en nuestra Blog.

Digamos que el tráfico a su sitio está creciendo ante sus ojos, pero incluso en este caso no debe descuidar la optimización de la imagen. Esta es una oportunidad para recibir más tráfico a los recursos ya invertidos. Las claves están perfectamente incluidas en los textos, el aspecto técnico del sitio es excelente, hay muchos visitantes, pero podría haber incluso más. La optimización de las imágenes en el sitio ayudará con esto, porque en la clasificación consultas de búsqueda Las fotos también participan. Además, existe la posibilidad de recolectar tráfico adicional de solicitudes “+ foto”.

Hola queridos amigos. Hoy, a petición de uno de mis suscriptores, les hablaré sobre la etiqueta ALT (atributo), que debe estar presente en los parámetros de cada imagen del sitio.

La ausencia del atributo alt no aparece externamente en la propia imagen. Pero, internamente, en el código fuente, la ausencia de una etiqueta alt es un error. Y los robots de búsqueda cuentan cada uno de esos errores. Y cosas tan aparentemente pequeñas se ralentizan promoción en buscadores cualquier sitio.

Y si al colocar imágenes en un artículo puedes indicar inmediatamente lo que deseas Texto alternativo, luego con imágenes (elementos) de diseño será más difícil. Sucede que estos elementos de diseño particulares carecen de una etiqueta alt. Y muchos principiantes ni siquiera saben de la presencia de estos errores en sus sitios web.

¿Por qué se necesita el atributo alt?

Se trata del mecanismo mediante el cual el navegador carga una página web. Cuando se carga una página, el texto del atributo alt se carga primero y luego el texto se cambia a una imagen. Si la carga de imágenes está deshabilitada en el navegador, en lugar de la imagen habrá texto alternativo (del atributo alt).

Los robots de búsqueda ven la página sólo como código fuente y la presencia de una etiqueta alt les informa sobre el contenido de la imagen. Por cierto, incluso la presencia de una etiqueta alt sin texto será aceptada por el motor de búsqueda como señal de buena forma. Es decir, la presencia del atributo en sí es obligatoria, pero su valor es opcional.

Alt="valor" !}

Cómo verificar imágenes para el atributo alt

La forma más fácil y accesible para todos es consultar fuente páginas (validación de código) para errores.

Para hacer esto, debe abrir el servicio de verificación de código. W3C e ingrese la URL de la página.

Después de verificar el código fuente, página especificada, se abrirá en la pantalla un informe de disponibilidad e información de error (si corresponde). Y si al menos a una imagen de la página le falta una etiqueta alt, verá este error:

Nota: si hay muchos errores, le aconsejo que utilice CTRL+F búsqueda para búsqueda rápida la información necesaria.

Aquí tienes otra forma que te permitirá conocer errores en el código fuente de tu sitio. Pero, para utilizar esta herramienta, es necesario registrarse en la cuenta de webmaster de Bing. Y en esta misma oficina hay una herramienta "Herramientas de análisis SEO".

Donde también ingresa la dirección de la página del sitio para su análisis y recibir un informe. Y si falta una etiqueta en alguna parte alternativo, lo verás.

También puede consultar el código fuente de la página para ver exactamente dónde buscar. Para hacer esto necesitas ir al marcador. "Código de página" y encontrar dónde se cometió el error. Hazlo facil código requerido se resaltará en amarillo.

Cómo encontrar el fragmento de código fuente deseado y agregar el atributo alt

En primer lugar, debe observar de cerca los datos que recibió de las herramientas de análisis. Nota:

- al nombre del archivo de imagen,

— el nombre de la clase, el bloque en el que se encuentra la imagen,

- a elementos adyacentes.

Todos estos elementos ayudarán en el futuro a encontrar el archivo y, en él, el fragmento de código fuente deseado.

Como ejemplo, mire la captura de pantalla de arriba. El código que necesitamos no tiene nada de especial. Sí, sabemos en qué está este banner. nuevo libro gratis azamáta. Además, sabemos que el banner se encuentra en la barra del sitio. Pero imaginemos que no le presté atención. Entonces, ¿qué puedes aprender de este código?

En primer lugar, sabemos el nombre del archivo de imagen. Y no importa que la imagen esté ubicada en otro sitio. También vemos un bloque DIV con una clase.

. Y el hecho de que este bloque está ubicado dentro de una lista, cuyo elemento tiene el identificador id=”text-10″.

Y ya desde la clase "textwidget" queda claro que el código que necesitamos se encuentra en Widgets. Y si es así, entonces de nada sirve buscar todos estos elementos a los que prestamos atención. Dado que en la mayoría de los temas widgets de WordPress en la barra del sitio se forman dinámicamente. Esto significa que en el código del archivo responsable de la barra del sitio ( barra lateral.php) será predominantemente codigo php. Lo cual no apuntará a un widget específico de ninguna manera.

Por tanto, acudimos a la vía administrativa. Panel de WordPress« Apariencia» "Aparatos" y busque el widget deseado.

Y aquí agregamos el atributo alt a los parámetros de la imagen.

Antes Después alt="Infomarketing 20/80" !}/>

Eso es todo. Todo está listo.

Pero con el widget todo está claro, cualquiera puede manejarlo. Qué pasa elementos específicos¿diseño?

Como ejemplo, mostraré la plantilla que estoy usando ahora, solo en su Versión original. Es decir, en la etapa de instalación ya hubo 21 errores (falta el atributo alt).

Abre la pestaña "Código de página" y analizar el código. Buscamos elementos a los que podamos aferrarnos, mediante los cuales podamos encontrar archivo requerido y código.

En los parámetros de búsqueda, debes seleccionar buscar todos los archivos cuyo código contenga una mención del elemento que estás buscando. En nuestro caso, el nombre del archivo de imagen.

A continuación, es mejor hacer Copia de respaldo archivo (cópielo por separado a su computadora) y podrá comenzar a editar. EN Comandante total Simplemente seleccione el archivo y presione F4. O puede copiar el archivo a su computadora y abrirlo usando Notepad++. Bueno, o al menos, a través del Bloc de notas.

Entonces, abra el archivo y busque el código requerido. Puede utilizar CTRL+F para buscar.

Lo encontramos y lo pusimos atributo requerido alt. Así con todas las imágenes que no lo tienen.

Una vez realizados los cambios, guarde el archivo y compruébelo nuevamente con las herramientas de análisis.

Amigos, así es como se agregan los atributos alt a las imágenes. Como ejemplo claro mira el videotutorial. Y recuerda que es mejor hacer todas estas modificaciones de plantilla en

Y por supuesto, lee el artículo al respecto en general. Descubrirás que muchas imágenes de plantilla no sólo no tienen etiquetas alt, sino que no están optimizadas en absoluto.

Y eso es todo para mí hoy. Espero tus comentarios. todo éxito y Que tengas buen humor! Nos vemos en nuevos vídeos y artículos.

Atributos título Y alternativo debe usarse para todos Imágenes o Enlaces en la página para que los robots de los motores de búsqueda comprendan el contenido de cada una Enlaces o Imágenes. Recuerde siempre que los robots de los motores de búsqueda no ven los sitios como usted y yo.

A continuación puedes ver ejemplos de uso. atributos título Y alternativo Para Imágenes Y Enlaces.

<A HREF= "http://www.tusitio.com" título= "título de tu página" alternativo= "título de tu página" > título de tu página

Usando un ejemplo ficticio, veamos cómo se usan realmente los atributos. título Y alternativo para un enlace a, por ejemplo, un libro electrónico que se ofrece para descargar desde una página web "Fundamentos hipotecarios":

="/descargas/skachat-besplatno.html" target="_blank" título= "Cualquier lector experto encontrará aquí información sobre cómo se forma la tasa de interés de un préstamo, aprenderá la diferencia entre interés flotante y fijo, tendrá una idea de cómo calcular el monto del préstamo que él, como prestatario, puede permitirse el lujo de pedir prestado, y mucho más otro." alternativo= "Cómo elegir un préstamo hipotecario que mejor se adapte a TUS objetivos y capacidades">Cómo elegir un préstamo hipotecario que mejor se adapte a TUS objetivos y capacidades

Código HTML para la imagen.:

<IMG SCR="/images/seo/alt-and-title-attributes.gif" título="Atributos ALT y etiqueta TÍTULO IMG" alternativo="Atributos ALT y TITLE de la etiqueta IMG" />

Atributos de etiquetas ALT y TITLE IMG

A pesar de que el uso en optimización imágenes atributo V título Y alternativo- esta es una forma sencilla de aumentar la posición de un sitio en los motores de búsqueda; muchos webmasters no las aplican por completo o incluso las ignoran por completo. Algunas personas los confunden y no entienden cuál es la diferencia entre título Y alternativo. Cabe señalar que a menudo título Y alternativo se llaman erróneamente etiquetas, aunque son atributos de etiqueta imagen(de la palabra "imagen"), y no etiquetas individuales.

HTML etiqueta imagen utilizado para mostrar en páginas del sitio web imágenes (fotos) V formato gráfico GIF, JPEG o PNG. Si es necesario, la imagen se puede convertir en un hipervínculo adjuntando la etiqueta imagen en un contenedor . Atributo alternativo transmite una descripción Imágenes para navegadores con gráficos deshabilitados. Si este atributo no se registrará, los usuarios verán un icono vacío en lugar de una imagen, y si alternativo está registrado, se mostrará su contenido de texto. Atributo alternativo tiene el mayor impacto en la clasificación de imágenes por parte de los motores de búsqueda.

Atributo título proporciona información adicional sobre la imagen y no es obligatorio, aunque SEO - expertos recomienda su uso para mejor promoción Por imágenes. Texto incluido en atributo título, se muestra al pasar el mouse sobre la imagen y, según el concepto general de los motores de búsqueda, todo lo que ve el usuario se tiene en cuenta al clasificar. Puedes comprobar esta afirmación en la imagen situada al principio de esta página.

Los robots de los motores de búsqueda no pueden reconocer el texto impreso en imágenes gráficas, Es por eso Frase clave escrito en la imagen en letras mayúsculas, no afectará de ninguna manera su promoción en los motores de búsqueda. Agregar el nombre de dominio de su sitio tendrá un mayor efecto; esto no solo ayudará a popularizarlo, sino que también protegerá la imagen contra copia.

Los motores de búsqueda no tienen en cuenta todo el texto contenido en atributo alternativo: Google, por ejemplo, muestra solo las primeras 15 a 17 palabras, y Yandex muestra un poco más, hasta 28 palabras. En cualquier caso, esta cantidad de palabras es suficiente para crear un contexto claro.

Los motores de búsqueda se centran en texto relacionado con imagen. Especialmente a lo que está escrito directamente debajo, percibiendo este texto como el nombre de la imagen. Por lo tanto, el título debe copiar íntegramente el contenido del título correspondiente. atributo alternativo y debería colocarse en el mismo párrafo < p>, celda de tabla < td> o etiquetar

, como imagen.

Como con todas las demás preguntas. optimización de motores de búsqueda , tu atención debe centrarse en crear contenido único que proporciona valor a los usuarios de su sitio. Tener una descripción precisa de las imágenes en tu página será de gran ayuda no sólo para los usuarios con una conexión muy lenta o que tienen las imágenes deshabilitadas por completo, sino que también será útil para la mayoría de tus usuarios que apreciarán el hecho de que simplemente pueden pasar el mouse sobre imagen obtener un poco más de información.

OPTIMIZACIÓN DE IMAGEN

La información sobre las imágenes se transmite mediante el atributo "alt".

Las imágenes a menudo parecen ser una de las más elementos simples sitio, pero su uso también se puede optimizar. Cada imagen tiene un nombre de archivo y un atributo "alt". Ambos elementos son útiles. El atributo "alt" le permite ingresar texto que se mostrará si la imagen no se puede mostrar por algún motivo (1).

¿Por qué se utiliza este atributo? Si un usuario está viendo su sitio a través de un navegador con imágenes deshabilitadas o usando un lector de pantalla, El texto alternativo servirá como descripción de la imagen.

El texto alternativo también se utiliza en enlaces de imágenes. En este caso, los motores de búsqueda lo procesan como texto ancla para el enlace. A pesar de esto, no recomendamos usar un gran número de enlaces gráficos para navegar por su sitio, como enlaces de texto hacer frente a este papel no es peor.

Y finalmente, una descripción competente de la imagen en la etiqueta alt junto con un nombre de archivo informativo ayuda a los sistemas de búsqueda de imágenes como Search Imágenes de Google, indexe imágenes de su sitio.

Los archivos deben almacenarse en directorios separados y guardarse en formatos disponibles públicamente

En lugar de almacenar archivos de imágenes en diferentes directorios y subdirectorios de un dominio, deberías reunirlos todos en una carpeta(Por ejemplo, moyastranaotkrytok.ru/images/). Esto simplifica la ruta a los archivos gráficos.

Utilice tipos de archivos ampliamente compatibles. La mayoría de los navegadores admiten gráficos en formato JPEG, GIF, PNG y BMP. También es una buena idea si la extensión del archivo coincide con su tipo.

CONSEJOS PRÁCTICOS

Escribe anclas informativas. El texto ancla debe contener al menos Breve información sobre la página de enlace. No recomendamos:

  • utilizar como texto ancla Palabras comunes como "página", "artículo" o "haga clic aquí";
  • utilizar texto ancla que no tenga nada que ver con el material vinculado;
  • usar URL de la página como texto ancla (aunque son posibles excepciones, por ejemplo, si necesita anunciar nueva direccion sitio).

Esfuércese por ser breve. Su objetivo es un texto breve e informativo, normalmente uno frase exacta. No recomendamos:

  • Escriba un texto ancla largo, como una oración o un párrafo completo.

Resaltar enlaces. Hacer que el texto del anclaje del enlace sea visualmente distinto del Texto sin formato Tú sitio. El usuario es engañado por enlaces sutiles o enlaces en los que puede hacer clic accidentalmente. No recomendamos:

  • utilizar para referencias estilo css, visualmente indistinguible del texto de una página normal.

No te olvides del texto ancla para los enlaces internos. Es posible que se centre principalmente en enlaces que apuntan a otros sitios web, pero los enlaces internos son igualmente importantes porque ayudan google es mejor rastrear su sitio. No recomendamos:

  • completar el texto de anclaje gran cantidad palabras clave;
  • poner enlaces innecesarios que no tengan valor de navegación para los usuarios.

Cada página web se crea utilizando marcado: código escrito en un lenguaje especialmente diseñado (la mayoría de las veces es HTML). El navegador del usuario, a su vez, puede leer este código para mostrar correctamente toda la información que los creadores del recurso querían transmitirnos. Resulta que todos los elementos que vemos en una página web los proporciona el código fuente del sitio que estamos visitando.

Optimización de código

Como puedes adivinar, cada letra de este código, cada símbolo tiene un significado. Otra cosa interesante es que sucede que visualmente el sitio puede no contener aquellos elementos que son extremadamente importantes para su optimización (es decir ajuste correcto recurso bajo los motores de búsqueda). Estos sutiles incluyen, por ejemplo, el atributo ALT. Está en las páginas de muchos recursos y muy a menudo simplemente no nos damos cuenta.

En este artículo nos gustaría prestar atención sólo a este elemento del diseño web. Aquí te contamos por qué es tan importante para clasificación correcta sitio, el crecimiento de su tráfico y la comodidad del usuario al trabajar con él.

ALTA?

Empecemos desde el principio: describiremos de qué trata este artículo. estamos hablando acerca de y ¿por qué necesitamos este atributo?

Entonces, para entender de este texto Primero que nada, necesitas entender el idioma. marcado HTML. Este es el código en el que escriben. paginas web basicas, que, como ya se señaló, tiende a mostrarse en el navegador. Todo lenguaje se compone de atributos especiales(por ejemplo, IMG, ALT, FONT, etc.). Cada uno de ellos es responsable de trabajar con uno u otro elemento de diseño. En la práctica, el atributo ALT mencionado anteriormente se utiliza para imágenes que se pueden encontrar en las páginas de un sitio web. Más concretamente, con su ayuda se crea una descripción de las imágenes, a partir de la cual el usuario (visitante del sitio) puede comprender de forma fácil y sencilla lo que se muestra en ellas. Seguramente usted mismo se ha encontrado con este tipo de descripciones: aparecen cuando pasa el mouse sobre la imagen.

Significado práctico

Por supuesto, estos atributos se utilizan en la práctica por una razón. Los webmasters necesitan descripciones de sus imágenes tanto como los propios visitantes del sitio (y probablemente incluso más). Después de todo, si todas las imágenes no tienen el atributo ALT, una persona puede hacerlo incluso si agrega textos explicativos. Por otro lado, los robots de búsqueda (con ALT vacío) puede no clasificar el sitio lo suficientemente alto, reducir su posición en los resultados de búsqueda y, por lo tanto, no atraerá un número suficiente de visitantes. Por lo tanto, podemos decir con seguridad que las descripciones de las imágenes en el sitio también influyen. papel importante y para los propios webmasters, por lo que no pueden ser descuidados.

Bonificaciones de los motores de búsqueda

Para comprender mejor los beneficios de las etiquetas de descripción de las imágenes completadas correctamente, aquí está pequeño ejemplo. Digamos que hay un sitio web con imágenes publicadas en él. Si no especifica el atributo ALT, el usuario no sufrirá, ya que en cualquier caso verá lo que se muestra en tal o cual foto. Un resultado completamente diferente le espera al propietario del recurso, que descuidará la etiqueta anterior, lo que le hará perder parte del tráfico de los catálogos de imágenes, por ejemplo.

¿Cómo configurar el atributo ALT?

Técnicamente, no hay nada difícil en completar lo obvio debajo de tal o cual imagen: debe ir al editor HTML de su sitio y encontrar el código de la imagen (comienza con IMG y termina con el mismo). Hay código dentro de este bloque de código. Esto es lo que quieren decir cuando dicen que es necesario agregar el atributo ALT. Esto se hace así: “alt = “descripción”.

Si no estás trabajando con código limpio, pero utiliza algún tipo de "motor" separado para el sitio (por ejemplo, Wordpress o Joomla), integra un mecanismo especial para agregar "alts", a través del cual los motores de búsqueda recordarán nuestro sitio. Si completa un nuevo ALT, la actualización aparece en su página.

¿Qué está escrito en el atributo?

Por supuesto, cuando tienes la tarea de registrar el atributo ALT, no estás pensando en lado técnico. La mayoría de las veces, esta pregunta se hace si el webmaster no sabe qué información necesita indicar sobre una imagen en particular. Debido a esto, es difícil decir qué información beneficiará al sitio desde el punto de vista de los motores de búsqueda.

En la práctica, existen muchos enfoques para resolver el problema de descripción. Alguien trabaja con plantillas típicas, según las cuales la etiqueta simplemente se completa con las palabras clave para las que se creó la página. Esta es quizás la práctica más común que se puede ver con frecuencia. A veces, en lugar de buscar cómo escribir el atributo ALT, el usuario simplemente deja este espacio vacío. Aquí cabe aclarar que cada uno toma sus propias decisiones respecto a qué descripción indicar.

Requisitos

Al mismo tiempo, podemos identificar varias reglas básicas (o, si se prefiere, requisitos) mediante las cuales cada uno puede reunir el atributo ideal para sus fotografías. Consisten en una pequeña cantidad de puntos, cada uno de los cuales se relaciona con descripciones de fotografías e imágenes del sitio.

Por ejemplo, el primer requisito es la longitud de todo el texto. Si buscas cómo escribir correctamente el atributo ALT, la solución es sencilla: no utilices más de 2-3 palabras. Un texto de este tamaño será, en primer lugar, perfectamente legible robot de búsqueda(y hacer que su sitio sea más relevante); en segundo lugar, dicha descripción es más comprensible para los propios usuarios. De acuerdo, nadie leerá la oración completa si solo quiere saber lo que se muestra en la imagen. Basta con indicar de forma breve y precisa la descripción, que será útil tanto para usted como para sus clientes.

No te olvides de la carga semántica. Si publicas una foto de un elefante, asegúrate de describir su raza o historia; especifique por qué se representa específicamente en esta foto¿qué te gustaría decir? Será útil para el visitante conocer su opinión sobre este elefante.

Otro punto importante(que se estableció a través de numerosas pruebas prácticas) - Si está buscando cómo agregar un atributo ALT a una imagen, recuerde: debe seleccionarse de forma única para cada una de las fotos enumeradas en el sitio. Por ejemplo, publicar tres imágenes seguidas con la leyenda "mi elefante" será un error: solo dañará su recurso en Resultados de la búsqueda. Es mejor nombrar las imágenes “elefante 1” y “elefante 2”, lo que las hará más únicas.

Finalmente, tenga en cuenta los parámetros de las imágenes a las que desea agregar un atributo ALT. Para las imágenes es importante cumplir una serie de criterios: no ser demasiado pequeñas y parecer realistas. Es decir, si proporcionas una descripción, hazlo para imágenes más serias que cuentan más. No especifiques el atributo ALT para algunos pequeños emoticones ni nada por el estilo.

Buscar en Alt

Finalmente, hablamos de los conceptos básicos del atributo, algunas reglas para su composición y los requisitos de ambas partes (tanto de los usuarios como de ellos). Ahora pensemos: ¿cómo buscar las palabras clave y frases que escribiremos en nuestra web? Como se indicó anteriormente, la búsqueda debe dirigirse al lado bases de datos listas para usar palabras clave que realmente pueden comenzar a atraer clientes a su sitio web. Por supuesto, esto no se puede lograr si aún falta el atributo ALT. Tome las palabras clave y frases ya preparadas que utilice en el contenido e insértelas en las imágenes.

Si no dispone de dicha información y no ha pensado en absoluto en empezar a promocionar gradualmente su recurso, le sugerimos que empiece a buscar bases de datos de este tipo de "palabras clave" con las que podrá crear fácilmente nuevos sitios. Servicios como Google Keyword Extract Tool o Yandex.Wordstat, que muestran estadísticas de búsqueda para determinadas frases, son perfectos para esto. "Jugando" con estas configuraciones, puedes ampliar significativamente la participación tráfico de búsqueda en sus sitios y así comenzar a obtener nuevos beneficios. Lo principal es que no surge una situación en la que todos imágenes visibles Falta el atributo ALT.

conclusiones

Entonces, ¿qué podemos decir sobre el atributo descrito en este artículo? Es parte del lenguaje en el que se crean los sitios web más simples: HTML. Esto es muy sencillo de hacer, ya que describe lo elemental, lenguaje básico. Para seguir agregando una etiqueta a las imágenes, debe crearla usted mismo utilizando el código fuente. O, usando nuevas instrucciones, comience a procesar nuevamente. Sea como fuere, especificar etiquetas ALT es ese caso ideal de beneficio mutuo cuando tanto el visitante como el propietario del recurso están satisfechos.

La especificación de una etiqueta también puede atraer nuevos visitantes; este fenómeno se observa especialmente en servicios como Google y Yandex Images. Cuando hace clic en una imagen, el sitio determina de forma independiente la fuente de donde se tomó la imagen y redirige al visitante. Y esto, como comprenderéis, es muy importante poder hacerlo en el futuro.




Arriba