TYPO3-Update, Facelift und SEO-Konzept

Hummel Reiseideen
https://www.hummel-reiseideen.de/

Die Website des auf skandinavische Länder spezialisierten Anbieters Hummel Reiseideen betreuen wir schon seit längerer Zeit. Es gab und gibt immer mal wieder was daran zu tun. Jetzt stand das große Update auf TYPO3 10 an, was dafür genutzt wurde im Backend mal richtig aufzuräumen und dem ein oder anderen Element im Frontend einen neuen Anstrich zu verleihen.

Der Technik-Part

Die verwendete TYPO3-Installation war schon etwas in die Jahre gekommen und entsprach nicht mehr den aktuellen Datenschutzbestimmungen. Deshalb war das Update auf die aktuelle TYPO3 Version und diverse technische Anpassungen für Hummel Reiseideen dringend notwendig.

Eine der großen Umstellungen war die Migration der Seiten und Inhaltselemente von der Extension TemplaVoila-Plus zu TYPO3 Fluid_Styled_Content, B13/Container oder eigenem Code. Im Detail:

  • templavoila-plus Backend-Layout zu TYPO3 core

  • templavoila-plus Inhalte zu fluid_styled_content oder eigenen

  • templavoila-plus Container zu b13/container

  • Hilfsmittel: in2code/migration + eigene Converter/Skripte

Eine weitere technische Herausforderung war die Migration von PHP und einer TYPO3 API mit Hilfe von rectorphp/rector sowie eigenen UpgradeWizards.

Auch die Extension ext:formhandler zur Erstellung der benötigten Formulare für z.B. Anfragen oder Buchungen war mittlerweile veraltet, sodass wir sie zur ext:form migriert haben. Die ext:form ist eine TYPO3 Core Lösung für alle Formulare mit Validierung, Mails, Hooks, Finisher, etc.

Mit Codeception haben wir automatisierte Acceptance Tests durchgeführt. Dabei wird das Verhalten auf der Website aus der Sicht des Nutzers getestet, ob Abläufe wie erwartet funktionieren.

Über die Continuous Integration der Versionsverwaltung GitLab konnten wir verschiedene Plattformen direkt testen lassen lassen und Fehler beheben. Im Anschluss erfolgte die sofortige Ausspielung auf Staging- oder Produktionssysteme.

Das Frontend-Tooling haben wir von Gulp und Grant auf Webpack umgestellt, da es für große Projekte wie diese Internetseite besser geeignet ist.

Für Hummel Reiseideen ist das Thema SEO von großer Bedeutung, damit potenzielle Kunden den Reiseveranstalter schnell und unkompliziert finden können. By the way haben wir ihm auch ein ausführliches SEO-Konzept erstellt, mehr dazu weiter unten. Um ihm die Umsetzung dafür zu erleichtern, haben wir die Extension cs_seo integriert und erweitert. Darüber werden dem Redakteur umfassende Möglichkeiten zur Suchmaschinenoptimierung geboten.

Für die Ausgabe der von Kunden abgegeben Reisebewertungen, z.B. bei Google, haben wir die Struktur von schema.org hinterlegt. Darüber können die enthaltenen Informationen auf einfache Weise zwischen verschiedenen Anwendungen ausgetauscht werden.

Zu guter Letzt wurden die neu gestalteten oder überarbeiteten Elemente umgesetzt.

Der Gestaltungs-Part

Wenn schon ein Update gemacht wird, ist es sinnvoll sich immer alle Teile eine Website anzuschauen und zu überdenken. Aus diesem Grund wurde auch die Gestaltung unter die Lupe genommen. Struktur, Aufbau, Schriften oder Farben wurden nicht infrage gestellt, es ging eher um die kleinen aber feinen Stellschrauben.

So haben wir z.B. die Teaser-Boxen für Reisen, Hotels und Ausflüge optimiert. Die Bilder können nun viel besser auf den Nutzer der Website wirken, die Headlines sind deutlich lesbarer. Im Menü heben sich der Kunden-Login und der Unternehmensbereich vom Rest ab. Telefonnummer und E-Mail-Adresse sind im Header größer geworden. Die Reisebeschreibungen sind etwas luftiger und übersichtlicher aufgebaut. Der Footer wurde auf die wichtigsten Elemente minimiert.

Neu dazu gekommen ist ein großer Call-to-Action-Bereich im Content. Der Kunde sieht hier wieder Telefonnummer und E-Mail-Adresse für eine schnelle, einfache Kontaktaufnahme. Dazu hat er die Möglichkeit sich über ein Formular seine persönliche Reise zusammen stellen zu lassen. Und - wenn das Büro gerade entsprechend besetzt ist - gibt es die Möglichkeit sich per Video-Call persönlich beraten zu lassen.

Auf jeder Seite finden sich nun ausführliche und spannende Informationen zu den Reiseländern, Touren, Orten, etc. mit persönlichen Geheimtipps und Schilderungen der Mitarbeiter.

SEO-Konzept

Die schönste und beste Website bringt nichts, wenn es keine Nutzer gibt, vor allem nicht, wenn über die Seite - wie in diesem Fall die Reisen - noch etwas verkauft werden soll. Doch zum Glück gibt es die Suchmaschinenoptimierung, also all die kleinen Dinge, die helfen, dass die Website schnell über die verschiedenen Suchmaschinen gefunden wird.

Für Hummel Reiseideen haben wir analysiert, was diesbezüglich an der bestehenden Seite gut ist, was noch verbessert werden kann und was es für zusätzliche Möglichkeiten gibt, ohne teure Anzeigen mehr Traffic zu generieren. Alle Erkenntnisse haben wir in einem Konzept zusammen gefasst und Hummel Reiseideen so einen Leitfaden für das Erstellen der Inhalte an die Hand gegeben.

Vieles floss direkt in die Umsetzung des Updates und die Neugestaltung der Elemente mit ein, um dem Kunden mit dem Livegang eine runde Sache abzuliefern.

Leistungsumfang

Beratung responsive Webdesign SEO TYPO3-Update

Technik dahinter

Hosting HTML5/CSS3 TYPO3 CMS

Extensions

 form  VHS  [clickstorm] SEO