Home / Blog / WordPress / Relaunch-Checkliste: Step-by-Step Anleitung bis zum Go-live (inkl. SEO-Checkliste)

Relaunch-Checkliste: Step-by-Step Anleitung bis zum Go-live (inkl. SEO-Checkliste)

28.06.2019·von Gerrit Noppel zum Thema WordPress

Wir sind stolz darauf, dir den ausfĂŒhrlichsten Relaunch-Guide zu prĂ€sentieren, den das Internet bisher gesehen hat. Unsere Konzepter, SEOs, Designer und Entwickler haben ihre Köpfe zusammengesteckt, ihr geballtes Wissen zusammengetragen und heraus kam eine Schritt-fĂŒr-Schritt-Anleitung fĂŒr deinen Relaunch. Mit dieser Relaunch-Checkliste gelangst du sicher zum Ziel einer besseren Website, die deine Ziele erfĂŒllt!

Monatelange Arbeit liegt hinter dir, nur noch wenige Mausklicks bis zum Go-live der neuen Website. Wenn du jetzt Schweißperlen auf der Stirn hast und dich fragst, ob alle URLs richtig weitergeleitet wurden, dann hĂ€ttest du vorher lieber diesen Relaunch-Guide studieren sollen. Denn ein Relaunch ist immer ein Großprojekt, an dem viele Experten aus verschiedenen Fachbereichen zusammenarbeiten. Und diese Experten gilt es, perfekt zu koordinieren.

Relaunch Guide eBook downloaden

Gerade aus SEO-Sicht gibt es einige wichtige und vor allem umsatzrelevante Dinge zu beachten. Sogar große Player wie MediaMarktSaturn haben es mit dem Relaunch von Redcoon 2017 fertig gebracht, ihren Relaunch komplett in den Sand zu setzen. Nach dem Relaunch sind die wichtigsten Rankings steil in den Keller gerutscht. Die Sichtbarkeit auf Google war dahin und die Folge ein wirtschaftliches Desaster (nachvollziehbar anhand des Sichtbarkeitsindex von Sistrix – siehe Grafik).

Damit dich nicht dasselbe Schicksal ereilt, haben wir unseren kompletten Relaunch-Prozess fĂŒr dich strukturiert und zusammengefasst. Und mit „komplett“ meinen wir wirklich jeden einzelnen Arbeitsschritt!

Wichtig: Nicht bei jedem Webprojekt setzen wir auch alle Schritte um. Arbeitsschritte fallen z. B. dann weg, wenn der Kunde sie explizit ausklammert oder bereits selbst durchgefĂŒhrt hat. Wenn ein Kunde z. B. mit seinem Corporate Design und Logo komplett zufrieden ist, arbeiten wir selbstverstĂ€ndlich mit diesen Vorlagen. 

Dennoch wollen wir eine umfassende Relaunch-Anleitung bieten, die als Projektplan fĂŒr jeden Relaunch genutzt werden kann. Viel Spaß!

1. Was ist ein Relaunch?

Als Relaunch bezeichnet man ganz allgemein die Wieder- oder NeueinfĂŒhrung eines Produktes. Ziel ist es, ein verbessertes Produkt auf den Markt zu bringen. Im Falle einer InternetprĂ€senz wollen wir dem Benutzer eine verbesserte Website prĂ€sentieren, die noch genauer auf seine BedĂŒrfnisse eingeht und ihm ein angenehmeres Surferlebnis bietet. 

Alexander Holl von 121 Watt definiert den Website-Relaunch wie folgt:

“Eine signifikante VerĂ€nderung der User-Experience und Funktionsweise einer Website im Sinne des Unternehmensziels.” (Quelle) 

Wir mögen die Definition, weil sie explizit die Unternehmensziele berĂŒcksichtigt. Auch wenn wir in diesem Guide lang und breit den Relaunch auseinandernehmen, ist dein Ziel nicht „eine neue Website“. Sie ist lediglich das Mittel zum Zweck fĂŒr die ĂŒbergeordneten Unternehmensziele. Was bringt das beste Webdesign, wenn es nicht der Zielerreichung dient.

Ein Relaunch sollte niemals Selbstzweck sein.

Aber Relaunch ist nicht gleich Relaunch. Es gibt verschiedene Möglichkeiten, die eigene Website zu erneuern.

 

1.1 Design-Relaunch

Beim Website-Redesign behalten wir das technische GrundgerĂŒst deiner Website bei. Content-Management-System (CMS), Informationsarchitektur und redaktionelle Inhalte bleiben bestehen. Nur das Webdesign bekommt einen optischen Facelift verpasst. 

Wir ĂŒberarbeiten hierbei das komplette Design mit Bildern, Icons, Navigation, Buttons und Schriften. Auf Wunsch designen wir auch das Logo neu und bauen Animationen auf der Website ein, die fĂŒr Dynamik sorgen. 

Bei WordPress bedeutet das zum Beispiel, dass ein neues Theme entwickelt wird, wÀhrend Inhalte wie BeitrÀge und Seiten erhalten bleiben. Sie erscheinen nach dem Redesign lediglich in neuem Gewand. 

 

1.2 Technik-Relaunch

Beim Technik-Relaunch bleiben Inhalte und Design bestehen, wÀhrend das technische Framework im Hintergrund neu aufgesetzt wird. Die Website sieht also nach dem Technik-Relaunch genauso aus wie vorher, lÀsst sich aber hinter den Kulissen besser bearbeiten, ist performanter oder sicherer. 

HÀufig stellen wir hierbei auf ein Content-Management-System (CMS) wie WordPress oder TYPO3 um, damit du nach dem Relaunch deine Inhalte selbst Àndern und pflegen kannst. 

 

1.3 Komplett-Relaunch

Beim Komplett-Relaunch ĂŒberarbeiten wir sowohl das Design als auch die Technik deiner Website. Außerdem konzipieren wir deine Website anhand deines GeschĂ€ftsmodells (wenn nötig) völlig neu. Dabei entwickeln wir die optimale Informationsarchitektur fĂŒr User und Suchmaschinen und setzen ggf. dynamische Webanwendungen wie Tarifrechner oder Buchungssysteme um.

Wenn wir im Folgenden von “Relaunch” sprechen, dann meinen wir immer den Komplett-Relaunch der Website, weil er die hĂ€ufigste Art des Relaunchs ist.

 

2. Wann solltest du relaunchen?

Wenig zufriedenstellend, aber die Antwort lautet: „Es kommt darauf an.“ Wir halten nicht viel von Faustregeln Ă  la “Website-Relaunch alle 4 Jahre”. NatĂŒrlich ist der Lebenszyklus einer Website endlich, aber jede Website ist unterschiedlich und hat ihre eigenen Pain-Points. Die eigene Website zu relaunchen, nur weil sie dir nicht mehr “gefĂ€llt”, ist ebenfalls eine schlechte Idee.

Persönliche Meinungen und GeschmĂ€cker sollten niemals Entscheidungs­kriterien fĂŒr einen Website-Relaunch sein. Deine Website muss deine Kunden zufriedenstellen – nicht dich. 

Chefs neigen hĂ€ufig dazu, der eigenen Website ĂŒberdrĂŒssig zu werden. Dann tönt es vom Chefsessel: “Die Startseite ist total langweilig.” Aber womöglich finden sich die Besucher wunderbar auf der Startseite zurecht und schĂ€tzen das schnörkellose Design, weil sie schnell zum gewĂŒnschten Ziel navigieren können. 

Auch wenn dein Wettbewerber gerade eine schicke neue Website gelauncht hat, ist das kein Grund zur Panik. Oftmals herrscht ein diffuses GefĂŒhl vor, dass mal wieder “etwas Neues her muss”. Widerstehe diesem Aktionismus und begrĂŒnde deinen Relaunch lieber auf Fakten. 

 

2.1 Schlechte Nutzersignale

Daumen hoch oder Daumen runter – was im alten Rom ĂŒber Leben und Tod entschied, wird auch im Internet praktiziert. Die Nutzer stimmen jederzeit (indirekt) ĂŒber die QualitĂ€t deiner Website ab. Du musst die Signale nur richtig deuten.

UmsatzrĂŒckgang allein ist z. B. kein ausreichender Indikator, da hier ganz unterschiedliche GrĂŒnde eine Rolle spielen können. Besser geeignet sind spezielle Website-Indikatoren:

  • Deine Website verliert stetig an Nutzern. Nutzerflucht ist ein schlechtes Zeichen fĂŒr deinen Webauftritt. ÜberprĂŒfe die Zahlen regelmĂ€ĂŸig in Google Analytics und differenziere zwischen saisonale Tiefs und einem generellen AbwĂ€rtstrend.
  • Du rutschst in den Google-Rankings immer weiter nach hinten. Mit fallenden Rankings geht dir meist auch Umsatz verloren. Auch hier solltest du regelmĂ€ĂŸig mithilfe der Google Search Console die wichtigsten Rankings kontrollieren. 
  • Die Conversion-Rates sinken stetig. Eine moderne Website muss den User zu einer Handlung animieren. Wenn deine Kontaktanfragen, Bestellzahlen oder Leads sinken, musst du dir Gedanken ĂŒber deine NutzerfĂŒhrung machen. Weiß der User, was er tun soll?
  • Kunden beschweren sich ĂŒber MĂ€ngel wie fehlende Übersichtlichkeit, mangelnde FunktionalitĂ€t oder schlechten Content. Die Tatsache, dass sich jemand die MĂŒhe macht, dir die MĂ€ngel deiner Website mitzuteilen, sollte dich hellhörig fĂŒr VerĂ€nderungen machen. Im Bestfall nimmst du soviel Feedback wie möglich mit. Gerade wenn es negativ ist, hilft es dir weiter.

 

2.2 Die Kraut-und-RĂŒben-Website

Eine Website, an der verschiedene Dienstleister gewerkelt haben, kann sich schnell zu einem Code-Ungeheuer entwickeln. Niemand weiß mehr genau, was der VorgĂ€nger wo und wie implementiert hat. Die Website ist hĂ€ufig fehlerhaft und der dahinterliegende Code gleicht einem undurchdringlichen Dschungel. Wir nennen dieses PhĂ€nomen die Kraut-und-RĂŒben-Website. 

Bei diesen zerschossenen Websites werden permanent nur BrĂ€nde gelöscht und Anzeigefehler behoben. Sie sind zu vergleichen mit einem Haus mit morschem Fundament, das durch seitliche StĂŒtzen gerettet werden soll. Eigentlich hilft nur noch der Neubau – also der Relaunch –, da die stĂ€ndigen Reparaturarbeiten zu einem immer grĂ¶ĂŸeren Kostenfaktor werden. 

HĂ€ufig sind Baukastensysteme wie der Visual Composer ein Grund fĂŒr derartige Website-Ungeheuer. Das Verschieben der Drag-&-Drop-Elemente dieser Baukastensysteme erzeugt jedes Mal automatisch Code. Das fĂŒhrt auf Dauer zu Chaos. Das Ergebnis im Frontend sind Anzeigefehler wie abgeschnittene Texte, falsche responsive Stufen oder nicht mehr kontrollierbare AbstĂ€nde. 

Das Hauptproblem: Der unsaubere Code bleibt oft auch dann bestehen, wenn z. B.  Plugins deaktiviert werden. Eine Bereinigung des Codes ist manuell nicht mehr möglich. Es bleibt nur der Website-Relaunch, der zwar kostet, aber auf Dauer Geld einsparen wird.

 

2.3 Website-Relaunch-Checkliste

Die Hard-Facts fĂŒr den Relaunch haben wir dir in einer anschaulichen Infografik zusammengetragen: 

Relaunch Checkliste

NatĂŒrlich kann auch eine neue unternehmensinterne Ausrichtung fĂŒr einen Relaunch sprechen. Ein neuer Name, eine neue Philosophie, ein neues Corporate Design oder neue Produkte mit neuen Zielgruppen sprechen manchmal fĂŒr eine komplett neue Websitearchitektur.

 

3. Relaunch-Strategie

3.1 Ziele des Website-Relaunchs

Ein Relaunch-Projekt kann viele Ziele haben. HĂ€ufig wird als einziges Ziel “mehr Umsatz” genannt. Das ist jedoch viel zu allgemein. Je enger du deine Ziele definierst, desto besser kannst du den Erfolg im Nachhinein messen. Ziele können sein:

  • höhere Sichtbarkeit im Web
  • mehr Traffic durch höhere Suchmaschinenplatzierungen 
  • mehr Anfragen/Verkäufe über den digitalen Vertriebsweg
  • die eigene Positionierung schĂ€rfen  
  • die Kundenbindung stĂ€rken
  • die Conversion-Rate erhöhen
  • Leads generieren 
  • Employer-Branding stĂ€rken

Bevor die erste Zeile Code geschrieben wird, mĂŒssen diese Ziele klar benannt werden. Das schafft Klarheit fĂŒr alle Beteiligten. Von diesem Zeitpunkt an wird jede Maßnahme, jede Idee und jedes Testing an diesen Zielen gemessen. Bringt uns eine Maßnahme dem gemeinsam definierten Ziel nicht nĂ€her, verwerfen wir sie.

 

3.2 Status Quo

Bevor in deinem Kopf ein Bild deiner neuen Website entsteht, steht eine Bestandsaufnahme der alten Website an. Die einzelnen Unterseiten der Website mĂŒssen auf ihre Leistung geprĂŒft werden. Gerade bei Onlineshops oder Websites mit vielen stark rankenden Unterseiten/Blogartikeln sind diese Infos Gold wert. FĂŒr die Analyse des Status Quo nutzen wir hauptsĂ€chlich Google Analytics, die Google Search Console und Crawler wie den Screaming Frog SEO Spider. 

Wichtige KPIs (Key Performance Indicator) sind:

  • Traffic (Seitenaufrufe, Nutzer, Sitzungen)
  • Durchschnittliche Sitzungsdauer
  • Rankings in den Top 10
  • Conversion-Rates
  • Link-Score (interner Page-Rank auf einer Skala von 0-100)

Durch diese Faktoren lĂ€sst sich einschĂ€tzen, welche die Top-Einstiegsseiten sind und welche Seiten fĂŒr einen Großteil des Umsatzes verantwortlich sind. Diese Erkenntnisse helfen bei der Entscheidung, welche Seiten ausgebaut, zusammengefĂŒhrt oder ggf. gelöscht werden können. 

 

3.3 Wettbewerbsanalyse

NatĂŒrlich sollte deine neue Website dein Alleinstellungsmerkmal (USP) reprĂ€sentieren und damit unverwechselbar sein. Dennoch lohnt es sich immer, einen Blick auf die Konkurrenz zu werfen, wenn der Website-Relaunch ansteht. Gerade die Konkurrenten, die fĂŒr die wichtigsten Suchbegriffe ganz vorne im Google-Ranking stehen, scheinen mit ihrem Webauftritt irgendetwas richtig zu machen. FĂŒr die Konkurrenzanalyse nutzen wir das SEO-Tool Sistrix.

Sistrix Relaunch

Wenn du viel Wert auf eine hohe Sichtbarkeit in Google legst, solltest du genau wissen, fĂŒr welche wichtigen Keywords deine Konkurrenten ranken. Weitere Infos hierzu unter 3.5 Keywordrecherche.

Diese 4 Fragen solltest du dir außerdem stellen:

  1. Wie positionieren sich meine Konkurrenten?
  2. Welches Design nutzen sie?
  3. Wie kommunizieren sie mit der gemeinsamen Zielgruppe?
  4. Wie ist die Websitearchitektur mit Unterseiten und Navigation aufgebaut? 

Wenn deine Konkurrenz hier Fehler macht, solltest du es besser machen. Ansonsten hilft es, sich an Positivbeispielen zu orientieren, ohne zu kopieren.

 

3.4 Zielgruppe definieren

“Der Köder muss dem Fisch schmecken, nicht dem Angler.” Dieser etwas abgedroschene Marketingspruch hat einen wahren Kern. Deine neue Website soll nicht vorrangig dir gefallen, sondern deiner Zielgruppe. 

DafĂŒr musst du deine gesamte Kommunikation, dein Erscheinungsbild und deinen Content an deine Zielgruppe anpassen. Im B2C lohnt es sich, eigene Personas zu erstellen, die exemplarisch fĂŒr den Kunden stehen. Aber auch im B2B-GeschĂ€ft entscheiden letztendlich Menschen ĂŒber den Kauf oder eine Buchung, keine abstrakten Unternehmen. 

Persona Beispiel
Ohne die Definition der passenden Zielgruppe, ihrer WĂŒnsche und Probleme tappst du mit deiner Website (und im gesamten Marketing) im Dunkeln. Schaffe echten Nutzen fĂŒr deine Website-Besucher und löse ihre Probleme und Informationsdefizite, damit dein Webauftritt nicht zur digitalen WerbebroschĂŒre verkommt.

 

3.5 Keyword-Recherche

Die Keyword-Recherche ist die Grundvoraussetzung jeder SEO-Strategie. Das Ergebnis jeder Keywordrecherche ist das Keyword-Set – eine Sammlung der wichtigsten Suchbegriffe, fĂŒr die deine Website ranken soll. Im ersten Schritt schauen wir auf Leistungen/Produkte und analysieren, welche Suchbegriffe deine potenziellen Kunden hierfĂŒr auf Google verwenden.

Keywordrecherche Relaunch

Dabei fokussieren wir zuerst transaktionale Keywords: Suchbegriffe, bei denen der User dem Kaufabschluss sehr nah ist. Zum Beispiel:

  • „reise bangkok buchen“
  • „digitalagentur köln“
  • „bartöl kaufen“
  • „bewerbungsfotos köln“

Mithilfe der transaktionalen Keywords lassen sich wichtige RĂŒckschlĂŒsse auf die Architektur der Website ziehen. Mehr hierzu unter 4.4 Informationsarchitektur.

Im zweiten Schritt fokussieren wir uns auf wichtige informationelle Keywords. Diese sind deutlich weiter oben im Sales-Funnel angesiedelt und deshalb vor allem fĂŒr Blogartikel oder ausfĂŒhrliche Infoseiten wichtig.

AIDA Modell

Bei informationellen Suchanfragen will der Kunde – wie der Name schon sagt – sein InformationsbedĂŒrfnis stillen. Der Kunde möchte „etwas wissen“ und ist möglicherweise noch weit vom Kaufabschluss (ACTION) entfernt. Beispiele sind:

  • „bangkok impfungen“
  • „wordpress agentur preise“
  • „bartöl hautvertrĂ€glichkeit“
  • „outfit bewerbungsfotos“

Der Nutzer möchte hier erst einmal Informationen zum Produkt oder zur Dienstleistung sammeln, um sich dann fĂŒr eines zu entscheiden. Dieses BedĂŒrfnis kannst du mit Infoartikeln stillen und dich gleichzeitig als Experte auf deinem Gebiet positionieren.

 

4. Website-Relaunch Konzept  

4.1 Website-Relaunch Projektplan

Eine gute Planung ist das A und O eines gelungenen Webprojekts. Den Überblick ĂŒber das Webprojekt behĂ€lt bei uns stets das Projektmanagement – die Speerspitze unserer Agentur. Ob ZeitplĂ€ne, Deadlines oder Wasserstandsmeldungen, unser Projektmanagement weiß stets ĂŒber den aktuellen Projektstand Bescheid.

Einen Fehler in der Planung zu beheben kostet 1 Euro, in der Konzeption 10 Euro, in der Umsetzung 100 Euro und nach dem Launch 1.000 Euro. 

Wir setzen auf eine ehrliche Kommunikation auf Augenhöhe. Niemand hat etwas davon, wenn um den heißen Brei herum geredet wird oder falsche Erwartungen entstehen. Als Freunde offener Worte hören wir genau zu und geben stets ehrliches Feedback zu Ideen und VorschlĂ€gen.   

In der Planungsphase erstellen wir zusammen einen Zeitplan mit Meilensteinen fĂŒr Webdesign und Webentwicklung. Dieser Zeitplan muss fĂŒr beide Seiten realistisch ein. Der Relaunch einer hochkomplexen Website mit der Kundenvorgabe „Go-live in zwei Monaten“, bei der wir Abstriche bei der QualitĂ€t machen mĂŒssten, ist mit uns nicht zu machen. Unser eigener QualitĂ€tsanspruch hat hier PrioritĂ€t.

 

4.2 Relaunch-Kosten

Die Anforderungen an eine moderne Unternehmenswebsite sind in den letzten Jahren stark gestiegen. FĂŒr die perfekte Seite ist eine intensive, interdisziplinĂ€re Zusammenarbeit zwischen Konzeptern, SEOs, Projektmanagern, Designern und Entwicklern nötig.

Wenn du noch genauer wissen möchtest, mit wie viel Budget du fĂŒr eine Website rechnen musst, empfehlen wir dir unseren Blogbeitrag: Was kostet eine Website? 6 GrĂŒnde, warum es mehr als 1.000 Euro sind. Wir planen in der Regel mit einem Mindestbudget von 10.000 Euro fĂŒr einen Komplett-Relaunch einer Website.

Relaunch Guide eBook downloaden

Damit auch Kunden mit kleinem Budget in den Genuss einer leistungsstarken Website kommen, bieten wir die go-digital-Förderung des Bundesministerium fĂŒr Wirtschaft und Energie (BMWi) an. Mit go-digital können wir eine Förderhöhe von 50 Prozent der anfallenden Kosten gewĂ€hren – bis zu 11.000 Euro. Die HĂŒrden fĂŒr den Erhalt der Förderung sind relativ niedrig und den Papierkram ĂŒbernehmen wir ebenfalls. Mehr dazu erfĂ€hrst du hier: go-digital: Bis zu 11.000 Euro Zuschuss mit Friendventure.

 

4.3 Content-Management-System

Die Wahl des optimalen Content-Management-Systems (CMS) hĂ€ngt stark von deinem individuellen Webprojekt ab. Gerne sprechen wir hierzu mit dir ĂŒber alle Vor- und Nachteile.

Bei contentstarken Seiten, bei einem großen Team aus Entwicklern und Content-Managern oder einer SAP-Anbindung bietet sich hĂ€ufig TYPO3 als CMS an. Hat dein Webprojekt ein Budget von unter 25.000 Euro, ist dir eine intuitive Bedienung wichtig oder setzt du auf eine Blog-Strategie, dann bist du mit WordPress meist besser bedient. 

Wordpress vs TYPO3
Wenn du mehr Infos darĂŒber haben möchtest, welches CMS am besten zu deinem Website-Relaunch passt, wirf gerne einen Blick in unseren ausfĂŒhrlichen Blogartikel: WordPress vs. TYPO3 – welches CMS ist das richtige fĂŒr dein Unternehmen? 

 

4.4 Informationsarchitektur

Die Architektur einer Website ist wie die Bauskizze eines Hauses. Beim Hausbau stellt sich der Architekt die Fragen: Wie groß soll das Haus sein? Wo platziere ich Bad und KĂŒche? Wo ist die Treppe zum Keller? 

Analog fragt sich der Website-Konzepter, wo er Produktseiten platziert, wo der Besucher eine Kontaktanfrage stellen kann oder auf welcher Hierarchieebene die Referenzen zu finden sind.

Zu Beginn erstellen unsere Konzepter in enger Abstimmung mit unseren SEO-Managern eine Sitemap, die anzeigt, auf welcher Hierarchieebene sich welche Unterseite befindet und wie die Seiten untereinander verlinkt sind. Ziel ist es, dem Nutzer eine intuitive Navigation zu ermöglichen. 

Sitemap strukturell Friendventure
Wir versuchen immer, die Inhalte auf einer möglichst flachen Seitenhierarchie unterzubringen. Flache Hierarchien ermöglichen dem User, Inhalte mit wenigen Mausklicks zu erreichen. Onlineshops mit vielen Kategorie- und Produktseiten gehen zwangsweise tiefer in der Hierarchie, aber auch hier muss eine klare Struktur herrschen.

Wir plĂ€dieren außerdem fĂŒr Websites mit schlanken URL-Strukturen. Wenige content-starke Seiten mit guten Rankings sind besser als viele Seiten mit wenig Content und mittleren Rankings. Wenige Seiten haben außerdem folgende Vorteile:

  • Deine Seite ist in der Navigation ĂŒbersichtlicher fĂŒr den User.
  • Der Google-Crawler hat es einfacher, (neue) Inhalte zu indexieren.
  • Du hast weniger Arbeit bei der Contentpflege und die Möglichkeit, dich auf die wichtigen Seiten zu fokussieren.
  • Bessere Verteilung von Link-Juice fĂŒr die einzelnen Seiten
  • Weniger Potenzial fĂŒr Duplicate Content (doppelter Inhalt), den Google als schlechtes Signal werten kann.
  • Keine Seiten mit sehr wenig oder unbrauchbarem Content (Thin Content). Diesen wertet Google ebenfalls als schlechtes Signal fĂŒr deine Website.
  • Weniger Aufwand beim nĂ€chsten Relaunch-Projekt 🙂

 

4.5 Navigation und interne Verlinkung

Die MenĂŒnavigation ist nicht nur fĂŒr Besucher relevant, sondern auch fĂŒr den Google-Bot. Dieser crawlt deine Website, um Inhalte zu indexieren und zu bewerten. Deine Verlinkung in der Navigation bestimmt, wie viel Link-Juice die einzelnen Unterseiten erhalten. Wichtige Seiten sollten prominent in der Hauptnavigation und an weiteren Stellen verlinkt werden. Damit erhalten sie viel Ranking-Power von Google. 

Linkjuice Friendventure Website
Der Ankertext, also der verlinkte Begriff, ist ebenfalls ein wichtiges Signal fĂŒr die Suchmaschine. Er signalisiert, welcher Suchbegriff fĂŒr die Zielseite relevant ist. Eine Verlinkung mit dem Ankertext “hier” ist deshalb keine gute Idee.

Bei tieferen Website-Strukturen ist es sinnvoll, eine Breadcrumb-Navigation einzubauen. Bei der Breadcrumb-Navigation wird der hierarchische Pfad zur Seite ganz oben auf der Seite eingeblendet. Dieses Navigationselement verbessert die User Experience, da der User jederzeit weiß, auf welcher Hierarchieebene er sich befindet.

Zalando Breadcrumb
 

4.6 Seitentypen

FĂŒr das Konzept deiner Website ist es wichtig, die Seitentypen zu kennen, die fĂŒr dich relevant sind. Jede Website hat eine Startseite, aber darĂŒber hinaus gibt es ganz unterschiedliche Seitentypen mit unterschiedlichen Zwecken und Zielen:

  • Die Startseite muss in wenigen Hundertstelsekunden optisch ĂŒberzeugen, aber auch sofort zeigen, worum es bei deinem Business geht. Eine sinnvolle Verlinkung auf die wichtigsten Inhalte leitet den User entsprechend weiter. Aus SEO-Sicht solltest du dich auf ein Hauptkeyword festlegen. Auf friendventure.de haben wir uns bei der Startseite auf das Hauptkeyword „digitalagentur“ festgelegt.
  • Info- und Ratgeberseiten bieten ausfĂŒhrliche Inhalte mit Mehrwert fĂŒr den User. Der Verkauf von Produkten oder Dienstleistungen steht hier eher im Hintergrund. Wenn du zum Beispiel ökologische Teppiche verkaufst, kannst du Infoseiten zu Materialien, Produktionsbedingungen und AllergievertrĂ€glichkeit produzieren. Hier ist die Recherche von sinnvollen informationellen Keywords wichtig.
  • Formularseiten geben dem User die Möglichkeit, dein Unternehmen schnell und problemlos zu kontaktieren. Wichtig ist hier, so viele Formularfelder wie nötig und so wenige wie möglich zu verwenden, um Interessenten nicht abzuschrecken. Bei einer Kontaktanfrage sind Titel, Adresszusatz und Faxnummer uninteressant.
  • Blogartikel behandeln ein bestimmtes (aktuelles) Thema und sind wie ein journalistischer Artikel aufgebaut. Auch hier stehen Verkauf und Produkt im Hintergrund. Eher sollen die Probleme des Nutzers auf Basis wichtiger informationeller Keywords gelöst werden.
  • Die Über-uns-Seite bietet dir die einzigartige Möglichkeit, dem Besucher dein Unternehmen vorzustellen. Gerade bei Dienstleistungen oder höherpreisigen Produkten sind die Werte des Unternehmens relevant fĂŒr die Kaufentscheidung.
  • Die Karriereseite richtet sich explizit an Bewerber. Ein sympathischer Auftritt mit authentischen Einblicken ins Unternehmen ist in Zeiten des FachkrĂ€ftemangels Gold wert. Mehr zum Thema Karriereseite erfĂ€hrst du in unserem Blogartikel Die perfekte Karriereseite: Mit diesen Tipps erhĂ€ltst du mehr und bessere Bewerber.
  • Produktseiten/Landingpages stellen das Produkt oder eine bestimmte Dienstleistung ausfĂŒhrlich dar und sollen aus bloßen Besuchern zahlende KĂ€ufer machen. Dazu mĂŒssen alle Fragen rund um das Produkt und zur Lieferung beantwortet werden. Hier kommen die transaktionalen Keywords aus der Keywordrecherche zur Anwendung. Ein gutes Beispiel fĂŒr eine Produktseite ist unsere Landingpage zu WordPress.
  • Kategorieseiten strukturieren dein Angebot im Onlineshop. Sie lassen den User vergleichen, filtern oder nach Infos suchen. Sie sollten mehr als nur Durchgangsseiten zu den Produktseiten sein.

Im gemeinsamen GesprĂ€ch klĂ€ren wir, welche Seitentypen fĂŒr die Erreichung deiner Ziele wichtig sind.

 

4.7 API-Schnittstellen

Die Application-Programming-Interface (API) ist eine Programmierschnittstelle, die eine Anbindung an andere Softwaresysteme bereitstellt. Die VerknĂŒpfung von Datenbanken oder externen Systemen ĂŒber API-Schnittstellen bietet zahlreiche Möglichkeiten, die Experience deiner User zu verbessern. Möglich sind folgende VerknĂŒpfungen mit deiner Website:

  • Anbindung eines ERP-Systems (Enterprise-Resource-Planning) wie Sage, SAP oder DATEV
  • Anbindung eines CRM-Systems (Customer-Relationship-Management) wie Salesforce, Pipedrive oder Zoho
  • Anbindung an externe Plattformen wie ImmoScout24, eBay und Amazon   
  • Anbindung an Newsletter-Tools wie MailChimp, Newsletter2Go oder CleverReach
  • Einbindung von Social-Media-Inhalten, z. B. von Facebook, Twitter, LinkedIn, Pinterest oder Reddit
  • Einbettung von Videos – z. B. von YouTube oder Vimeo
  • Einbindung von Bewertungen von Google Maps, TripAdvisor, Jameda und Ă€hnlichen Bewertungsplattformen

 

4.8 Modularer Aufbau mit Advanced Custom Fields

Bei Friendventure arbeiten wir mit dem WordPress-Plugin Advanced Custom Fields (ACF). Wir definieren mithilfe des Plugins vorgefertigte Module, die von UX-Designern entworfen und anschließend von Entwicklern programmiert werden. Das spart Ressourcen, da sich Grundelemente auf der Website wiederholen.

Bei TYPO3 arbeiten wir mit der Extension Gridelements, sodass der Content-Manager selbststĂ€ndig Grids anlegen kann (z. B. 50:50. 33:33:33, 75:25 etc.). FĂŒr Contentmodule (in TYPO3: Contentelemente) nutzen wir sogenannte FCEs (Fluid Content Elements). Diese Module (in TYPO3: Elemente) können spĂ€ter im Backend verĂ€ndert und mit Content gefĂŒllt werden.

Diese Module (in TYPO3: Elemente) sind z. B. vorgefertigte Text-Bild-Anordnungen oder alle erdenklichen Design-Kombinationen, die vom Content-Manager spĂ€ter mit Inhalt befĂŒllt werden können (mehr dazu unter 6.2 Programmierung).

Durch diesen modularen Aufbau wird sichergestellt, dass der Content-Manager sich nicht mit dem Basisdesign der Website beschĂ€ftigen muss und es dabei womöglich zerschießt. Die Aufgaben von Designern, Programmierern und Content-Managern grenzen wir hierdurch klar voneinander ab. Ein Designer soll nicht programmieren und ein Content-Manager nicht designen.

 

5. Layout & Webdesign

5.1 Corporate Design

Das Webdesign muss zum Gesamtbild der Marke passen und die Zielgruppe ansprechen. Im Optimalfall existiert bereits ein Corporate Design, an dem wir uns orientieren. Im Corporate Design sind vorgegeben:

  • Farbwelten 
  • Schriftarten 
  • Bildsprache & Look
  • Logos, Bilder, Illustrationen und Icons
  • Grafische Elemente wie VerlĂ€ufe und Muster

Um MissverstÀndnisse zwischen Designern und Entwicklern zu vermeiden, sollten diese Elemente in einem Styleguide festgehalten werden. Hiermit kannst du sicher sein, dass alle Veröffentlichungen, Dokumente und Medien ein einheitliches Design haben.

Gerne ĂŒbernehmen wir auch das Logo-/Corporate-Design fĂŒr dein Unternehmen. In unserem Blogartikel zum Logo Redesign fĂŒr das Hotel Barbarossa Classic zeigen wir exemplarisch den kompletten Entwicklungsprozess des Logodesigns.

 

5.2 Responsive Webdesign

Alle unsere Webprojekte setzen wir selbstverstÀndlich mit modernem Responsive Webdesign um. 

„Responsive“ ist aber nicht gleich „optimiert fĂŒr MobilgerĂ€te“. Responsive meint erst einmal nur die Anpassung des Designs an das jeweilige EndgerĂ€t. Diese vollautomatische responsive Anpassung vieler Themes oder auch beim Visual Composer neigt zur FehleranfĂ€lligkeit. WillkĂŒrliche AbstĂ€nde, abgeschnittene Texte und fehlerhafte Bilddarstellungen sind die Folge. 

Deshalb setzen wir bei Friendventure auf ein individuelles Responsive Webdesign. FĂŒr ein perfektes mobiles Surferlebnis nehmen wir jedes Modul deiner Website genau unter die Lupe und passen die Darstellung aller Websiteinhalte individuell fĂŒr Smartphones und Tablets an.

adidas projektvorschau
Eine ausgezeichnete mobile User Experience ist in Zeiten von zunehmender mobiler Internetnutzung nicht mehr nur “nice to have”, sondern ein “must have”. Google crawlt Seiten mittlerweile zuerst in der mobilen Ansicht (siehe Mobile First Index), weshalb Mobile Friendliness ein wichtiger Rankingfaktor ist. 

 

5.3 User Experience Design (UX)

Egal ob du Wasserpumpen, persische Teppiche oder Finanzdienstleistungen anbietest: Wir sind davon ĂŒberzeugt, dass wir jedes Produkt, Unternehmen oder jede Dienstleistung – so trocken sie auf den ersten Blick erscheinen mögen – als spannendes Nutzererlebnis in Szene setzen können. Denn nur mit einem spannenden und funktionalen UX-Design kann eine vertrauensvolle Beziehung zum Besucher aufgebaut werden.

Wir entwickeln die User Experience (UX) deiner Website auf Basis von drei Faktoren:

  • ZugĂ€nglichkeit: Ist die Website von allen EndgerĂ€ten gleichermaßen zugĂ€nglich? LĂ€dt sie in einer angemessenen Zeit?
  • Usability: Ist die Bedienung intuitiv? Sind alle Funktionen einwandfrei durchfĂŒhrbar und alle Inhalte einfach erreichbar? Ist die Website selbsterklĂ€rend? 
  • Ästhetik und Schönheit: Ist die Website optisch ansprechend? UnterstĂŒtzt das Design die Marke und die Unternehmenskommunikation? 

NatĂŒrlich bleibt die Nutzererfahrung immer subjektiv. Ein Ü60-Senior mit wenig Erfahrung im Web wird eine ganz andere Nutzererfahrung haben als ein Mitglied der Generation Y oder Z. Auch wenn sie exakt auf der gleichen Website surfen.

NatĂŒrlich orientieren wir uns beim Design immer an der Zielgruppe, versuchen aber stets einen Mittelweg zu schaffen, der junge sowie Ă€ltere User gleichermaßen anspricht.

 

5.4 Bildmaterial

Im gemeinsamen GesprĂ€ch klĂ€ren wir mit dir, welches Bildmaterial wir fĂŒr die neue Website nutzen. Ist bereits Bildmaterial vorhanden? Entspricht dieses Material den Anforderungen der neuen Website oder setzen wir lieber auf komplett neues visuelles Material? Hier gibt es einige Möglichkeiten:

  • Hochwertige Stockbilder: Wir sagen bewusst “hochwertig”, denn es gibt zu viele Seiten im Web mit immer gleichen, nichtssagenden Klischeefotos. Wir nutzen kostenpflichtige Bilddatenbanken und recherchieren hier nach dem passenden Material. Dabei achten wir stets darauf, dass alle Rechte fĂŒr die Nutzung im Web vorhanden sind.
  • Selbsterstellte Fotos: Das Bildmaterial von einem professionellen Fotografen erstellen zu lassen ist deutlich teurer, aber der Aufwand lohnt sich meist. Nur durch ein Shooting kann garantiert werden, dass alle Fotos den gleichen Look haben. Erst dadurch wird die Bildsprache zu einer runden Sache, was auch dem User bewusst oder unterbewusst auffĂ€llt. Gerade wenn es um Produktfotografie geht, sind gestochen scharfe und perfekt ausgeleuchtete Produktbilder ein gutes Verkaufsargument.
  • Illustrationen & Icons: Wer auf teure Fotos verzichten will, kann individuelle Illustrationen von professionellen Designern erstellen lassen. Die Website des Filehosting-Dienstes Dropbox oder der E-Mail-Marketing-Anbieter Mailchimp verzichten z. B. fast vollstĂ€ndig auf Fotos und setzen voll auf Illustrationen.  

Die Bilderwelt sollte dein Unternehmen authentisch darstellen und fĂŒr AtmosphĂ€re sorgen. Verzichte aber darauf, ĂŒbertrieben glĂŒckliche Menschen auf Stockfotos zu zeigen, die in die Kamera grinsen. Das wirkt einfach unnatĂŒrlich. 

Wie du Bilder fĂŒr die Suchmaschine optimierst, erfĂ€hrst du unter 8.6 Bilder-SEO.

 

5.5 Wireframes

Unsere Designer skizzieren den Aufbau der Website zuerst mithilfe von Wireframes. Wireframes sind schematische EntwĂŒrfe einer Website mit den grundlegenden Elementen. 

Die grafische Ausgestaltung spielt hier noch keine Rolle. Deshalb kommen Wireframes auch ohne Farben und Bilder aus. Sie zeigen lediglich, an welcher Position sich wichtige Website-Bausteine wie Headlines, Texte, Bilder, Icons, CTAs und Logos befinden. 

Diese Grobstruktur dient als Grundlage fĂŒr das Webdesign. Außerdem geben Wireframes dir als Kunde einen ersten Einblick in den Seitenaufbau und die Möglichkeit, ÄnderungswĂŒnsche zu Ă€ußern. 

Wireframes Relaunch
 

5.6 Prototyping

Wenn der grobe Seitenaufbau abgestimmt ist, starten wir mit dem eigentlichen Webdesign. Zuerst gestalten wir die Startseite, wobei das Design fĂŒr Desktop und Mobile parallel entwickelt wird.

Das ausgearbeitete User Interface des finalen Designs stellen wir dir mithilfe eines klickbaren Prototyps in InVision vor. Diese Prototypen (auch Clickdummys genannt) zeigen den Webdesignentwurf und simulieren außerdem die möglichen Interaktionen auf der Website. Du kannst dich also fröhlich durch die Seite durchklicken. Hier ein deutlich abgespeckter, mobiler Beispiel-Clickdummy eines Prototype-Tools.  

Invision Logo
Außerdem bekommst du als Kunde möglichst frĂŒh einen Einblick in das Produkt und den Entwicklungsprozess. Durch dein frĂŒhes Feedback und den stĂ€ndigen Austausch können wir viel flexibler und agiler arbeiten. Letztendlich optimieren wir durch das Prototyping alle weiteren Prozesse, weil spĂ€ter weniger aufwĂ€ndige Korrekturschleifen nötig sein werden.

 

6. Webentwicklung & technische Umsetzung

6.1 Agile Webentwicklung

Beim klassischen Wasserfall-Modell wird der Relaunch in klar aufeinander aufbauende Einzelschritte unterteilt – wir entwickeln die Website jedoch in einem fortlaufenden Prozess. Die agile Webentwicklung steht fĂŒr hohe FlexibilitĂ€t und stetigen Austausch zwischen allen Projektbeteiligten, inklusive dem Kunden.

Das zentrale Element in der agilen Webentwicklung ist der Sprint. Der Sprint ist ein zeitlich begrenzter Entwicklungszyklus, an dessen Ende immer ein vorzeigbarer Prototyp steht. Die Vorteile der agilen Webentwicklung sind:

  • konstanter Feedback-Flow mit Kunden
  • kein “Diskussionsstau”
  • Probleme und Fehler können schnell gelöst werden
  • hohe FlexibilitĂ€t
  • maximale Transparenz
  • keine Ă€rgerlichen MissverstĂ€ndnisse, die erst am Ende des Projekts auftauchen

 

6.2 Programmierung

Nachdem bereits viel geplant, konzipiert und gestaltet wurde, beginnt nun der Kern der Webentwicklung. Versteht man das Webdesign als die BauplÀne eines Hauses, werden in der Programmierung nun endlich Steine aufeinander gesetzt, Rohre verlegt und WÀnde gestrichen.  

Unsere Webentwickler setzen das abgenommene Webdesign mithilfe von verschiedenen Codesprachen wie HTML, CSS, JavaScript und PHP um und verknĂŒpfen es mit dem gewĂ€hlten Content-Management-System wie WordPress oder TYPO3. Die Programmierung ist dabei von Website zu Website genauso unterschiedlich wie das Webdesign.

Konkret setzen unsere Entwickler die definierten und designten Module um. Hierzu gehören beispielsweise folgende Website-Bausteine:

  • Text-Bild-Anordnungen 
  • Formulare
  • Slideshows
  • Bildergalerien
  • Akkordeons
  • Videos
  • Animationen

In den meisten FĂ€llen programmieren wir dabei das komplette Theme und ergĂ€nzen es mit verfĂŒgbaren oder eigens programmierten Plugins.

FĂŒr dynamische, individuelle Webanwendungen, die sich nicht optimal durch ein Standard-CMS umsetzen lassen, nutzen wir das PHP-Framework Laravel. Dynamische Webanwendungen erlauben eine individuelle und kundenzentrierte Ansprache des Websitebesuchers. So kann der User z. B. ĂŒber einen Rechner seinen persönlichen Bedarf ermitteln oder eine Buchungsanfrage im Kalender eintragen.

Dynamische Webanwendungen können außerdem genutzt werden bei

  • Ticket- und Bestellsystemen,
  • firmeneigenen Intranets oder
  • Portallösungen.

Mit Laravel haben wir zum Beispiel einen dynamischen Gas- und Stromtarifrechner fĂŒr das Energieunternehmen Mark-E umgesetzt. Der Rechner greift auf Echtzeit-Preise zurĂŒck und gibt anhand der Postleitzahl den passenden Stromtarif aus.

6.3 Mehrsprachigkeit

Wenn deine Produkte international gefragt sind, kannst du deinen Umsatz mit einer mehrsprachigen Website stark erhöhen. 

Unsere Erfahrung zeigt, dass Unterverzeichnisse (domain.com/de oder domain.com/en) aus SEO-Sicht deutlich besser fĂŒr Mehrsprachigkeit geeignet sind als Subdomains (de.domain.com oder en.domain.com). Obwohl der Nutzer keinen direkten Unterscheid merkt, perfomen die Rankings der Unterverzeichnisse deutlich besser.  

Mit dem hreflang-Tag teilen wir der Suchmaschine die alternativen Sprach- und LÀnderversionen mit. Und wir stellen sicher, dass die richtige Sprachversion automatisch anhand der GerÀtesprache des Users ausgegeben wird.

In WordPress setzen wir die Mehrsprachigkeit technisch mit einem Plugin um. In TYPO3 ist die Einrichtung von mehrsprachigen Seiten von Haus aus gegeben. Das fĂŒhrt auch dazu, dass TYPO3 ab 4-5 Sprachen deutlich komfortabler im Content-Management ist.

 

6.4 Performance-Optimierung

Der PageSpeed einer Website ist mittlerweile ein wichtiger Rankingfaktor fĂŒr Google. Vor allem mobil mĂŒssen Websites schnell laden, damit der User nicht abspringt. Aufgrund dieser Usability- und Suchmaschinen-Relevanz ist die Performance-Optimierung ein wichtiger Teil unserer Webentwicklung. 

Unsere erste PrĂ€misse ist immer ein sauber strukturierter Code, denn er ist die Grundlage fĂŒr eine gute Performance. Weitere wichtige Hebel sind: 

  • optimale Komprimierung des Bildmaterials
  • der richtige Host
  • Caching der Websiteinhalte
  • gzip-Komprimierung
  • Reduzierung des Codes

Einen ausfĂŒhrlichen Blogartikel, in dem wir zeigen, wie wir den PageSpeed deiner Website optimieren, findest du hier: WordPress Ladezeit optimieren: In 8 Schritten zur schnellen Website.

 

6.5 E-Commerce

Bei der Entwicklung eines Onlineshops setzen wir z. B. auf WooCommerce, ein E-Commerce-Plugin fĂŒr WordPress, oder auf Shopware. Mit beiden Systemen lassen sich vollwertige Webshops bauen, die im Backend intuitiv bedienbar sind und somit eine problemlose Wartung und Contentpflege ermöglichen.

Eine sauber strukturierte Seitenarchitektur ist das A und O eines guten Onlineshops. Die User sollen mit möglichst wenigen Klicks zum Zielprodukt navigieren können. Wir sorgen fĂŒr eine logisch durchdachte Struktur, mit der du spĂ€ter weitere Angebote und Produktkategorien ergĂ€nzen kannst.

Relaunch Guide eBook downloaden

Zu Beginn legen wir die wichtigsten Produktseiten als Vorlagen an und finalisieren sie, bis alles perfekt funktioniert. Darauf aufbauend legen wir dann alle weiteren Produktseiten an oder lassen sie automatisch durch importierte Daten erstellen. 

Neben der VerknĂŒpfung von Zahlungsmethoden (wie PayPal, Kreditkarten, Klarna, Amazon Pay usw.) implementieren wir Preise und Versandkosten ins System.

Tipp: Biete am besten so viele Bezahlungsmöglichkeiten wie möglich. Laut einer ECC-Studie springen 40 % der Nutzer vor Verkaufsabschluss ab, wenn sie nicht die prÀferierte Zahlungsmethode vorfinden.

Darauf legen wir außerdem Wert bei einem Onlineshop:

  • Schnelle Ladezeiten, vor allem mobile
  • Übersichtlicher Warenkorb und stringenter Bestellprozesses
  • Ausgereifte Such- und Filterfunktionen, die das Usererlebnis zu verbessern
  • Korrekte Struktur der Überschriften (gerade wenn eine große Anzahl an Seiten automatisch erstellt wird, muss die Grundstruktur fĂŒr die Suchmaschinenoptimierung stimmen)
  • Informativer SEO-Content und keine kopierten Herstellerangaben
  • Interessante und klickstarke Meta-Angaben (Meta-Title und Meta-Description)
  • SSL-Zertifikat fĂŒr die Sicherheit der Kundendaten

 

 

6.6 Staging

Bevor die neue Seite auf der Wunschdomain online geht, nutzen wir eine sogenannte Staging-Version auf unserem Server zum Testen, Vorbereiten und als Feedbackgrundlage. Auf dieser passwortgeschĂŒtzten (und vor Suchmaschinen verborgenen) Testseite setzen wir alle Änderungen StĂŒck fĂŒr StĂŒck und völlig ohne Risiko um. Bis zum Go-live der neuen ist die alte Website also noch ganz regulĂ€r zu erreichen. 

Auf der Staging-Seite testen wir alle Funktionen der Website, bis sie reibungslos funktioniert und der gesamte Content eingesetzt wurde. Erst wenn alles fertig ist, veröffentlichen wir sie zu einem gemeinsam festgelegten Termin auf der Domain. 

 

6.7 Sicherheit durch Backup

Auch bei perfekter Planung und BerĂŒcksichtigung aller EventualitĂ€ten kann es beim Relaunch zu technischen Problemen kommen. Aus diesem Grund erstellen wir grundsĂ€tzlich immer ein Backup, also eine Datensicherung der alten Website, um notfalls darauf zurĂŒckgreifen zu können. Vorsicht ist besser als Nachsicht.

 

6.8 Hosting

Beim Hosting kommt es primÀr auf die Anzahl der Besucher an, die du auf deiner Website erwartest. Wenn du mit 5.000 Besuchern pro Tag rechnest, benötigst du ganz andere ServerkapazitÀten als bei 100 Besuchern. Nutzerzahlen findest du in Google Analytics.

Tipp: Am Hosting-Paket solltest du nicht sparen. Die jĂ€hrlichen Kosten sind meist ohnehin ĂŒberschaubar. Ein Serverausfall kann dich im E-Commerce hingegen bares Geld kosten. 

Aber worauf solltest du bei der Auswahl des richtigen Providers genau achten? Wichtig sind:

  • ein durchgĂ€ngig erreichbarer Kundenservice fĂŒr mögliche StörungsfĂ€lle
  • aktuelle Server-Infrastruktur und Technologien (z. B. UnterstĂŒtzung von PHP 7)
  • ausreichende Server-Ressourcen 
  • geringe Ausfallzeiten

Falls es zu einem Domainumzug (Providerwechsel) kommt, ĂŒbernehmen wir natĂŒrlich die Sicherung der Datenbank und die Übertragung aller Daten und Domains.

 

7. SEO-Relaunch-Checkliste

Rankings in Suchmaschinen sind wertvolle Unternehmenswerte. Wir sorgen dafĂŒr, dass deine Rankings, die sich ĂŒber Jahre etabliert haben, auch nach dem Website-Relaunch erhalten bleiben und sich im Optimalfall noch verbessern. Denn mit einer professionell designten und programmierten Website hast du die Chance, deutlich höhere Rankings zu erhalten. Und damit auch mehr Traffic, Conversions und Umsatz. 

Beim Relaunch wird hĂ€ufig auf eine neue URL-Struktur umgestellt, sodass es aus SEO-Sicht einiges zu beachten gilt. Auch hinsichtlich der OnPage-Optimierung bietet der Relaunch die Möglichkeit, die eigene Website fĂŒr Nutzer und Suchmaschinen zu optimieren. 

 

7.1 URL-Struktur und 301-Redirects

Wir versuchen URL-Änderungen nach dem Relaunch – soweit es geht – zu vermeiden. Wenn die Website neu strukturiert werden muss, lĂ€sst sich das jedoch hĂ€ufig nicht komplett verhindern.

Das Wichtigste: Alle alten URLs, die nicht weiter bestehen, werden per 301-Redirect auf eine neue, passende URL weitergeleitet. 

Somit werden auch alle Signale der Suchmaschine weitergeleitet und die Rankings bleiben erhalten. Außerdem bekommen Nutzer ĂŒber externe Verlinkungen keine 404-Fehlerseite zu sehen, sondern werden zum entsprechenden Inhalt auf der neuen Website weitergeleitet. 

Bei großen Websites legen wir einen Weiterleitungsplan (URL-Mapping) an, damit nichts ĂŒbersehen wird. Hierzu stellen wir die alten URLs den neuen gegenĂŒber und ordnen die 301-Redirects entsprechend zu.

 

7.2 Domainwechsel

Ein Domainwechsel ist aus Sicht der Suchmaschine nur in wenigen FĂ€llen sinnvoll. Google braucht trotz Redirect mehrere Wochen, um alle Signale und Rankings auf die neue Domain zu ĂŒbernehmen.

Folgende GrĂŒnde können dennoch fĂŒr einen Domainwechsel sprechen:

  • Die Erschließung internationaler MĂ€rkte
  • Ein neuer Firmenname
  • Eine Erweiterung des Angebots, das ein Rebranding benötigt

Der Umzug aufgrund einer sogenannten Keyword-Domain (z. B. www.kronleuchter.de) ist heutzutage kaum mehr sinnvoll, da das Ranking dadurch nur noch marginal beeinflusst wird.

 

7.3 Content und Contentmigration

Contentmigration meint den Umzug der Website-Inhalte auf ein neues System. Wir ĂŒbertragen die redaktionellen Inhalte der alten Website dementsprechend in das Backend der neuen Website. 

NatĂŒrlich bietet sich bei einem SEO-Relaunch eine Aktualisierung der Inhalte an, wenn diese veraltet sind oder optimiert werden mĂŒssen. Wir können dabei helfen, die Website-Texte neu zu strukturieren und mit den passenden Keywords zu optimieren.

FĂŒr das Schreiben von Suchmaschinen-optimierten Texten nutzen wir den Google-Keyword-Planer, um die wichtigsten Keywords und Suchvolumina zu identifizieren.

Google Ads Keywords
 

7.4 Überschriften H1-H6

Überschriften geben dem Leser nicht nur einen Überblick, sondern strukturieren den Inhalt einer Seite auch fĂŒr Suchmaschinen. In HTML kannst du sechs Überschriften verwenden (<h1> bis <h6>), welche die SchriftgrĂ¶ĂŸe und Hierarchieebene festlegen. 

Die <h1> ist die HauptĂŒberschrift und wird von uns nur einmal pro Seite vergeben. Sie sollte im Optimalfall das Hauptkeyword enthalten. <h2> bis <h6> sind ZwischenĂŒberschriften, welche die weitere Hierarchie abbilden. Im Sinne einer sinnvollen Hierarchie sollte z. B. niemals eine <h3> direkt auf eine <h1> folgen.

Auch in den ZwischenĂŒberschriften kann es sinnvoll sein, wichtige Keywords und deren Synonyme unterzubringen – aber nicht auf Biegen und Brechen. Wir gehen beim Texten der Überschriften weder dogmatisch noch nach Schema F vor. Google erkennt Spam-Versuche mittlerweile sehr gut und straft sie rigoros ab. Im Zweifelsfall gewichten wir daher Lesbarkeit höher als Suchmaschinenoptimierung, weil auch fĂŒr die Suchmaschine der User an erster Stelle steht. 

 

7.5 Duplicate Content verhindern

Zwei unterschiedliche Seiten sollten niemals den gleichen Content haben. Das gilt fĂŒr externe, aber auch fĂŒr interne Inhalte. Denn gedoppelte Inhalte sind ein schlechtes Signal fĂŒr Google. Im Bestfall bietet jede Seite einzigartigen Content, genau auf den Nutzer zugeschnitten.

Manchmal lĂ€sst es sich nicht verhindern, dass gleicher Content auf mehreren Seiten vorkommt. In diesem Fall nutzen wir Canonical-Tags, um Google mitzuteilen, welcher der primĂ€re Inhalt fĂŒr den Index ist.

 

7.6 Meta-Title und Meta-Description

Der Meta-Title (auch Title-Tag oder Title) ist die klickbare Überschrift der URL in den Suchmaschinen und muss die Seite daher möglichst prĂ€zise beschreiben und dem User gleichzeitig einen Klickanreiz liefern. 

Wir versuchen immer das Hauptkeyword im Title-Tag unterzubringen, da es immer noch eine hohe SEO-Relevanz hat. Hier zum Beispiel das Snippet unserer eigenen Startseite mit dem Hauptkeyword “digitalagentur”:

Friendventure Digitalagentur Snippet

Wichtg: Es ist aus User-Sicht immer besser das Hauptkeyword so frĂŒh wie möglich zu nennen.

Die Meta-Description (Text in schwarz) zeigt eine erweiterte Beschreibung der Seite. Mit einer optimierten Meta-Description können wir deine Durchklickrate (CTR) deutlich steigern.

Wir legen Wert darauf, dem User einen spannenden Einblick zu bieten, ohne falsche Versprechungen zu machen – denn falsche Versprechungen fĂŒhren letztlich zu einer höheren Absprungrate auf der Seite und damit wieder zu einem schlechteren Ranking. Es bringt also nichts, mit speziellen Lockangeboten zu werben, wenn der User diese auf der Website nicht wiederfindet.

Wir prĂŒfen stets die LĂ€nge von Title-Tag und Meta-Description mit Yoast SEO oder dem Serp Snippet Generator von Sistrix, damit sie nicht abgeschnitten werden. Im Folgenden ein Negativbeispiel, in dem Meta-Title und Meta-Description der Schere zum Opfer gefallen sind …

Klempner Snippet
 

7.7 Bilder-SEO-Checkliste

Bilder-SEO ist eine hĂ€ufig unterschĂ€tzte Disziplin. Denn auch Bilder können einerseits fĂŒr Traffic sorgen, andererseits können sie die textbasierten Rankings unterstĂŒtzen. Mit folgenden Tipps helfen wir dir, deine Bilder besser von Google indexieren zu lassen.

Dateiname: Das wichtigste Attribut im Bilder-SEO ist der Dateiname. Mit einer Dateibezeichnung wie wbbehke-0667922.jpg kann Google nichts anfangen, weshalb wir deine Bilder immer lesbar fĂŒr die Suchmaschine benennen. Wichtig sind:

  • ausschließlich Kleinbuchstaben im Dateinamen 
  • keine Sonderzeichen oder Umlaute 
  • Trennung der Wörter mit Bindestrich (kein Unterstrich!)

Wir achten außerdem darauf, wichtige Keywords im Dateinamen zu platzieren. Ein guter Dateiname wĂ€re demnach:

rote-schuhe-frauen.jpg

rote Schuhe

Title-Attribut: Das Title-Attribut eines Bildes teilt dem User ergĂ€nzende Informationen ĂŒber das Bild mit. Wenn er mit dem Mauszeiger ĂŒber das Bild fĂ€hrt, bekommt er es angezeigt. Auch die Suchmaschine kann das Title-Attribut auslesen, weshalb es sich lohnt, wichtige Keywords unterzubringen. PrimĂ€r hat der Meta-Title aber eine Verbesserung der Usability zum Ziel.

Alt-Attribut: Das Alt-Attribut beschreibt klassischerweise das Bild, falls es vom Browser nicht angezeigt werden kann oder auch fĂŒr eingeschrĂ€nkte Benutzer, die das Bild nicht sehen können. Deshalb sollte das Alt-Attribut den Bildinhalt möglichst prĂ€zise beschreiben. FĂŒr die Suchmaschine ist das Alt-Attribut wichtig, da der Crawler dadurch den Inhalt des Bildes zuordnen kann. Deshalb setzen wir – wenn möglich – auch hier relevante Keywords ein.

Dateiformat: Im Web bieten sich vor allem JPG, PNG, GIF und SVG als Dateiformate fĂŒr Bilder und Grafiken an. Das gĂ€ngigste Dateiformat fĂŒr fotorealistische Bilder ist JPG. Bei Grafiken und Logos mit transparentem Hintergrund nutzen wir hauptsĂ€chlich PNG- und SVG-Dateien. 

DateigrĂ¶ĂŸe: Um den PageSpeed deiner Website zu verbessern, passen wir die Maße der Bilder vor dem Hochladen an und komprimieren alle Dateien mit Tools wie TinyJPG, um einen guten Kompromiss zwischen Auflösung und DateigrĂ¶ĂŸe zu finden.

 

7.8 Search Console einrichten

Die Google Search Console (ehemals Google Webmaster Tools) ist ein mĂ€chtiges Instrument fĂŒr jeden Webmaster und SEO. Hier können nicht nur Rankings und Statistiken eingesehen werden, sondern Google warnt auch bei Fehlern im Code, in der Sitemap oder in der URL-Struktur.  

Wir richten die Search Console fĂŒr dich ein und laden die XML-Sitemap hoch, damit deine Website möglichst schnell indexiert wird. 

 

7.9 Tracking ĂŒber Google Tag Manager

Um Erfolge messen zu können, braucht es ein funktionierendes Tracking-System. Gerade Auswertungs-Tools wie Google Analytics sind unerlĂ€sslich fĂŒr Onlineshops und moderne Unternehmenswebsites. 

Über den Google Tag Manager implementieren wir Tracking-Pixel und -Skripte fĂŒr alle gewĂŒnschten Tracking-Tools wie

  • Google Analytics 
  • Facebook 
  • Hotjar 
  • Mouseflow

Der Vorteil des Google Tag Managers ist die einfache Implementierung von Tracking-Codes, ohne aktiv in den Quellcode einzugreifen. Damit hast du alle Tags an einem Ort. Änderungen im Tracking und der Einbau zusĂ€tzlicher Conversionpixel sind somit auch ohne die IT-Abteilung möglich.

 

8. Testing

Bevor die Website online geht, prĂŒfen wir sie grĂŒndlich auf Herz und Nieren. Hierzu haben wir eine Checkliste erstellt, die alle Punkte enthĂ€lt, die wir vor dem Go-live testen. 

 

8.1 Cross-Browser-KompatibilitÀt

Bereits bei der Programmierung achten wir darauf, möglichst alle Standards einzuhalten, damit der Code in allen wichtigen Browsern fehlerfreie Ergebnisse produziert. Dennoch kommt es vor, dass einzelne Browser diesen Code fehlerhaft interpretieren.

Da hilft es nur, die Cross-Browser-KompatibilitĂ€t der Website fĂŒr jeden Browser zu ĂŒberprĂŒfen und ggf. Bugs zu fixen.  

Beim Testing ĂŒberprĂŒfen wir alle gĂ€ngigen Browser wie 

  • Android Browser 4
  • Internet Explorer 11+
  • Edge 15+
  • Firefox 57+
  • Chrome 61+
  • Safari 9+

Als Tool nutzen wir die praktischen Chrome Entwicklertools. Hier können sogar einzelne Devices zur ÜberprĂŒfung der Darstellung ausgewĂ€hlt werden (Cross-Device-KompatibilitĂ€t)..

Cross Browser KompatibilitÀt

Außerdem testen wir die Website natĂŒrlich nicht nur mit Desktop-Browsern, sondern auch mit verschiedenen Smartphones und Tablets, sowohl unter iOS als auch unter Android. 

 

8.2 Interne Verlinkung ĂŒberprĂŒfen

Mithilfe von internen Verlinkungen kann der User komfortabel durch die Website navigieren. Damit er nicht in einer Sackgasse landet, prĂŒfen wir diese internen Links vor dem Go-live z. B. mit dem WordPress-Plugin Broken Link Checker oder Tools wie dem Screaming Frog.

 

8.3 Weiterleitungen prĂŒfen (301-Redirects)

Auch die 301-Weiterleitungen ĂŒberprĂŒfen wir final noch einmal. Damit verhindern wir umstĂ€ndliche Weiterleitungen ĂŒber mehrere URLs, welche die Ladezeiten negativ beeinflussen, oder decken mögliche Endlosschleifen auf.

 

8.4 Rechtschreibung prĂŒfen

Wenn wir inhaltlich an der Website gearbeitet haben, ĂŒberprĂŒfen wir final noch einmal 

  • Rechtschreibung
  • Grammatik und
  • Zeichensetzung.

Die RechtschreibprĂŒfung ĂŒbernehmen bei uns erfahrene Redakteure.

 

8.5 Bestell- und Kontaktformulare prĂŒfen

Nichts ist schlimmer als die perfekte Website, auf der das Kontaktformular oder der Bestellvorgang nicht funktionieren. Denn das Ziel ist immer eine Conversion, also die Umwandlung von Besuchern in Interessenten oder KĂ€ufer. Deshalb prĂŒfen wir alle Bestell- und Kontaktformulare vor dem Go-live noch einmal auf FunktionalitĂ€t.

 

8.6 DSGVO-Checkliste ĂŒberprĂŒfen

Seit dem 25. Mai 2018 muss die Datenschutzgrundverordnung (DSGVO) von allen Unternehmen in Europa eingehalten werden. Anfangs gab es große Unsicherheit darĂŒber, was noch erlaubt ist und was möglicherweise zu einer Abmahnung fĂŒhrt.

Wir als Digitalexperten machen deine Website zu 100 % DSGVO-konform. Unsere DSGVO-Checkliste fĂŒr den Relaunch enthĂ€lt folgende Maßnahmen:

  • SSL-VerschlĂŒsselung (URL mit https)
  • Cookie-Hinweis fĂŒr Websitebesucher
  • Impressum und Datenschutzhinweise gemĂ€ĂŸ DSGVO ĂŒber das Premium-Tool von erecht24.de
  • Hinweistext im Kontaktformular zur Datenspeicherung (mit Opt-in-Checkbox)
  • Hinweistext in Newsletteranmeldung zur Datenspeicherung (mit Opt-in-Checkbox)
  • Google Analytics: Elektronischer Datenverarbeitungsvertrag wird geschlossen
  • Google Analytics: Opt-out in Datenschutzbestimmung integrieren
  • Google Analytics: IP-Anonymisierung einrichten

 

8.7 ÜberprĂŒfung des Responsive Design

Gerade das Responsive Design ist anfĂ€llig fĂŒr Fehler, da es sich in mehreren Stufen, sogenannte Breakpoints, an verschiedene BildschirmgrĂ¶ĂŸen anpasst. Diese Breakpoints testen wir im Hinblick auf das umbrechende Design. Dabei achten wir auf abgeschnittene Texte und Bilder sowie auf die richtigen AbstĂ€nde der verschiedenen Elemente.

 

8.8 ÜberprĂŒfung der robots.txt

Wir ĂŒberprĂŒfen, ob alle wichtigen Verzeichnisse fĂŒr den Google-Bot crawlbar sind. Außerdem ĂŒberprĂŒfen wir, ob einzelne Seiten fĂ€lschlicherweise noch mit dem Noindex-Parameter oder disallows ausgeschlossen werden oder passwortgeschĂŒtzt sind. 

 

9. Go-live

Jeder Go-live ist ein ganz besonderer Moment. Monatelang haben viele Spezialisten gemeinsam an einem Webprojekt geplant, designt und programmiert. Nun sollen alle dafĂŒr mit einer neuen, ansprechenden und funktionalen Website entlohnt werden!

“No Deploy Friday”: Der Livegang findet bei uns niemals Freitags statt, sondern immer Anfang oder Mitte der Woche, damit zur schnellen Behebung eventueller Fehler noch genug Zeit vor dem Wochenende bleibt.

Mit dem Upload der neuen Website-Dateien auf den Webserver und der Einrichtung der notwendigen Weiterleitungen ist die Live-Schaltung eingeleitet. 

Beim Launch versuchen wir, Downtimes so weit wie möglich zu verhindern. Falls die Website doch einmal nicht erreichbar sein sollte, richten wir einen HTTP-Code 503 (“Service Unavailable”) ein. Der Code signalisiert der Suchmaschine, dass die Website temporĂ€r nicht verfĂŒgbar ist. Das vermindert die Folgen einer Downtime fĂŒr die Rankings.

Viel Zeit zum Anstoßen gibt es fĂŒr uns aber nicht, da wir unmittelbar nach Livegang die wichtigsten Funktionen der Website ĂŒberprĂŒfen:

  • Erreichbarkeit testen: Können Nutzer und Suchmaschine problemlos auf die Website zugreifen? Sind alle Seiten erreichbar?
  • PageSpeed testen: Der PageSpeed ist mittlerweile ein entscheidender Ranking-Faktor. Wir ĂŒberprĂŒfen, wie schnell deine Website tatsĂ€chlich lĂ€dt und ob hier eventuell noch Optimierungsbedarf besteht. Hierzu nutzen wir PageSpeed Insights von Google.

Mit deinem Zugang zur Google Search Console und zu Google Analytics solltest auch du nach dem Relaunch einige Dinge ĂŒberprĂŒfen:

  • Rankings ĂŒberwachen: Bei einem Relaunch ist ein temporĂ€rer Abfall in den Google-Rankings völlig normal. Nach 2-4 Wochen sollten sich die Platzierungen aber wieder erholt haben. Nutze die Google Search Console zum Controlling der wichtigsten Rankings.
  • Fehlermeldungen in Search Console: Auf Fehler aller Art sollte ebenfalls in der Search Console geachtet werden. Gerade Crawling-Fehler können hier schnell ausgemacht werden. 
  • Google Analytics: Auch in Google Analytics solltest du das Verhalten deiner Besucher nach dem Relaunch ĂŒberprĂŒfen. Ändern sich die Verweildauer, Seiten pro Sitzung oder die Top-Channels fĂŒr Zugriffe auf deine Seite?

Nach dem Relaunch ist vor dem Relaunch! Eine grĂ¶ĂŸere Unternehmenswebsite und vor allem ein Onlineshop sind fortlaufende Projekte, die einer konstanten Optimierung bedĂŒrfen.

Relaunch Guide eBook downloaden

Wir wĂŒrden uns freuen, dich langfristig zu begleiten, um eine sinnvolle Digitalstrategie fĂŒr dein Unternehmen auszuarbeiten und umzusetzen. Gerne stehen wir dir auch nach dem Go-live fĂŒr die technische Wartung und weitere Optimierungs-, SEO– oder Social-Media-Maßnahmen zur VerfĂŒgung.

Über den Autor

Gerrit brennt fĂŒr Content Marketing und SEO. Leidenschaftlich gern schreibt er zu Themen wie New Work, Organisationsentwicklung und Marketing. Sein Interesse gilt außerdem der Europa- und Netzpolitik. Bei Fragen und Anregungen zum Blog kontaktiert ihn gerne per E-Mail: gerrit(at)friendventure.de

Gerrit Autorenfoto

Das könnte noch andere interessieren?
Dann teile es mit der Welt!

Klingt spannend? Gerne sprechen wir mit dir auch ĂŒber dein Projekt!

Projektanfrage