xt:Commerce SEO-freundliche Bildnamen für Produktbilder

Wenn man sich den Quelltext von xt:Commerce einmal anschaut stellt man entsetzt fest, dass Bilder wenn diese dynamisch verarbeitet werden (z. B. in der Produktansicht) immer eine hässliche URL haben, also keine Relevanz für Suchmaschinen. Dies wäre z. B. /images/product_images/.../4_00.jpg
Was will eine Suchmaschine daraus lesen? In diesem Fall - klar nix. Also werden wir uns mal anschauen wie wir an SEO-Freundliche Links für Bilder kommen - schließlich wollen Bildersuche und Textsuche gleichermaßen bedient werden.

Etwas Theorie für seo-freundliche Links bei Bildern

Wie soll nun unser Link aussehen? Für mein beaniebee-Projekt habe ich sie nach folgendem Schema aufgebaut:
/guenstig-selbergestalten/<herstellername>-<produkttitel>_<produkt_id>.jpg
Wenn wir uns vor Augen halten, wie die ganzen Bildnamen in xt:Commerce seofreundlich geändert werden sollen, treffen wir bei diesem seo-Vorhaben unweigerlich auf die mod_rewrite Funktion von apache - umgangssprachlich .htaccess, da wir anhand eines Strings ausfindig machen müssen, welches Bild geöffnet werden muss.
Außerdem benötigen wir eine zusätzliche Funktionen die entweder mit dazu geladen werden müssen bzw. neu erstellt.

Am Anfang war das .htaccess

Bevor wir uns an den Kern von xt:Commerce wagen möchte ich nochmal deutlich darauf hinweisen : MACHT BACKUPS!
Ihr glaubt nicht wie schnell sich ein Fehler einschleichen kann. Mein Tip: Lieber öfter speichern.
Als erstes auf unserem Weg zu seofreundlichen Bildern machen wir "Trockenübungen". Wir legen also ein Stück Code in der. htaccess ab und prüfen hinterher ob der Aufruf funktioniert. Wir tragen also folgende Zeile ein:

RewriteEngine On (falls noch nicht vorhanden)
RewriteRule ^guenstig-selbergestalten\/(.*)\_(.*).jpg?$ images\/product_images\/info_images\/$2_0.jpg [NC]

Mit dieser Zeile sagen wir, wie die SEO-URL auszusehen hat, worauf wir dann weiterleiten. In diesem Fall könnte ein Bildlink folgendermaßen aussehen:

/guenstig-selbergestalten/herstellerx-produkty_1.jpg

In Wahrheit würde dann /images/product_images/info_images/1_0.jpg aufgerufen werden. Eigentlich easy, oder?
Die 1 kann man erstmal mit einer x-beliebigen Produkt-ID versehen. Wenn das Bild korrekt angezeigt wird, habt Ihr alles richtig gemacht und wir können den nächsten Schritt in Richtung SEO-freundliche Bildlinks wagen.

Der Umbau der xt:Commerce product_info.php

Wie ich oben bereits erwähnt habe brauchen wir zusätzliche Bibliotheken von xt:Commerce um unsere SEO-freundlichen Bildlinks zu generieren.
Das größte Problem sind Umlaute und Sonderzeichen. Dafür gibt es in xt:Commerce bereits ein super Modul, welches man im /inc Ordner findet (xtc_cleanName.inc.php). Desweiteren laden wir die xtc_get_manufacturersname.inc.php hinzu, welche wir im späteren Verlauf erst dazuprogrammieren werden.

Bis jetzt langt es uns erst einmal dass wir 2 Zeilen im Kopf der Datei hinzufügen.


require_once (DIR_FS_INC.'xtc_cleanName.inc.php');
require_once (DIR_FS_INC.'xtc_get_manufacturersname.inc.php');

Danach fügen wir in den Zeilen 85 - 90 folgende Zeilen hinzu:


/* SEO Geek Addon */
$manufacturername=xtc_get_manufacturersname($product->data['manufacturers_id'].'-';
$imageurl = 'guenstig-selbergestalten/'.xtc_cleanName($manufacturername.'-'.xtc_cleanName($product->data['products_name']).'_'.$product->data['products_id'].'.jpg';
$info_smarty->assign('PRODUCTS_SEOIMAGE', $imageurl);
/* SEO Geek Addon */

xtc_get_manufacturersname.inc.php anlegen

Da wir in der Bildurl auch den Hersteller haben möchten (jedenfalls wollte ich den) brauchen wir eine kleine Funktion, die uns nur den Namen zurückgibt. Daher legen wir diese im /inc/ Verzeichnins von xt:Commerce per Hand an und fügen folgenden Inhalt ein:


<?php
function xtc_get_manufacturersname($id, $manufacturers_array = '')
{
if(!is_array($manufacturers_array)) $manufacturers_array = array();
$sql = "SELECT manufacturers_id, manufacturers_name FROM ".TABLE_MANUFACTURERS." WHERE manufacturers_id = "'.$id."'";
$manufacturers_query = xtc_db_query($sql);
$manufacturers = xtc_db_fetch_array($manufacturers_query);
return $manufacturers['manufacturers_name'];
}?>

Das war jetzt eigentlich der ganze Zauber. Wir übergeben die ID von dem Produkt über initialisieren das Array als leer und prüfen das ganze noch einmal gegen. Danach bauen wir unseren Suchstrings für den Herstellernamen auf und übergeben das an mySQL weiter. Dieses sucht uns den passenden Namen heraus und gibt Ihn an die aufrufende Funktion zurück.

Anpassen des Produkt-Templates von xt:Commerce

Damit unsere schönen SEO-freundlichen Bildurls auch ausgegeben werden müssen wir diese auch im Template aufrufen. Wir öffenen mit dem HTML-Editor unserer Wahl die Template-Datei und modifzieren diese ein wenig. Wir suchen uns den Teil mit {if $PRODUCTS_IMAGE ... und wechseln diese mit folgendem Code aus:

{if $PRODUCTS_IMAGE != ''}
<img src="{$PRODUCTS_SEOIMAGE}" alt="{$PRODUCTS_NAME} g&uuml;nstig selber gestalten" />
{/if}

Wir wechseln den Link zum Aufruf mit unserem selbst gestalteten Link aus und vergeben gleichzeitig einen Titlte-Tag. Das nennt man dann richtig suchmaschinenoptimiert :)

Die ganze Geschichte noch für das product_listing

Wer hier auch noch seo-freundliche Bildlinks haben möchte kann dies mit noch etwas weniger Aufwand machen. Wir benötigen wie immer erst unsere .htaccess - Modifikation - und weil wir frech sind nehmen wir hier noch gleich einen anderen Ordner bepackt mit Keywords:

RewriteRule ^gestalten\-sie\-Ihr\-Produkt\/(.*)\_(.*).jpg?$ images\/categories\/$2.jpg [NC]

Danach kümmern wir uns um die default.php (zu finden in /includes/modules). Hier rufen wir im Kopf wieder die xtc_cleanName.php auf und fügen ab ca. Zeile 130 folgendes ein:


if($categories['categories_image'] != '')
{
//$image = DIR_WS_IMAGES.'categories/'.$categories['categories_image'];  <-- dieses welchseln wir aus
/* SEO Geek Addon */
$image = 'gestalten-sie-ihr-produkt/'.xtc_cleanName($categories['categories_name'].'_'.$categories['categories_id'].'.jpg';
/* SEO Geek addon */

Am Ende gut angekommen

Ich hoffe natürlich so wie immer, dass Ihr den Beitrag interessant und hilfreich fandet. Schreibt mir Verbesserungsvorschläge oder Eure Erfahrungen. Und denkt dran - bei SEO-Optimierungen immer die Geduld bewahren.

Lade Dir diesen Post als pdf-Datei herunter: xt:Commerce SEO-freundliche Bildnamen für Produktbilder (612)

Alle Posts der Woche 26 / 2009 anschauen

Fandest Du den Beitrag interessant?

Der Beitrag ist mir etwas wert:
Fatal error: Call to undefined function the_flattr_permalink() in /var/www/html/web1028/html/seo-geek-de/wp-content/themes/seogeek/single.php on line 48