Projektbeschreibung: Mobile Development und OnPage SEO für eine existierende Website der Dhünn Automaten GmbH
Über die Dhünn Automaten GmbH
Die Dhünn Automaten GmbH, Köln ist ein Automatenaufsteller aus Köln, der für Unternehmen ab 20 Mitarbeitern die Betriebsverpflegung mit Verkaufsautomaten mit Münzeinwurf übernimmt. Dazu zählen unter anderem Kaffeeautomaten, Colaautomaten bzw. Getränkeautomaten im Allgemeinen, Süßwarenautomaten, sowie diverse Verkaufsautomaten für Snacks, heiße Würstchen, bis hin zu frischen Brötchen und Sandwiches oder gar frische Salate.
Die Dhünn Automaten GmbH, Köln übernimmt das Operating der Automaten, d.h. bei kostenloser Aufstellung der Automaten übernimmt die Dhünn GmbH die Auffüllung der Automaten, wie auch die Wartung und Reparatur – dafür gehen die Einnahmen aus dem Automatenverkauf an die Dhünn GmbH.
Mobile Development
Die Dhünn Automaten GmbH besaß zum Zeitpunkt der Projektübernahme bereits seit vielen Jahren eine Website, die zudem ca. 2 Jahre zuvor neu designt und gerelauncht wurde. Im Laufe der Zeit stellte sich heraus, daß die Seite nicht mobilfähig war und sowohl auf Smartphones als auch auf Tablets ein unbefriedigendes User Experience bot, was zum einen am verwendeten Flash-Inhalt auf der Startseite, als auch am starren Layout mit fester Breite von ca. 960px lag. Beides zusammen führte dazu, dass die Seite vor allem auf Smartphones nicht zu benutzen war, wodurch vermutlich der ein oder andere potentielle Kunde, der sich über die Produkte der Firma informieren wollte, verloren ging.
Eine Projektanforderung war es, die Seite mobilfähig zu machen, sie aber ansonsten in Layout und Inhalt unverändert zu lassen. Zu diesem Zweck wurden einige Modifikationen im TypoScript vorgenommen:
- Unterscheiden anhand des User Agent String im TypoScript, ob Flash Inhalt ausgeliefert wird (Desktop) oder ein JavaScript Picture Slider für mobile Endgeräte, der über eine JavaScript Bibliothek eingebunden wird.
- Per Typoscript wird zusätzlich zur Desktop Navigation eine Mobile Navigation erzeugt, die anhand der verfügbaren Bildschirmbreite (Device Width) per jQuery im Wechsel angezeigt bzw. versteckt wird. (Togglen, Break Point). Für die Mobildarstellung wird ein zeitgemäßes, an das existierende Design angepasstes Drop-Down Menü verwendet.
- Ebenfalls per jQuery wurde anhand mehrerer Breakpoints das CSS des mehrspaltige Seitenlayout umgeschrieben, die Gesamtbreite der Seite an die verfügbare Device Width angepasst und Bilder skaliert. (Responsive Layout)
Grundlegende Suchmaschinenoptimierung auf der Seite (OnPage SEO)
In einem weiteren Schritt wurden einige grundlegende Veränderungen an der Seite vorgenommen, die zwar für den User nicht unbedingt direkt sichtbar sind, jedoch die Auffindbarkeit der Seite in Suchmaschinen deutlich verbessert.
- URL Rewriting per Typo3 Plugin „coolUri“: Ersetzen der Standard Typo3 Links durch lesbare, SEO freundliche URLs (Uniform Resource Locator – was in der Browser Adresszeile und in den Suchmaschinenergebnissen steht), z.B. statt:
http://www.dhuenn.de/neu/index.php?id=32dann nach Rewritinghttp://www.dhuenn.de/automaten/diverse-automaten/combi-585/ - Umleiten aller alten URLs (mit id=123) auf die neue Struktur per 301 Redirect in der .htaccess Datei
- Sinnvolle aussagekräftige, SEO freundliche Seitentitel: statt „Automatenstraße“ z.B. „Dhünn GmbH, Köln | Automaten für Heiß- & Kaltgetränke, Snacks“
- Hinterlegen geeigneter Keywords pro Seite im meta-tag „keywords“ und aussagekräftiger Beschreibungtexte pro Seite im meta-tag „description“.
- Social Network Share Buttons auf jeder Seite für facebook, twitter, google+ (damit User die Seite in den wichtigsten Sozialen Netzwerken teilen können)
- Hinzufügen einer Sitemap unter
http://www.dhuenn.de/sitemap.xmlund einer Robots.txt Datei unterhttp://www.dhuenn.de/robots.txt - Erstellen und Verlinken 404 Error Page: Wird aufgerufen bei ungültigen Links unter der Domain
http://www.dhuenn.de
Die 404 Error Page ersetzt die Standard Error Page des Apache HTTP Servers. Die neue 404 Error Page zeigt für alle ungültigen Links ein normales Seiten-Layout mit Navigation an und einen erklärenden Text. Der User bleibt also zunächst auf der Seite, kann über die Navigation oder eine Suchmaske den eigentlich für ihn relevanten Content finden.
Durch diese Maßnahmen allein konnte die Auffindbarkeit der Seite zu Produkt-relevanten Keywords wie „Kaffeeautomaten Köln„, „Colaautomaten Köln“ , „Getränkeautomaten Köln“, „Süßwarenautomaten Köln„, „Verkaufsautomaten Köln„, „Snackautomaten Köln“ und „Vendingautomaten Köln“ bereits deutlich gesteigert werden und dem potentiellen Kunden aussagekräftige Inhalte in den Snippets der organischen Suchmaschinenergebnisse präsentiert werden.
