Cómo automatizar el atributo ALT de las imágenes de producto de un WooCommerce

Optimizar correctamente los atributos de todas las imágenes de una web resulta una tarea bastante tediosa y lenta. Pero podemos buscar métodos mucho más rápidos sin tener que reducir la calidad del resultado final.

Hoy en día hay plugins que generan ALTs de forma automática gracias a la inteligencia artificial pero son de pago y no son tan personalizables como puede ser un código propio.

Por eso, decidí crear un código que se adaptara a unas necesidades determinadas, que comentaré más adelante, y que gracias a la inteligencia artificial, en este caso a OpenAI, me proporcionara unos ALTs bien optimizados a partir de unas instrucciones propias (prompt).

La lógica y necesidades detrás de esta idea

Antes de nada te tengo que poner en situación y explicar para qué tipo de proyecto ideé este código y sus características principales. Pues bien, vamos a ello:

• El proyecto a trabajar es un WordPress con WooCommerce que vende motos, un concesionario oficial de una marca concreta. Sus fotos son más complejas y artísticas, no es por ejemplo una farmacia online que usa fotos de producto sencillas, por lo que necesitaba un ALT más descriptivo.
• WordPress usa PHP por lo que el código a crear tenía que ser también en PHP.
• Como quería un ALT bien optimizado, respetando las directrices de Google y sobre todo que fuera útil para el usuario, decidí utilizar OpenAI con un prompt personalizado. Como he comentado antes, para este tipo de fotos era lo mejor. En el caso de una farmacia online, lo ideal sería usar variables tipo [Nombre del producto] + [Marca] en lugar de OpenAI.

Y ahora seguro que te preguntarás, ¿si yo tengo un WooCommerce también podré utilizar este código? Sí y no, pues deberás ajustarlo a tus preferencias y hacer pruebas antes si no quieres sustos.

Por otro lado, Prestashop también utiliza PHP pero ten en cuenta que tendrás que adaptar este código bastante más ya que el nombre de las variables, funciones y meta keys cambian de un CMS a otro.

Objetivo del código

¿Qué quiero que haga este código personalizado?

• Quiero que actualice los atributos ALT de todas las imágenes asociadas a un producto en una web de WooCommerce.
• Además, necesito que partir de una fecha de referencia (fecha de publicación del producto y otra que indique yo) determine si debe generar nuevos textos ALT (y no machacar los ya optimizados) y realice la actualización mediante una llamada a la API de OpenAI para generar descripciones mediante el prompt que explico abajo.

Prompt para conseguir un ALT optimizado y útil

Una vez que tengamos claro la lógica que debe seguir el código toca construir un prompt específico para conseguir unos buenos textos alternativos para las imágenes de nuestro catálogo de productos.

«Necesito que generes un atributo ALT seo-friendly utilizando como keyword el H1 de la página de la foto indicada. Céntrate en redactar un ALT útil que contenga información sobre los elementos visuales de la foto, siendo conciso y sin superar los 140 caracteres».

De esta forma conseguiremos un ALT optimizado, con el nombre del producto, ya que queremos que indique qué modelo de moto aparece en la foto y que además sea conciso.

Código para automatizar la redacción e implementación de ALTs en todas las imágenes de producto de un WooCommerce

Justo debajo te explico las partes más importantes de este código 🙂

<?php
// Función para comprobar la fecha de publicación
function is_published_before($date, $referenceDate) {
return strtotime($date) &amp;lt; strtotime($referenceDate);
}

// Función para actualizar el atributo ALT de una imagen
function update_image_alt($attachment_id, $new_alt) {
update_post_meta($attachment_id, '_wp_attachment_image_alt', $new_alt);
}

// Función para obtener el título H1 de la página del producto
function get_product_h1($product) {
return $product-&amp;gt;get_name(); // Asumiendo que el H1 es el nombre del producto
}

// Función para llamar a la API de OpenAI y generar el texto ALT
function generate_alt_text($image_url, $h1_keyword) {
$api_key = 'TU_API_KEY_DE_OPENAI';
$prompt = "En base a la URL de la imagen $image_url, necesito que me generes un atributo ALT SEO-friendly utilizando como keyword el H1 '$h1_keyword'. Céntrate en redactar un ALT útil que contenga información sobre los elementos visuales de la foto, siendo conciso y sin superar los 140 caracteres.";

$data = [
'model' =&amp;gt; 'text-davinci-002',
'prompt' =&amp;gt; $prompt,
'max_tokens' =&amp;gt; 150,
];

$options = [
'http' =&amp;gt; [
'header' =&amp;gt; "Content-type: application/json\r\nAuthorization: Bearer $api_key\r\n",
'method' =&amp;gt; 'POST',
'content' =&amp;gt; json_encode($data),
],
];

$context = stream_context_create($options);
$result = file_get_contents('https://api.openai.com/v1/completions', false, $context);
$response = json_decode($result, true);

return trim($response['choices'][0]['text']);
}

// Fecha de referencia
$referenceDate = '2023-06-15';

// Comprueba si el contenido es un producto
if (isset($product) &amp;amp;&amp;amp; $product instanceof WC_Product) {
// Obtener la fecha de publicación (asumido que se almacena en el producto)
$publicationDate = $product-&amp;gt;get_date_created()-&amp;gt;date('Y-m-d'); // Fecha de creación del producto

// Obtener IDs de las imágenes del producto
$attachment_ids = $product-&amp;gt;get_gallery_image_ids();

// Añadir la imagen destacada
if ($product-&amp;gt;get_image_id()) {
array_unshift($attachment_ids, $product-&amp;gt;get_image_id());
}

// Obtener el H1 del producto
$h1_keyword = get_product_h1($product);

// Si la fecha de publicación es anterior al 15 de junio
if (is_published_before($publicationDate, $referenceDate)) {
foreach ($attachment_ids as $attachment_id) {
$image_url = wp_get_attachment_url($attachment_id);
$newAlt = generate_alt_text($image_url, $h1_keyword);
update_image_alt($attachment_id, $newAlt);
}
} else {
// Si la fecha de publicación es posterior al 15 de junio
foreach ($attachment_ids as $attachment_id) {
$currentAlt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);

// Verificar si el campo ALT está vacío
if (empty($currentAlt)) {
$image_url = wp_get_attachment_url($attachment_id);
$newAlt = generate_alt_text($image_url, $h1_keyword);
update_image_alt($attachment_id, $newAlt);
}
}
}
}
?>

• La primera función la necesitamos para comprobar la fecha de publicación del producto, la cual la tomamos como referencia para actualizar o no el ALT.
• La segunda función actualiza el campo de metadatos _wp_attachment_image_alt de una imagen en WordPress, utilizando el ID de la imagen y el nuevo texto ALT.
• La tercera función obtiene el título H1 de la página del producto que se usará dentro del prompt como nombre del producto (marca y modelo de moto)
• La cuarta función se indica para llamar a la API de OpenAI y generar el texto ALT en base al prompt indicado anteriormente. Recuerda indicar aquí tu key de OpenAI.
• La función Fecha de referencia es necesaria para definir una fecha de referencia para comparar con la fecha de publicación de los productos.
• La siguiente función comprueba si el contenido es un producto y obtiene la fecha de creación del producto.
• Continuamos con la 7º función que obtiene los IDs de las imágenes de la galería del producto.
• La 8º función la indico para que tenga en cuenta también la imagen destacada de cada producto.
• Terminando el código, se vuelve a llamar a la función para obtener el H1.
• Por último, se indica una función para poner fechas de referencia con el fin de no «machacar» los ALTs ya optimizados:
  • Si la fecha de publicación es anterior al 15 de junio del 2023: Para cada ID de imagen, obtiene la URL de la imagen, genera un nuevo texto ALT y lo actualiza.
  • Si la fecha de publicación es posterior al 15 de junio del 2023: Para cada ID de imagen, obtiene el valor actual del atributo ALT. Si el atributo ALT está vacío, genera un nuevo texto ALT y lo actualiza.

Por último, ¿dónde hay que colocar este código?

Para que este código funcione correctamente en tu WooCommerce tienes varias opciones para colocarlo:

1. Colocarlo en el archivo funtions.php de tu tema hijo.
2. Colocarlo en un snippet usando un plugin como Code Snippets.
3. Crear un plugin personalizado para mantener este código separado de tu tema, lo cual es más flexible y seguro.

Espero que te haya ayudado y recuerda: ¡Testea el código antes en un entorno de prueba!