De Lightroom a WordPress cómo crear imágenes optimizadas para SEO

WordPress es una pieza de software que alimenta hasta el 25% de los sitios web de la web. Los principales sitios web como The New York Times, CNN y Forbes usan WordPress para potenciar sus sitios web..

Lo que WordPress es para los desarrolladores web, Adobe Lightroom es para los fotógrafos. En este tutorial, aprenderás a usar estas dos herramientas poderosas juntas. Aprenderá cómo tomar sus imágenes de Lightroom y en un sitio impulsado por WordPress de forma rápida y sencilla. Lo más importante es que lo haremos de una manera que sea amigable con el SEO para que sus imágenes sean descubiertas..

Imagen SEO para principiantes

La optimización de motores de búsqueda (también conocida como SEO) es un conjunto de prácticas de diseño de datos, publicaciones y administración de datos interrelacionadas que ayudan a encontrar páginas web. La verdad es que no hay realmente ninguna magia para SEO cuando se trata de imágenes. Todo se reduce a agregar contexto a sus imágenes de una manera que tenga sentido para las computadoras.

Informacion semantica

Piénselo de esta manera: ingresa una consulta de búsqueda en el motor de búsqueda que elija. El motor de búsqueda le muestra una lista de páginas que coinciden con lo que piensa estas buscando. Los motores de búsqueda utilizan rastreadores (programas informáticos y algoritmos de programación) que exploran la web automáticamente y crean listas de sitios que coinciden con palabras clave. 

Un motor de búsqueda puede decir que las imágenes están en una página web, pero no puede determinar fácilmente lo que representa una imagen, por lo que necesitamos complementarla con datos adicionales, un tipo que puede entender. Este tipo de datos se denomina información semántica: es información que ayuda a crear significado para fotografías individuales en contexto entre sí y con el resto de la página web. Utilizamos campos de metadatos para transmitir estos datos semáticos..

Google mira a algunos de los etiquetas Oculto en nuestro HTML para ayudar a encontrar imágenes. Podemos añadir cosas como títulos, etiquetas, y alt Texto en el código de nuestro sitio web para ayudar a que un motor de búsqueda indexe nuestro sitio de la forma más fácil posible. No hay garantía de que al agregar información semática podrá mover su sitio a la primera página de los resultados de Google, pero tomar algunos pasos básicos de SEO definitivamente puede ayudarlo a mejorar sus posibilidades. También es solo una buena higiene de datos.!

Aquí hay cuatro piezas clave de información de optimización SEO para agregar a sus imágenes:

Nombres de archivos

Si no hace nada más, asegúrese de cambiar el nombre de sus imágenes de una manera que las describa. Un nombre de archivo simple como "resizing-images-tutorial.jpg" es una mejora masiva sobre "IMG_9052.cr2". Usar un nombre de archivo con algunas palabras que lo describan mejorará sus posibilidades de ser encontrado.

Al exportar desde Lightroom, mi forma favorita de hacerlo es utilizar el "Nombre de archivo" Sección de la ventana de exportación. Tenga en cuenta que queremos cambiar el nombre de la imagen exportada, no el archivo original. Encuentra el Nombre de archivo sección y comprobar la Renombrar a caja. Luego elige una opción desplegable que incluya "nombre personalizado" Para que podamos añadir nuestro propio texto personalizado..

El último paso es agregar el texto personalizado. Para la web, es mejor separar las palabras en un nombre de archivo usando guiones en lugar de espacios. Personaliza el nombre de archivo de cada imagen para obtener los mejores resultados. 

Use una opción de nombre personalizado para darle a sus nombres de archivo una mejor oportunidad de ser encontrado. Unas pocas palabras que describen el contenido de una imagen van de lejos.!

Texto alternativo

El texto alternativo, o "texto alternativo", se utiliza para proporcionar una descripción de texto del contenido de una imagen. Recuerde que un motor de búsqueda no puede determinar qué hay en una imagen (aún), por lo que necesitamos ayudarlo usando el texto alternativo..

Probablemente nunca verás el texto alternativo; la parte importante es que un motor de búsqueda.
El texto alternativo de una imagen también se debe establecer en HTML. El texto alternativo debe describir brevemente la imagen. Podemos establecer este texto alternativo en la Biblioteca de medios de WordPress, y WordPress lo agregará automáticamente.

El texto alternativo se coloca en el mismo fragmento de HTML que contiene sus imágenes. Úsalo para añadir una descripción de la imagen. Una breve descripción de los contenidos de una imagen es crítica para la facilidad de SEO. Si escribir código no es lo tuyo, no te preocupes; veremos cómo agregar este texto alternativo con WordPress en la siguiente sección de esta guía.

Tener texto alternativo para sus imágenes también es crucial para los discapacitados visuales. El software de lectura de pantalla diseñado para ayudar a aquellos que tienen una pérdida total o parcial de la vista leerá el texto alternativo en lugar de una imagen. Amherst College tiene una gran guía para optimizar sus páginas web para accesibilidad.

Títulos

El título de una imagen también debe estar contenido en la etiqueta HTML. El título debe ser una versión aún más corta de la descripción, con solo unas pocas palabras que señalan el contenido de una imagen.

También debe establecer un título de imagen en HTML con la etiqueta "title =" en el mismo bloque de imagen. Una vez más, WordPress hace que esto sea fácil de agregar.

Los títulos son otra pieza del rompecabezas para ayudar a los motores de búsqueda a indexar nuestro sitio. WordPress contiene un campo de título que ayudará a nuestros esfuerzos de SEO.

Subtítulos

Piense en un título como el texto que se muestra inmediatamente después de una imagen que proporciona comentarios adicionales. Los subtítulos no se agregan directamente a una etiqueta de imagen, pero sí lo complementan. En HTML5, el

la etiqueta es parte de la
Grupo, que es aún mejor. Puedes aprender más sobre cómo escribir subtítulos efectivos en Dawn Oosterhoff's Título, Descripción, Título, ALT: Cómo agregar información semántica a las imágenes. Escriturauna leyenda fuerte es una de las habilidades más infravaloradas, una que es útil para todos los fotógrafos!

Mapeo de metadatos de Lightroom a WordPress

Ahora que entendemos los pilares de la imagen SEO, veamos cómo agregarlos fácil y rápidamente a nuestro sitio impulsado por WordPress. Podemos llevar adelante una imagen de título subtítulo De nuestro catálogo Lightroom a WordPress..

En el lightroom Biblioteca módulo, encontrar el metadatos Panel en el lado derecho. Puedes ver el título de la imagen y el título.. 

Cuando exporta una imagen de Lightroom, asegúrese de incluirla "todos los metadatos."Esto asegurará que el título y el título se guarden en la imagen JPEG y que WordPress los lea y los incluya..

Asegúrese de que al exportar una imagen, incluya metadatos en el archivo. Esto hará que esos metadatos estén disponibles en WordPress..

Subir a WordPress

Una vez que haya exportado un archivo de imagen con un nombre ordenado con un título y un conjunto de títulos, estará listo para cargarlo en WordPress. Ir a la wordpress Mediateca y sube esta imagen como lo harías normalmente. La imagen cargada se transmitirá a través del mismo título y título que establecimos en el panel de metadatos de Lightroom.!

Finalmente, los frutos de nuestro trabajo! El título y el título que nos

Tendrá que agregar manualmente el texto alternativo a las imágenes una vez que alcancen WordPress. Desafortunadamente, no hay un campo en Lightroom que se asigne a "texto alternativo" en WordPress. Recuerde que este es el texto oculto en el código HTML que ayudará a los motores de búsqueda a encontrar e indexar nuestras imágenes..

El texto alternativo deberá agregarse a las imágenes dentro de la biblioteca multimedia de WordPress.

Después de configurar el texto alternativo, presione Actualizar para guardar la imagen. Cuando lo inserte en una publicación o página, WordPress llevará a través de los metadatos e incluirá los metadatos que hemos agregado en el código HTML..

Estos pasos son una ayuda importante para optimizar una imagen para la web. También podemos ir un paso más allá al redimensionar y comprimir imágenes para la web..

Redimensionamiento para la web

Preparar las imágenes para la web es mucho más que simplemente cargarlas con palabras clave y colocarlas en WordPress. También debemos pensar en el tamaño y las dimensiones del archivo. Recuerde que una gran parte de la población conectada a Internet no tiene la suerte de estar en una gran conexión de banda ancha, y debemos considerar su experiencia también..

MobiForge escribió recientemente que el tamaño promedio de los archivos de una página web es mayor que el del videojuego clásico de 1993, Doom. Esto no es algo intrínsecamente malo, pero es un gran recordatorio de que las páginas web están más llenas de imágenes multimedia y grandes que nunca. Sirve como un gran recordatorio de que siempre debemos optimizar el tamaño de los archivos de imagen.. 

Cuando estamos listos para enviar imágenes a la web, hay dos factores clave para optimizar: dimensiones y calidad. Veamos cómo perfeccionar ambos..

Dimensiones

Las dimensiones de una imagen digital son la longitud y el ancho de la imagen, medidos en píxeles. Una imagen que se dice que es "600 por 400 píxeles" se infiere que tiene 600 píxeles de ancho y 400 píxeles de altura.. 

Las imágenes capturadas con mi Canon 6D son 5472 x 3648 píxeles. En el momento en que los ve en Tuts +, están limitados en el diseño a 850 píxeles en el lado largo. Teóricamente, podría cargar la imagen completa, pero no importa lo que aparezca en un máximo de 850 píxeles. 

Este efecto es exactamente el motivo por el que siempre redimensiono mis imágenes a un formato compatible con la web. Mis espectadores no tienen monitores que muestren cada píxel, por lo que solo tiene sentido cambiar el tamaño de la imagen y guardar el tiempo de carga.

Esta simulación ilustra cuán grande es una imagen original de 10 megapíxeles frente a cómo aparecerá en la web. La vista previa de la imagen grande que se ve es la versión a escala de la imagen completa de 10 megapíxeles que capturé. En el recuadro, el tamaño se ha comparado con la forma en que aparece en Tuts +. Una imagen de 10 megapíxeles de ancho completo tiene más de 4000 píxeles de ancho, mientras que aparece en los artículos de Tuts + a solo 850 píxeles en el lado largo. Este es un gran ejemplo de por qué el cambio de tamaño es tan importante..

¿Cuáles son las dimensiones correctas para una imagen en la web? La respuesta es: "depende de a dónde va". Si está utilizando WordPress, consulte la documentación de su tema para los anchos de imagen compatibles. El desarrollador determina cómo aparecerán las imágenes en un tema de WordPress. Si la documentación no está disponible, pruebe un sitio como PiliApp para realizar sus propias mediciones en una imagen del sitio en el que publicará.

Calidad

Las imágenes de alta calidad utilizan más espacio en disco. Cuanto más detallada y colorida sea una imagen, más grande será el archivo. Aunque nuestro archivo de imágenes debe incluir estas imágenes de calidad total, preparar una imagen para la web significa hacer concesiones entre la calidad y el tamaño del archivo. Renunciar a un poco de calidad conduce a un tiempo de carga mucho más rápido para el espectador.

Al exportar en Lightroom, puede utilizar el Calidad Control deslizante para ajustar la calidad de salida de una imagen. Es una escala de 0 a 100, con una imagen de calidad 0 que representa el tamaño de archivo más pequeño. Una imagen de calidad 100 maximiza la calidad y el tamaño del archivo.

Esta comparación de calidad de imagen muestra una sutil diferencia entre las distintas configuraciones de calidad. Se pueden observar algunas diferencias en los detalles más finos, así como los colores en el cielo. Tenga en cuenta que en la imagen de menor calidad, hay algunas "bandas" en el cielo (líneas sutiles) mientras que las imágenes de mayor calidad. La imagen de calidad 25 me dio una imagen de 91kb, mientras que la imagen de calidad 100 fue una imagen de 366kb. Se trata de encontrar el equilibrio entre calidad y tamaño de archivo..

Una de mis formas favoritas de controlar el tamaño del archivo es usar el "Limitar tamaño de archivo a" opciónCon frecuencia utilizo esta opción cuando estoy exportando imágenes para publicar en Tuts +, dado que Tuts + tiene un límite de 150 kilobytes para imágenes en artículos.

El uso de la opción "Limitar tamaño de archivo a" omite el control deslizante de calidad por completo. En lugar de elegir una calidad entre 0 y 100, simplemente puede establecer un tamaño máximo de archivo (en kilobytes) y Lightroom elegirá una configuración de calidad para usted.

El cuadro "Limitar tamaño de archivo a" se puede usar en lugar del control deslizante de calidad. Cuando marque la casilla en la ventana de exportación, elija el tamaño máximo de archivo para su imagen y Lightroom lo hará funcionar.

Desde mi experiencia, cuando uso el control deslizante de calidad para imágenes web, normalmente dejaré la configuración de calidad en la 60-75 distancia. Este parece ser el punto ideal para el tamaño del archivo y la calidad de la imagen. El aumento del control deslizante más allá de eso produce un archivo mucho más grande sin mucha diferencia visual.

Si desea obtener más información acerca de las claves para cambiar el tamaño de las imágenes para la web, consulte mi informe del año pasado., Cómo exportar archivos JPG para la web desde Adobe Photoshop Lightroom. Si bien el enfoque de este tutorial son los metadatos para SEO, el tamaño de la imagen sigue siendo una parte esencial de la búsqueda. 

Recapitular y seguir aprendiendo

En este tutorial, hemos explicado cómo elegir los frutos de bajo rendimiento para exportar imágenes de Lightroom a un sitio web de WordPress. No cometer errores; esto no disparará instantáneamente su sitio a la parte superior de Google para términos comunes, pero será recorrer un largo camino para ayudar a alguien a encontrar sus imágenes.

Vale la pena señalar que hay varios complementos de WordPress, o complementos, que pueden automatizar este proceso. Sin embargo, los complementos que no se actualizan con frecuencia pueden abrir su sitio a vulnerabilidades de seguridad. También debe contar con un desarrollador que mantenga la compatibilidad del complemento con las nuevas versiones de WordPress. Dos complementos populares incluyen WP / LR Sync y LR / Blog.

Si desea obtener más información acerca de WordPress, la sección del código Tuts + tiene una gran cantidad de contenido para modificar y extender WordPress. La sección de fotos y videos también tiene una amplia cobertura de Adobe Lightroom si desea mejorar esas habilidades.

Finalmente, el SEO es un área de investigación en constante cambio. Google actualiza constantemente el algoritmo utilizado para encontrar las páginas que creen que coinciden con la consulta de búsqueda. Hay un montón de malos consejos y "consejos" para SEO por ahí. Mi fuente de acceso para SEO es el blog de Moz. Los genios de Smashing Magazine también tienen una gran reseña sobre cómo construir un sitio web optimizado para SEO.

¿Qué estás haciendo para preparar tus imágenes para la web? Házmelo saber en la sección de comentarios.