Bild-URLs bei einem Relaunch behalten

Bei einem Webshop-Relaunch sollte man die URLs der HTML-Seiten entweder (falls möglich) gleich lassen oder sauber mit 301 auf die neuen URLs weiterleiten. Aber wie sieht es mit den Bildern aus, die möglicherweise in der Bildersuche ranken und Traffic bringen?

Sebastian Erlhofer empfiehlt in seinem SEO-Standardwerk, dass Bild-URLs der alten Seite noch 1–2 Jahre nach dem Relaunch-Datum unter der gleichen URL erreichbar sein sollten – bis die Bilder der neuen Seite eigene Rankings aufgebaut haben.

Suchmaschinen speichern bei der Bildersuche immer 2 URLs: die URL des Bildes und die URL der verweisenden HTML-Seite (in der das Bild eingebunden ist). Wenn nun das Bild unter der alten URL erreichbar bleibt, dann wird der Link zur HTML-Seite zur alten Seite zeigen. Diese muss aber sowieso mit 301-Redirect weitergeleitet werden. Sprich: Das Bild behält sein Ranking, ist weiter unter der alten Adresse verfügbar, und wenn jemand zur verweisenden Seite klickt, kommt er über den 301-Redirect zur passenden neuen Seite.

So die Theorie. Aber wie liefert man Bilder unter gleichen URLs aus, wenn man zu einem völlig neuen Webshop-System wechselt, bei dem praktisch alles anders ist?

Beispiel: Plentyshop LTS

Plentyshops werden bei AWS (Amazon Web Services) gehostet, Bilder werden dabei über ein CDN (Content Delivery Network) ausgeliefert. Man kann dabei eine eigene CDN-Domain festlegen – bei Eventlights war das die Subdomain cdn.eventlights.shop.

Der Vorteil: Auch wenn man von Plenty zu einem anderen Shop umzieht, kann man problemlos einen Server mit dieser Subdomain (cdn.eventlights.shop) einrichten und dort exakt dieselben Bild-URLs hosten, die auch Plenty genutzt hat.

Wenn man keine CDN-Domain genutzt hat, dann hat man diese Möglichkeit nicht – die Bilder bleiben nur online, solange auch der Vertrag mit Plenty aufrecht ist. Tipp: Wenn ein Systemwechsel geplant ist dann ist es sinnvoll, noch vor dem Wechsel eine eigene Bilder-CDN-Domain einzurichten.

Die URLs der Bilder konnte ich mit dem elastischen Export als CSV-Datei exportieren (alle Bilder von allen Produkten).

Kopieren der alten Bilder auf den eigenen Server

Ich hoste den neuen Shop auf Basis von WordPress/WooCommerce auf einem Hetzner Cloud Server. Auf diesem Server kann ich problemlos einen weiteren Apache-Vhost anlegen, der Bilder unter cdn.eventlights.shop ausliefert.

Ich lade die Bilder mit wget direkt vom Plenty-CDN-Server auf meinen Server und nutze dazu die vorhin exportierte Liste mit Bild-URLs.

sudo -u www-data wget -x -nH -P /var/www/cdn -i /var/www/bild-urls.csv

• sudo -u www-data Führt den Befehl als Systembenutzer www-data aus — das ist der Apache-Webserver-Benutzer. Dadurch gehören alle heruntergeladenen Dateien direkt diesem Benutzer, ohne nachträgliches Korrigieren der Zugriffsrechte.
• wget Kommandozeilenprogramm zum Herunterladen von Dateien über HTTP/HTTPS. Unter Linux standardmäßig vorinstalliert, kann einzelne Dateien oder ganze Listen verarbeiten.
• -x Erstellt die vollständige Verzeichnisstruktur der URL lokal nach. Eine URL wie /item/images/1469/full/bild.jpg wird also als .../item/images/1469/full/bild.jpg gespeichert — nicht flach in einem Ordner. Ohne dieses Flag würden alle Dateien unstrukturiert im Zielverzeichnis gespeichert werden.
• -nH „No host directory“ — unterdrückt das automatische Anlegen eines Unterordners mit dem Domainnamen. Ohne dieses Flag würde wget einen Ordner cdn.eventlights.shop/ erstellen; mit -nH beginnt die Struktur direkt mit item/.
• -P /var/www/cdn Legt das Basisverzeichnis (Prefix) für alle Downloads fest. Alle Dateien werden unterhalb von /var/www/cdn gespeichert — kombiniert mit -x entsteht so die vollständige Zielstruktur.
• -i /var/www/bild-urls.csv Liest die Liste der herunterzuladenden URLs aus einer Textdatei, eine URL pro Zeile. Wget arbeitet die Liste sequenziell ab und überspringt Leerzeilen automatisch. Die CSV muss für www-data lesbar sein — daher wurde sie im Verzeichnis /var/www/ gespeichert, mit dem Besitzer www-data.

Anmerkung: Ich habe die URLs der Bildgrößen „full“, „middle“ und „secondPreview“ verarbeitet. Für die kleinste Bildgröße „preview“ verwende ich einfach eine Apache-Rewrite-Regel, die die „full“-Dateien bei den „preview“-URLs ausliefert.

Apache-Vhost anlegen

Je nach Serverkonfiguration kann es nötig sein, die Befehle anzupassen. Die Befehle gehen von Arbeit mit Root-Rechten aus; wenn man ohne Root-Rechte am Server eingeloggt ist, muss man sudo vor die Befehle schreiben.

$ nano /etc/apache2/sites-available/cdn.conf

Inhalt einfügen:

<VirtualHost *:80>
    ServerName cdn.eventlights.shop
    DocumentRoot /var/www/cdn

    <Directory /var/www/cdn>
        Options -Indexes
        AllowOverride None
        Require all granted
    </Directory>

    RewriteEngine On
    RewriteRule ^/item/images/([0-9]+)/preview/(.+)$ /item/images/$1/full/$2 [L]

    ErrorLog ${APACHE_LOG_DIR}/cdn-error.log
    CustomLog ${APACHE_LOG_DIR}/cdn-access.log combined
</VirtualHost>

Aktivieren der Konfiguration:

$ a2ensite cdn.conf && apache2ctl configtest
$ systemctl reload apache2

Die Subdomain muss nun am DNS-Server eingetragen werden (die korrekte IP-Adresse statt 123.123.123.123 eintragen):

cdn 300 IN A 123.123.123.123

Sobald man diesen Eintrag aktiviert, muss man natürlich den vorher existierenden Eintrag für die Subdomain entfernen. Im Fall von Plentymarkets war das ein CNAME-Eintrag, der auf einen CloudFront-Server von AWS verwiesen hat.

SSL-Zertifikat (Let’s Encrypt) ausstellen:

$ certbot --apache -d cdn.eventlights.shop

Certbot erstellt automatisch eine Datei cdn-le-ssl.conf für HTTPS und ergänzt die cdn.conf um einen HTTP→HTTPS-Redirect. Die Rewrite-Regel für preview wird dabei in beide Dateien übernommen.

Die Bilder sollten nun vom neuen Server unter den gleichen URLs ausgeliefert werden – das sollte anhand der URL-Liste getestet werden.

Andere Möglichkeiten

Es ist natürlich auch möglich, einen einfachen Webspace zu mieten, auf dem man die Bilder etwa per FTP hochladen kann. Wichtig ist die korrekte Verzeichnisstruktur und die korrekte Subdomain (etwa „cdn“, wenn diese vorher verwendet wurde).

Wer die Bilder nicht selbst hosten möchte, kann auch einen spezialisierten Bildhostingdienst wie SIRV, Cloudinary oder Imgix nutzen. Diese bieten eigene CDN-Infrastruktur und erlauben es, eine eigene Domain (z.B. cdn.eventlights.shop) als Alias einzurichten. Der Vorteil: automatische Bildoptimierung und globale Auslieferung über ein CDN-Netzwerk. Der Nachteil: laufende Kosten und eine weitere externe Abhängigkeit.

Eine weitere Option ist die Nutzung von Amazon S3 mit CloudFront — also derselben Infrastruktur, die Plentymarkets intern verwendet. Man kann einen eigenen S3-Bucket anlegen, die Bilder dort hochladen und CloudFront mit der eigenen CDN-Domain verknüpfen. Das erfordert jedoch AWS-Kenntnisse und verursacht ebenfalls laufende Kosten, die bei kleinen Bildmengen aber minimal sind.

Für alle Varianten gilt: Entscheidend ist nicht die Hosting-Lösung, sondern dass die Bild-URLs exakt erhalten bleiben — gleiche Domain, gleiche Pfadstruktur, gleiche Dateinamen. Nur dann bleiben die bestehenden Rankings in der Bildersuche erhalten.