SEO – alt-tags automatisch erstellen

JUST YUM YUM media - Professionelle Online-Lösungen mit und rund um WordPress und WooCommerce: Dienstleistung SEO Audit
In diesem Artikel erfährst Du, wie Du in WordPress und WooCommerce mit ein paar Zeilen PHP-Code alt-tags automatisch erstellen kannst.

In Verbindung mit meinem Online-Marktplatz JUST YUM YUM Kitchen stand ich vor der Herausforderung, sämtliche Produktbilder mit alt-tags zu versehen.

Zwei Gründe machten schnell klar, warum der klassische Weg, die Bilder manuell mit alt-tags zu versehen, auf Dauer kein praktikabler Weg sein wird:

  • Ich lade meine Affilate-Produkte per CSV-Upload auf JUST YUM YUM Kitchen hoch. Leider ist hier kein Feld für die alt-tags der Produktbilder vorgesehen, so dass ich in jedem Produkt die alt-tags nachbearbeiten müsste. Aufgrund der Menge an Bildern, die ein Upload mit sich bringt, wenig effizient.
  • Als Verkäufer registrierte Nutzer können eigenständig ihre Produkte hochladen. Die Wahrscheinlichkeit, dass bei den Produktbildern die alt-tags regelmäßig vergessen werden, habe ich als sehr hoch eingeschätzt.

Um mir das Leben zu erleichtern und sicher zu stellen, dass sämtliche Produktbilder immer mit alt-tags versehen sind, musste also eine Lösung her, die alt-tags automatisch erstellen kann.

Da es mir herzlich egal ist, mit welchen alt-tags die Bilder in der Medienbibliothek von WordPress versehen sind, manipuliere ich bei meiner Lösung lediglich die Bildausgabe im Frontend von JUST YUM YUM Kitchen.

Die Umgebung

Damit Du die nachfolgenden Code Snippets besser einordnen kannst, nochmal kurz die Systemkomponenten, die hier relevant sind:

Die Erwähnung des REHub-Themes und des WC Marketplace-Plugins ist an dieser Stelle insofern wichtig, weil sich in den Code Snippets Passagen wiederfinden, die sich auf auf die Taxonomien store und dc_vendor_shop beziehen. Diese Taxonomien wird durch das Theme und das Plugin zur Verfügung gestellt.

In meinen alt-tags möchte ich grundsätzlich folgende Informationen anzeigen lassen:

  • Produktname
  • regulärer Preis
  • Angebotspreis, sofern vorhanden
  • Name des Anbieters oder des Verkäufers
  • SEO-relevante Textpassagen

Die Angaben in Deinem eigenen automatischen alt-tag kannst Du natürlich entsprechend Deinen Anforderungen anpassen. Du musst dann lediglich die entsprechenden Meta-Daten in Deinem Skript zur Verfügung stellen und verarbeiten.

Code Snippets Plugin

Für die folgenden Code-Injections nutze ich das WordPress-Plugin Code Snippets von Shea Bunge, das Du Dir ebenfalls installieren solltest.

Für WooCommerce Produktseiten alt-tags automatisch erstellen

Um den alt-tag im HTML eines Produktbildes zu verändern, verwende ich einen Filter-Hook, den WooCommerce von Hause zur Verfügung stellt: woocommerce_single_product_image_thumbnail_html.

An diesen Filter binde ich nun mit add_filter() meine Funktion jyy_bw_automatedAltTags, in der ich dann meinen neuen alt-tag generiere.

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'jyy_bw_automatedAltTags', 10, 1 );

Die Zahlen 10 und 2 bestimmen dabei die Priorität, mit der die angehängte Funktion jyy_bw_automatedAltTags ausgeführt werden soll und die Anzahl der akzeptierten Argumente, die diese Funktion akzeptieren soll.

In meinem Fall ist das lediglich ein Argument, nämlich $html.

Das neue alt-tag vorbereiten

Der erste Schritt innerhalb der Funktion besteht darin, die Informationen, die ich für den neuen alt-tag verwenden möchte, verfügbar zu machen.

Produktnamen abfragen und speichern

Den Produktnamen und den bzw. die Preise zu erhalten, ist die einfachste Übung. Denn hierfür stellen WordPress und WooCommerce eigens Funktionen zur Verfügung.

// get product name aka post title
$jyy_bw_img_alt_productname = get_post_field('post_title');

// get product meta data
$product = wc_get_product($post->ID);
$jyy_bw_img_alt_reg_price = $product->get_regular_price();
$jyy_bw_img_alt_sale_price = $product->get_sale_price();

Wichtig bei den WooCommerce-Produktdaten ist, dass Du zunächst über $product = wc_get_product($post->ID);ein Objekt erzeugst. Danach kannst Du dann wie oben zu sehen, die benötigten Informationen abholen.

Eine umfangreiche Liste der Informationen, die sich über das $product Objekt abfragen lassen, findest Du auf WooCommerce: Easily Get Product Info (ID, SKU, $) from $product Object.

Den Namen des Affiliate-Partner abfragen und speichern

Etwas diffiziler wird es mit dem Namen des jeweiligen Anbieters. Dieser steckt, wie schon erwähnt, in der Taxonomie store des REHub-Themes*.

Hierzu benutze ich zunächst die WordPress-Funktion get_the_terms(). Diese Funktion liefert mir ein WP_Term Object zurück, das sämtliche Informationen der Taxonomie store enthält, die mit dem Artikel beziehungsweise mit dem Produkt verbunden sind.

Um diese Werte zugänglich zu machen, schreibe ich die Werte aus dem Array mit der PHP-Funktion array_shift in die neue Variable $term.

Nun kann ich mir mit der WordPress-Funktion get_term_meta() den Namen des Anbieters holen und in der Variablen $jyy_bw_brand ablegen.

if ( $jyy_bw_store_terms = get_the_terms( $post->ID, 'store' ) ) {
    	$jyy_bw_store_term = array_shift( $jyy_bw_store_terms ); 
    	$jyy_bw_brand = get_term_meta( $jyy_bw_store_term->term_id,'brand_heading',true);
} // close if

Den Namen des Marktplatz-Verkäufers abfragen

Wenn sich auf JUST YUM YUM Kitchen ein Verkäufer registriert, wird für diesen auch immer eine Verkäuferseite erzeugt, das sogenannte Schaufenster. Diese Seite dient in erster Linie dazu, die Produkte dieses Verkäufers zu präsentieren.

Diese Verkäuferseite wird in der Taxonomie dc_vendor_shop erzeugt, die dieses Mal durch das WordPress-Plugin WC Marketplace zur Verfügung gestellt wird.

Da diese Verkäuferseite in der Regel den Namen des jeweiligen Verkäufers beziehungsweise seiner Unternehmung als Titel trägt, verwende ich eben diesen für meine alt-tags.

if($jyy_kitchen_vendors = get_the_terms($post->ID,'dc_vendor_shop')){
	$jyy_kitchen_brand = $jyy_kitchen_vendors[0]->name;
} // close if

Um den Namen des Verkäufers zu speichern, verwende ich im Übrigen die gleiche Variable wie schon zuvor bei der Taxonomie store, nämlich $jyy_kitchen_brand.

Einen inhaltlichen Konflikt zwischen den beiden Taxonomien schließe ich dadurch aus, dass ich die Taxonomie store ausschließlich für Affiliate-Partnern verwende, während die Taxonomie dc_vendor_shop nur registrierten Marktplatz-Verkäufern vorbehalten ist.

Das neue alt-tag erzeugen

Nachdem ich nun alle für mich relevanten Informationen zusammen habe, geht es daran, den neuen alt-tag zusammenzusetzen.

Dazu führe ich zunächst die neue Variable $jyy_bw_automatedAltTag ein, in der ich den Inhalt des neuen alt-tags speichern werde.

Anschließend führe ich die Variablen, in denen ich die Informationen zu Anbieter und Preisen gespeichert habe, zusammen und gebe noch einige statische Textbausteine mit.

Bei den Preisen prüfe ich über eine if-Schleife, welche der Variablen eine Information enthält.

Bereits bestehende alt-tags entfernen

Zu guter Letzt muss ich nun noch ein gegebenenfalls bereits bestehendes alt-tag durch mein eigenes Attribut ersetzt.

$html = preg_replace('/alt=".*?"/', 'alt="' . $jyy_bw_automatedAltTag . '"', $html);

Dazu verwende ich die PHP-Funktion preg_replace. Diese Funktion durchsucht die Zeichenkette $html nach Übereinstimmungen mit einen Suchmuster (/alt=".*?"/) und ersetzt dieses mit meinem neuen alt-tag, das in der Variablen $jyy_bw_automatedAltTag steht.

JUST YUM YUM Bloggerwissen - alt-tags automatisch erstellen: Beispiel eines vollständig automatisch erzeugten alt-tag nach Code-Implementierung in der Chrome Developer Console.
vollständig automatisch erzeugtes alt-tag nach Code-Implementierung

Code Snippet: Auf WooCommerce-Produktseiten alt-tags automatisch erstellen

<?php 

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'jyy_bw_automatedAltTags', 10, 1 );
function jyy_bw_automatedAltTags($html) {
   		global $post;
		$jyy_bw_img_alt_productname = get_post_field('post_title');
		$product = wc_get_product($post-&gt;ID);
 		$jyy_bw_img_alt_reg_price = $product-&gt;get_regular_price();
  		$jyy_bw_img_alt_sale_price = $product-&gt;get_sale_price();
  	
  	// get brand data - data only available if affiliate (external) product
  		if ( $jyy_bw_store_terms = get_the_terms( $post-&gt;ID, 'store' ) ) {
    		$jyy_bw_store_term = array_shift( $jyy_bw_store_terms ); 
    			$jyy_bw_brand = get_term_meta( $jyy_bw_store_term-&gt;term_id,'brand_heading',true);
		} // close if
		
	// get vendor data - data only available if product published by WCMp vendor
		 if($jyy_kitchen_vendors = get_the_terms($post-&gt;ID, 'dc_vendor_shop')){
	  			$jyy_kitchen_brand = $jyy_kitchen_vendors[0]-&gt;name;
		} // close if
  
  	// generate new alt tag content
  
  		$jyy_bw_automatedAltTag ='';
  		$jyy_bw_automatedAltTag .= $jyy_bw_img_alt_productname;
   
 		// only regular price available 
  		if(!empty($jyy_bw_img_alt_reg_price) &amp;&amp; empty($jyy_bw_img_alt_sale_price)){
			$jyy_bw_automatedAltTag .=' - ';
		  	$jyy_bw_automatedAltTag .= $jyy_bw_img_alt_reg_price;
		  	$jyy_bw_automatedAltTag .= ' EUR';
			} // close if

		// regular price and sale price available   
   		if(!empty($jyy_bw_img_alt_reg_price) &amp;&amp; !empty($jyy_bw_img_alt_sale_price)){
			$jyy_bw_automatedAltTag .=' - Regulärer Preis: ';
		  	$jyy_bw_automatedAltTag .= $jyy_bw_img_alt_reg_price;
		  	$jyy_bw_automatedAltTag .= ' EUR';
		  	$jyy_bw_automatedAltTag .= ' - Jetzt im Angebot für ';
		  	$jyy_bw_automatedAltTag .= $jyy_bw_img_alt_sale_price;
		  	$jyy_bw_automatedAltTag .= ' EUR';
			} // close if
  
  		if(!empty($jyy_bw_brand)){
			$jyy_bw_automatedAltTag .=	' - Jetzt Produkte von ';
		  	$jyy_bw_automatedAltTag .=	 $jyy_bw_brand;
		  	$jyy_bw_automatedAltTag .=	' online auf JUST YUM YUM Kitchen Marktplatz kaufen!';
			} // close if

  	$html = preg_replace('/alt=".*?"/', 'alt="' . $jyy_bw_automatedAltTag . '"', $html);
	
	return $html;
  }

?&gt;


Auf Archiv- und Übersichtsseiten alt-tags automatisch erstellen

Damit ich auch auf Übersichts- und Archivseiten ebenfalls alt-tags automatisch erstellen kann, muss ich den obigen Code an verschiedenen Stellen anpassen:

  • anderer Filter-Hook
  • Angabe von Conditional Tags
  • Abfrage des Produktnamens
  • Überschreibung des bestehenden alt-tags
  • Ausgabe des neuen alt-tags

Ein anderer Filter-Hook

Während ich für die WooCommerce Produktseite den Hook woocommerce_single_product_image_thumbnail_html verwende, muss ich außerhalb der Produktseiten diesen Hook auf wp_get_attachment_image_attributes ändern.

wp_get_attachment_image_attributes liefert mir das Array $attr zurück, das alle Attribute für das HTML-Markup eines Bildes enthält. Auch das aktuelle alt-tag, das ich mit meinem Skript manipulieren möchte.

Angabe von Conditional Tags

In Verbindung mit dem neuen Filter-Hook musste ich eine Ausschlüsse definieren, die dafür sorgen, dass das Skript auf bestimmten Seiten nicht ausgeführt wird. Andernfalls kommt es auf diesen Seiten zu unschönen Nebeneffekt, wenn nicht sogar zu einem Fatal Error.

Diese Ausschlüsse lassen sich durch die WordPress Conditional Tags und die WooCommerce Conditional Tags vornehmen.

// WordPress Conditional Tags
is_home() // Startseite
is_front_page() // Startseite
is_page(array(3300)) // spezifische Seite via post ID wegen Nutzung des Plugins WCMp Advanced Frontend Manager

// WooCommerce Conditional Tags
is_cart() // Warenkorb
is_checkout() // Kasse
is_account_page() // Kundenkonto

Ob Du diese oder vielleicht andere Ausschlüsse benötigst, musst Du bitte intensiv testen.

Abfrage des Produktnamens

Da ich mich mit diesem Skript außerhalb einer Produkt-Detailseite bewege, kann ich den Produktnamen beziehungsweise den Seitentitel mit get_the_title() wesentlich einfacher abfragen.

$jyy_bw_img_alt_productname = get_the_title($post-&gt;ID);

Überschreiben des bestehenden alt-tags

Das Überschreiben des bestehenden alt-tags gestaltet sich hier ebenfalls etwas einfacher als auf der WooCommerce Produktseite. Ich muss lediglich den bestehenden Wert des alt-Attributs mit meinem neuen Wert ersetzen.

$attr['alt'] = $jyy_bw_new_alt_tag;

Und das war’s auch schon. Ansonsten funktioniert das Skript genauso wie schon auf der WooCommerce-Produktseite.

Code Snippet: Auf Archiv- und Übersichtsseiten alt-tags automatisch erstellen

<?php
add_filter( 'wp_get_attachment_image_attributes', 'jyy_bw_automatedAltTags_WP',10,1);

function jyy_bw_automatedAltTags_WP($attr){
  	if (is_home() || 
		is_front_page() ||
		is_cart() ||
		is_checkout() ||
		is_account_page() ||
		is_page(array(3300))){
	  	
		// don't manipulate image alt tag
	
	} else {
  		global $post;
  		global $product;
		$jyy_bw_img_alt_productname = get_the_title($post-&gt;ID);
		$product = wc_get_product($post-&gt;ID);
 		$jyy_bw_img_alt_reg_price = $product-&gt;get_regular_price();
  		$jyy_bw_img_alt_price = $product-&gt;get_price();
  		$jyy_bw_img_alt_sale_price = $product-&gt;get_sale_price();
	  	$jyy_bw_vendor = get_wcmp_product_vendors($product);
  	
  	// get brand data - data only available if affiliate (external) product
  		if ( $terms = get_the_terms( $post-&gt;ID, 'store' ) ) {
    		$term = array_shift( $terms ); 
    			$jyy_bw_brand = get_term_meta( $term-&gt;term_id,'brand_heading',true);
		} // close if
	  
	// get vendor data - data only available if product published by WCMp vendor
		 if($jyy_bw_vendors = get_the_terms($post-&gt;ID, 'dc_vendor_shop')){
	  			$jyy_bw_brand = $jyy_bw_vendors[0]-&gt;name;
		} // close if
  
  	// generate new alt tag content
  
  		$jyy_bw_new_alt_tag ='';
  		$jyy_bw_new_alt_tag .= $jyy_bw_img_alt_productname;
  
  		if(!empty($jyy_bw_img_alt_reg_price) &amp;&amp; empty($jyy_bw_img_alt_sale_price)){
			$jyy_bw_new_alt_tag .=' - ';
		  	$jyy_bw_new_alt_tag .= $jyy_bw_img_alt_reg_price;
		  	$jyy_bw_new_alt_tag .= ' EUR';
			} // close if
	  
	  	if(!empty($jyy_bw_img_alt_reg_price) &amp;&amp; !empty($jyy_bw_img_alt_sale_price)){
			$jyy_bw_new_alt_tag .=' - Regulärer Preis: ';
		  	$jyy_bw_new_alt_tag .= $jyy_bw_img_alt_reg_price;
		  	$jyy_bw_new_alt_tag .= ' EUR';
		  	$jyy_bw_new_alt_tag .= ' - Jetzt im Angebot für ';
		  	$jyy_bw_new_alt_tag .= $jyy_bw_img_alt_sale_price;
		  	$jyy_bw_new_alt_tag .= ' EUR';
			} // close if
  
  		if(!empty($jyy_bw_brand)){
			$jyy_bw_new_alt_tag .=	' - Jetzt Produkte von ';
		  	$jyy_bw_new_alt_tag .=	 $jyy_bw_brand;
		  	$jyy_bw_new_alt_tag .=	' online auf JUST YUM YUM Kitchen Marktplatz kaufen!';
			} // close if

			$attr['alt'] = $jyy_bw_new_alt_tag;
	}
  return $attr ;
}

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.