TYPO3 Neos Inhaltselement «Text mit Bild» an Twitter Bootstrap anpassen

Das fantastische an TYPO3 Neos ist, dass ohne dreckige Hacks bestehende Inhaltselemente modifiziert werden können . Jede Ausgabe kann genau so gesteuert werden, wie es gewünscht wird.

In diesem Artikel sollte es um das Inhaltselement «Text mit Bild» gehen. Dabei haben wir folgende Vorgaben:

  1. Ausrichtungen: Links, rechts, oben und unten
  2. Die Positionierung sollte mit den CSS Klassen von Twitter Bootstrap gemacht werden
  3. Die CSS Klassen sollten einfach veränderbar sein
  4. Wenn möglich sollte im Quelltext der Text vor dem Bild positioniert sein, damit in der Mobile-Ansicht der Text vor dem Bild erscheint
  5. Um ein effektives Styling zu ermöglichen, sollte im umschliessenden Tag schon eine Klasse mit der Auszeichnung der Positionierung enthalten sein
  6. Das HTML für das Rendering des Bildes sollte nicht neu definiert werden müssen
  7. Damit es wiederverwendbar wird, sollte das ganze in ein eigenes Plugin gepackt werden

Mehr lesen

SEO Checkliste Website Relaunch

Typische Fehler beim Relaunch einer Website

Auf Benutzeranforderungen, Informationsarchitektur, Design und Inhalt wird beim Relaunch einer Website viel Wert gelegt. Leider gehen im Relaunch Eifer wichtige Aspekte mit hohem Einfluss auf den Vertriebs- und Marketingerfolg gerne vergessen.

Es wird oft genug darauf hingewiesen, dass die Suchmaschinen die Gatekeeper des Webs sind und sie damit die entsprechende Aufmerksamkeit verdienen. Sind die Anforderungen an die Suchmaschinenoptimierung (SEO) nicht erfüllt, kommt es zu einem signifikanten Besucherverlust. Darum ist vor dem Relaunch zu prüfen, ob die Anforderungen der Suchmaschinen erfüllt sind.

Websites sind mehrheitlich auf eine Besucher-Interaktion ausgerichtet: generieren von Downloads, Offertanfragen oder Bestellungen. Sind diese Interaktionspunkte nicht optimal eingebettet und geprüft, geht Geschäft verloren.

Trotz ihrer Relevanz werden diese Aspekte gar nicht oder erst beachtet, wann der Schaden bereits angerichtet ist. Web Analytics Instrumente, Google Webmaster Tool sowie SEO Kontrollinstrumente ermöglichen zu prüfen, ob sich die Werte für die Besucherquellen, die Conversion sowie der Besucherfluss verändert haben.

Massive Abweichungen sind ein Warnsignal, dass beim Relaunch die unten aufgeführten, relevanten Faktoren nicht beachtet wurden:

  • Validieren der Programmierung: Die Programmierung erfüllt die W3C Anforderungen mindestens weitgehend.
  • Meta Tags individuell befüllen: Jede (wichtige) Page verfügt über einen Page Title sowie über eine Description mit einem Call to Action .
  • Überschriften (h1, h2, h3) setzen: Das Haupt-Keyword einer Seite muss im h1 Titel erhalten sein. Der h1 darf genau nur einmal pro Seite verwendet verwendet werden. Die h2 und h3 Titel ist adäquat einzusetzen?
  • Flache Site Hierarchie: Sind Seiten mit Informationen, die in den Suchresultaten erscheinen sollen, sind mit maximal drei Klicks von der Homepage erreichbar.
  • Sprechende URLs: Kryptischen URLs sind aufgelöst und werden als sprechende mit einer logischen Verzeichnisstruktur ausgegeben.
  • Analytics Code eingefügt: Der Web Analytics Tracking Code wurde auf die neuen Website übernommen, damit die Besucher- & Nutzerdaten nahtlose zur Verfügung stehen.
  • Robots.txt festgelegt: Nicht alles gehört in den Suchmaschinen-Index. Mit dem robots.txt wurde festgelegt, was im Index erscheinen soll und was nicht.
  • xml.Sitemap implementiert: Um die Indexierung der neuen Website zu beschleunigen, wurde eine xml Sitemap implementiert und bei den Webmaster Tools angemeldet!
  • Formular Versand geprüft: Die Formulare, die von der Website versandt werden, kommen bei der Zieladresse an.
  • 404 Seite steht bereit: Ist eine Seite nicht mehr verfügbar oder die URL wurde falsch eingegebene, gelangt der Besucher auf eine 404 Seite.
  • 301 Redirects eingerichet: Besucher, die über eine «alte» URL auf die Website zugreifen, werden mittels 301 Redirects auf eine adäquate neue umgeleitet.
  • Google Adwords Deeplinks angepasst: Mit dem Relaunch kommen neue URLs ins Spiel. Die Deeplinks der AdWords Anzeigen sind entsprechend anzupassen, sonst wird für Klicks auf eine 404 Seite bezahlt!
  • Prüfen der Messung von Conversions: Die Zieltrichter, Ziele und Ereignisse im Web Analytics Instrument sind weiterhin aktiv und liefern die gewünschten Konversion Daten?
  • Web Analytics Daten: Nach dem GoLive wurde mit dem Echtzeit Tracking von Google Analytics geprüft, dass die Daten erfasst werden.
  • Ladezeit der Pages: Die Pages werden innerhalb der Toleranzgrenzen der Suchmaschinen geladen.

 

Ein sanfter Relaunch schafft Freiraum

Es empfiehlt sich, den Relaunch nicht unmittelbar nach dem GoLive an die grosse Glocke zu hängen, sondern zuzuwarten, bis Sicherheit besteht, dass die Interaktionen auf Website einwandfrei funktionieren und die Sichtbarkeit in den Suchresultaten gewährleistet ist.

Diese Sicherheit, ob der Relaunch zum Erfolg wird oder ob Probleme dem Erfolg im Weg stehen, liefern u.a. Antworten auf die untenstehenden Fragen, welche mit Hilfe von Statistiken und Instrumenten (Web Analytics Tool, Google Webmaster Tools, Ranking Report) beantwortet werden können:

  • Hat sich die Sichtbarkeit der Website in den Suchresultaten verbessert?
  • Sind alle Pages im Google Index zu finden?
  • Haben sich die Werte für die Absprungrate, Besuchszeiten, Anzahl Seitenaufrufe pro Besuch und Zielerreichung verbessert?
  • Sind auf der Website ungültige Links vorhanden?
  • Was kann Google von der Website indexieren («Abruf wie durch Google» im Webmaster Tool)?

Sind all diese Test positiv ausgefallen, kann der Launch der neuen Website ohne Stress kommuniziert werden, da die Sicherheit besteht, dass alle Fehlerquellen ausgeschlossen sind.

Imre Sinka

dotpulse AG

TYPO3 Neos Code-Snippets Teil 4

Über das Schlüsselwort Code Snippets veröffentlichen wir Entwickler von dotpulse kleine Tipps und Tricks oder schlicht Gedankenstützen und Inputs für das effiziente Arbeiten oder Einsteigen in TYPO3 Neos.

Dynamisch auf den Package Key von der aktuellen Site zugreifen

Folgendes TypoScript erledigt eine einfache Aufgabe: Den Package Key der aktuellen Seite (z. B. Dotpulse.Theme) in einer Variabel speichern.

Den Datepicker mit einem relativen Datum vorfüllen

Da der Datepicker auf jQuery UI aufbaut, kann der Datepicker ganz einfach mit einem Wert im defaultValue vorausgefüllt werden:

WIAD – World Information Architecture Day

«Information Architecture are structures that we use to make sure that the information people need is easy to find and to understand. A practice dedicated to bringing understanding and order to the chaos that is the information that we produce in our everyday lives.» Soweit die Definition, wie sie an der Veranstaltung des WIAD Zürich aufgeführt war.

Mehr lesen