xt:Commerce Bildnamen mit Zusatzinformationen füttern

Heute gibt es ein Quicktip für xt:Commerce. xt:c bindet Bilder immer mit komischen ID-Nummer ein, z. B. 40_0.jpg. Das solche Dateinamen nicht SEO-freundlich sind, ist jedem klar. Um einem Corehack bzw. einer Modulinstallation zu entgehen setzen wir eine einfache Methode ein, indem wir die Ausgabe der Bildlinks um wertvolle Informationen wie z.B. Keywords oder Artikelnamen erweitern. Dazu benötigen wir nur das Template und einen HTML-Editor. Am Ende erhalten wir dann etwas suchmaschinenfreundlichere Bildnamen, z. B. 40_0.jpg#Produktname. Ob das ganze SEO-technisch Sinn macht wird sich zeigen, ich selber habe es vor 3 Tagen eingebaut und möchte behaupten dass meine Suchbegriffe mindestens 2-3 Plätze nach oben sind.

Bearbeiten der categorie_listing.html

Zuerst wenden wir uns der Kategorie-Aufteilung von xt Commerce zu. Hier werden Links bis jetzt auf foglende Art ausgegeben (vom Standard xtc4 Template ausgehend):

<a href="{$module_data.CATEGORIES_LINK}?phpMyAdmin=fac4b407329t262ea922"><img src="{$module_data.CATEGORIES_IMAGE}" alt="{$module_data.CATEGORIES_NAME}" /></a>

Was steht hier? Hier wird einLink aufgebaut (das href) und ein Bild als Textersatz geladen. Soweit ist das ja nicht schlimm, aber SEO-technisch noch sehr verbesserungswürdig. Wir fangen mit einem simplen title-Tag für den Link an und fügen beim Bild noch eine Raute hinzu. Dieses soll am Ende so aussehen:

<a href="{$module_data.CATEGORIES_LINK}?phpMyAdmin=fac4b407329t262ea922" title="Hier etwas eingeben oder Smarty-Variable aufrufen"><img src="{$module_data.CATEGORIES_IMAGE}#{$module_data.CATEGORIES_NAME}" alt="{$module_data.CATEGORIES_NAME}" />

Bearbeiten der product_listing_v1.html

Als nächstes wenden wir uns des Templates für die Produkte zu. In welcher Reihenfolge bzw. was geändert wird, spielt keine Rolle.
Auch hier schauen wir nach dem Link von xt:Commerce der die Liste ausgibt. Hier finden wir auch wieder ein ähnliches Konstrukt, welches wir SEO optimieren können.

<a href="{$module_data.PRODUCTS_LINK}?phpMyAdmin=fac4b407329t262ea922"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a>

Daraus basteln wir dann auch wieder ein seo-freundlicheres Konstrukt.

<a href="{$module_data.PRODUCTS_LINK}?phpMyAdmin=fac4b407329t262ea922" title="Hier etwas eingeben oder Smarty-Variable aufrufen"><img src="{$module_data.PRODUCTS_IMAGE}#{module_data.PRODUCTS_NAME" alt="{$module_data.PRODUCTS_NAME}" /></a>

Zusammenfassung

Dasselbe Prinzip gilt effektiv für alle Dateien die Bilder aufrufen. Je nach Smarty-Variablen kann man dies mit dynamischen Inhalten füllen oder vorher feste Werte vergeben. Man sollte aber stets darauf achten, dass ALLE Bilder alt-Tags aufweisen (beeinflusst die Google Bildersuche). Links sollten ebenfalls aussagekräftige Title-Tags besitzen, da dies der Semantik dient und meiner Meinung nach zukünftig immer wichtiger werden wird. Außerdem kann man mit title-tags und jquery einige sehr coole Tooltip-Effekte erzeugen.

Lade Dir diesen Post als pdf-Datei herunter: xt:Commerce - Bildnamen mit Zusatzinformationen füttern (319)

Alle Posts der Woche 23 / 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