Seite auswählen

Der SEO Guide für Designer

geschrieben von Dan, am 09.09.2017

OnPage SEO. Der stille Champion im Webdesign?

Der SEO Guide für Designer

Ich sehe mich nicht mehr als Designer. Obwohl ich mit Webdesign (WordPress, wohoo) angefangen habe, sehe ich mich als SEO. Beziehungsweise Online Marketer generell.

Nachdem ich meine erste eigene Webseite erstellt habe und nach wochenlanger Arbeit endlich zufrieden damit war, konnten die Besucher nun endlich kommen.

Bei so einer tollen Webseite rechnete ich mit tausenden Besuchern pro Tag… Ja, die Webseite macht mich reich. Da war ich mir sicher.

Aber irgendwie blieben die Besucher aus und auch nachdem ich meine Analytics ein paar Mal aktualisiert habe: 0 Besucher.

Eine “tolle” Webseite reicht anscheinend nicht aus, um Besucher zu gewinnen. Also googlete ich:

Wie bekommt man Besucher auf seine Webseite?

So habe ich Online Marketing, und im besonderen SEO, für mich entdeckt. Herumprobiert, Erfolge gefeiert und grandiose Niederlagen verkraftet.

Nach 6 Jahren Lernzeit weiß ich, was zu tun ist, um Webseiten ganz nach oben zu bekommen. Deswegen versuche ich mich als selbstständiger SEO Consultant.

Meine Job-Beschreibung: Ich helfe meinen Klienten dabei neue Kunden über das Internet zu gewinnen und habe mich dabei auf SEO spezialisiert.

Wenn mich eine Anfrage erreicht (“Was kostet es für X auf die erste Position zu kommen??!”), schaue ich mir die Webseite des potentiellen Klienten an und stelle immer wieder fest, dass ein Teil grob vernachlässigt wurde…

OnPage SEO. Das wundert dich wahrscheinlich jetzt nicht so, weil es die ersten zwei Worte des Textes sind… aber ich schweife ab.

Was ist OnPage SEO:

Alle Maßnahmen und Anpassungen (Struktur & Content), die auf der eigenen Webseite vorgenommen werden, bezeichnet man als OnPage Optimierung. via OnPage.org

Die eigene Webseite, bzw. die deines Kunden, sollte optimiert sein, damit auch der Hauch einer Chance besteht neue Kunden über Google zu gewinnen.

Aber genug rumgelabert. Worauf musst du achten, damit das Onpage SEO einer Webseite On Point ist… (sorry)

Speed

Wir Menschen haben eine schlechtere Aufmerksamkeitsspanne als ein Goldfisch und Webseiten, die langsam laden, werden nicht besucht,…

Um zu testen, wie schnell eine Webseite lädt, gibt es verschiedene Tools. Ich benutze meist Pingdom oder GTmetrix

Hosting

Niemand Lust hat mehr als 5 Sekunden zu warten bis sie endlich mal geladen hat. Also,…

Bevor du auch nur die erste Zeile Code schreibt (oder den ersten Button beim Website-Builder anklickst), solltest du sicher gehen, dass der Webseiten-Server schnell ist und nicht in Australien steht.

Wenn dein Kunde, oder du, das nötige Budget hat, gönn dir einen SSD-Server.

Nicht? Dann empfehle ich dir WebGo oder Siteground, da sind die Server auch ganz in Ordnung. Außerdem ist der Support von WebGo 1a.

HTTPS

Okay, ich weiß: HTTPS ist keine Pflicht. Ich empfehle es trotzdem und nicht nur wegen Google-Propaganda.

1. Du kriegst ein schönes grünes Schloss vor die Domain…

2. Die Besucher werden nicht darauf hingewiesen, dass die Webseite nicht sicher ist…

3. HTTPS ist schneller…

Die meisten Hoster bieten eine einfache HTTPS-Verschlüsselung an, die du mit 3 Klicks aktivieren kannst.

CDN

Ein Cloud Delivery Network sorgt dafür, dass eine Webseite schnell lädt, egal ob du sie in Köln, New York oder Tokio aufrufst.

In dem auf verschiedenen Servern (weltweit) Kopien der Webseite abgelegt werden, muss das Signal nicht erst einmal um die halbe Welt und mehrere verschiedene Server, sondern steuert direkt den nächstgelegenen Server an.

Meine Empfehlung: Cloudflare. Der kostenlose Plan reicht für 90% der Webseiten aus, macht deine Webseite deutlich schneller und macht sie parallel ein bisschen sicherer

.htaccess

Aufgepasst, jetzt wirds ein bisschen Techie.

Schritt 1: Öffne .htaccess auf deinem Server in einem Text Editor

Schritt 2: Speichere die Datei unverändert als BackUp

Schritt 3: Füge diesen Code der .htaccess Datei hinzu:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Schritt 4: Lade die neue .htaccess auf deinen Server

Schritt 5: Aktualisiere deine Webseite

Schritt 6: Freu dich über eine schnellere Webseite

(Schritt 7: Wenn dein Webseite nicht mehr erreichbar ist, hast du etwas falsch gemacht. Lade wieder deine alte .htaccess-Datei hoch.)

Okay, jetzt haben wir die Basis für eine schnelle Webseite gelegt, die das Potential hat bei Google ganz nach vorne zu kommen. Glückwunsch. 🙂

Nachdem du die Basis geschaffen hast kann die SEO-konforme Design-Arbeit anfangen.

Du bist der Designer, deswegen werde ich dir nicht sagen, wie du Buttons, Bilder und Texte anzuordnen hast. Aber ich sage dir, worauf du achten solltest, damit die Webseite später auch bei Google gefunden wird.

Bilder

Als Designer bist du daran interessiert, dass die Bilder die du auf die Webseite packst gut aussehen. Verstehe ich.

Achte jedoch darauf, dass die Bilder nicht zu groß sind — ich empfehle dir eine maximale Dateigröße von 250kb.

Ja, wirklich 250kb. Die wenigsten Bilder müssen in 4k-Auflösung auf der Webseite hochgeladen werden. Bei compressor.io kannst du Bilder für Web komprimieren, wenn du es nicht sowieso schon in Photoshop machst.

Um direkt von Anfang an eine gute SEO-Voraussetzungen zu schaffen, solltest du die Bilder mit relevanten Dateinamen versehen.

  • Portrait-1.jpeg -> portrait-vom-geschaeftsfuehrer.jpeg
  • innen5.jpeg -> restaurant-antonio-von-innen.jpeg
  • dsc912.jpeg -> unternehmensberatung-koeln-header.jpeg

Google kann (noch) nicht erkennen, was ein Bild darstellt. Deswegen ist es deine Aufgabe als Designer diese Informationen zu vermitteln — mit Hilfe des Dateinamens, dem Titel und dem Alt-Text.

Bei einem ALT-Attribut oder ALT-Tag handelt es sich um einen Text, der eine Grafik beschreibt. Das Kürzel „ALT“ steht für „Alternative“. Das ALT-Attribut wird bei Bilddateien auf einer Webseite hinterlegt. Er wird zum Alternativtext. Suchmaschinen benutzen dieses Attribut, um den Bildinhalt zu erkennen, da Bilddateien in der Regel nicht direkt ausgelesen werden können. Für sehbehinderte Nutzer trägt das ALT-Attribut zur Barrierefreiheit bei. Sie lassen sich Webseiten mit einem Screenreader vorlesen. Dabei werden auch die ALT-Tags verwendet. via Ryte

Das ALT-Attribut sieht so aus:

<img src=“...Verzeichnis/Abbildung.jpeg“ alt=„Das ist auf dem Bild zu sehen“>

Bei Webseiten für lokale Unternehmen lohnt es sich die wichtigen Grafiken mit einem Geo-Tag zu versehen. Das vermittelt an Google, dass die Bilder an dem Ort des Unternehmens aufgenommen wurden und erhöht so die lokale Relevanz.

Struktur

Die Struktur einer Webseite sollte (vereinfacht dargestellt) so aussehen:

Generell solltest du darauf achten, dass jede Unterseite mit zwei Klicks zu erreichen ist und der Aufbau der Webseite logisch für den Besucher ist, so dass nicht erst ewig gesucht werden muss. Die klassischen Menü-Links (rote Pfeile) helfen bei der Navigation, wichtig ist hier nicht zu viele Hauptpunkte in das Hauptmenü zu packen.

Fünf Punkte sollten das Maximum sein (Home, Angebot/Service, Über Uns, Kontakt, Blog,…). Werden mehrere Dienstleistungen angeboten solltest du diese mit Unterpunkten darstellen damit es übersichtlich bleibt — siehe Grafik.

Die blauen Pfeile stehen für interne Verlinkungen. Interne Verlinkungen sind ein unterschätztes Werkzeug bei der Suchmaschinenoptimierung. Sie sorgen dafür, dass die Webseite stärker wird.

Und so setzt du sie ein:

Angenommen du schreibst einen Blogpost über etwas, was mit Angebot 2 zu tun hat und erwähnst dabei das Team. Dies gibt dir zwei Möglichkeiten für interne Verlinkungen:

  • Wenn du über dein Team schreibst, kannst du zum Beispiel das Wort Team mit der Unterseite Über Uns (webseite.de/ueber-uns/) verlinken
  • Begriffe, die zu Angebot 2 passen, können direkt zu der Detailseite des Angebots verlinkt werden (webseite.de/angebot/angebot-1)

Dies bringt uns direkt zum nächsten Punkt: die URLs.

Was denkst du, welche URL ist besser:

https://webseite.de/seo-designer-guide/

oder

https://webseite.de/blog/seo/der-seo-guide-fuer-designer-und-alle-die-es-werden-wollen-onpage-guide/

Genau, Also achte darauf, dass die URLs kurz & knackig sind und das Haupt-Keyword enthalten.

Content

Wie du am besten Bilder einsetzt weißt du nun. Ein weiterer Baustein erfolgreicher Webseiten ist das geschriebene Wort.

Wenn du auch für die Konzeptionierung und das Texten zuständig bist, solltest du darauf achten die Suchbegriffe in den Texten zu erwähnen. Achte darauf die wichtigen Suchbegriffe nicht zu oft, aber auch nicht zu wenig zu erwähnen.
Schreibst du zum Beispiel einen Text über die Dienstleistung solltest du darauf achten, dass das Keyword maximal 2-5% des geschriebenen Textes ausmacht.

In den frühen Tagen der Suchmaschinenoptimierung war es Gang und Gäbe den Suchbegriff für den man gefunden werden wollte hunderte Male auf der Webseite zu platzieren. Heutzutage gilt dies als Spam und wird von den Suchmaschinen gnadenlos abgestraft.

Wenn du erfahren willst, wie du Texte schreibst, die bei Google gefunden werden, empfehle ich dir diesen Artikel:

In 7 Schritten zum perfekten SEO-Text!

So, das wars auch schon. Dieser Artikel soll eine kleine SEO-Einführung sein und ich hoffe, dass ich dir die Grundlagen vermitteln konnte. Falls du Fragen hast oder dir mehr Details zu einem der Unterthemen wünscht, lass es mich in den Kommentaren wissen.

0 Kommentare

Trackbacks/Pingbacks

  1. Wie du SEO für dich nutzen kannst – Interview mit Dan Heller — Freelance Designer Podcast - […] https://xofilou.de/seo-guide-designer/ […]

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.