SEFD - Search Engine Friendly Design - SMX München 2015 Kai Spriestersbach

Search Engine Friendly Design
Kai Spriestersbach
3
• 11 Jahre Online Marketing-Erfahrung
• Speaker
• SMX München 2010 - 2015
• SEO CAMPIXX 2011 - 2015
• SEOkomm 2014
• SEO DAY 2015
• Referent der afs Akademie & 121WATT
• Gastdozent der Hochschule Augsburg
• Trainer beim Rheinwerk Verlag
Bei Amazon.de unter: http://kai.im/dvd

Kai Spriestersbach
4
• Speaker
• SEOkomm 2014
• SEO DAY 2015

Kai Spriestersbach
5
• Speaker
• SEOkomm 2014
• SEO DAY 2015

Gemeinsam stark
6
SEARCH ONE und eology kooperieren

8
User
Centered
Design
Technical
Centered
Design
SEFD

Was Nutzer an Webseiten mögen
9
•Informativ
•Relevant
•Schnell
•Wenig Ablenkung
•Wenig Werbung
http://www.topdesignmag.com/20-examples-of-bad-web-design/

Google ist nicht dumm
10

Was Suchmaschinen mögen
11
•Informativ
•Relevant
•Schnell
•Wenig Ablenkung
•Wenig Werbung
http://www.2advanced.com

Was Suchmaschinen mögen
12
•Informativ
•Relevant
•Schnell
•Wenig Ablenkung
•Wenig Werbung
Google cache:http://www.2advanced.com
FAIL

13
User
Centered
Design
Technical
Centered
Design
SEFD

14
SEFD
Technical
Centered
Design
User
Centered
Design

Content is King
15

Google muss Inhalte lesen können
16

Der Blick durch die Google-Brille
17

Suchmaschinen lesen Text
18

So sieht Google meine Seite
19

Was ist ein HTML-Dokument
21
<!DOCTYPE HTML> 
<html lang="de"> 
<head>
…
</head>
<body>
…
</body>

Was gehört in den Kopf der Seite?
22
<!DOCTYPE HTML> 
<html lang="de"> 
<head>
…
</head>
<body>
…
</body>
• Titel
• Beschreibung
• Stylesheet
• Sprache
• Robots

Was gehört in den Körper der Seite?
23
<!DOCTYPE HTML> 
<html lang="de"> 
<head>
…
</head>
<body>
…
</body>
• Header
• Navigation
• Inhaltselemente
• Sidebar
• Footer

Der Seitentitel
24
<!DOCTYPE HTML> 
<html lang="de"> 
<head> 
<title>Search Marketing Expo - SMX München
- Suchmaschinen-Marketing, Suchmaschinen-
Optimierung</title>
...

Der Seitentitel im Browser
25

Der Seitentitel im Suchergebnis
26

Der Seitentitel im Suchergebnis
27

Basic Snippet-Optimierung
28

Basic Snippet-Optimierung
29
<head> 
<meta name="description" content="SEO
+ SEA = SMX! Die führende …" />

Bilder aus Sicht von Google?
30
Welcher
Welpe?

Search Engine Friendly Design 31
Weniger gut:
<img src="welpe.jpg"/>
Besser:
<img src="welpe.jpg" alt="welpe"/>
Am besten:
<img src="welpe.jpg" alt="Niedlicher
Labradorwelpe sitzt auf grüner Wiese">
Bilder für Google „lesbar“ machen
http://www.fotocommunity.de/pc/pc/display/22280012

Was Sie vermeiden sollten:
<img src="welpe.jpg" alt="Welpe Hund kleiner
Hund Welp Welps Welpen Hunde Welps Wurf
Welpen Hund Retriever Labrador Wolfshund
Setter Pointer Welpe Jack Russell Terrier
Welpen Hundefutter billiges Hundefutter
Welpenfutter"/>
Bilder für Google „lesbar“ machen

Was machen wir mit Videos?
33
http://moz.com/blog/deep-learning-machine-learning-future-of-seo-whiteboard-friday

Best Practice Video-Einbindung
34
http://moz.com/blog/deep-learning-machine-learning-future-of-seo-whiteboard-friday

35
<img src="//cloudfront.net/uploads/blog/
whiteboard-friday-image-of-board.jpg"
alt="Whiteboard Friday Image of Board">

36

Flash?!
37
http://www.gocodigo.com/digital-signage-101-blog/2013/digital-signage/why-should-i-care-about-html5

Crawling vs. Indexierung
39
http://www.sistrix.de/news/crawling-und-indexierung-umfangreicher-webseiten/

Aufbau einer URL
40
protocol://sub.domain.tld/ordner/datei.html?var1=42&var2=wert#fragment
http: 
https: 
ftp: 
mailto:
www 
blog 
m 
shop
marke 
keyword 
fantasie
.de 
.com 
.net 
.org
/news/ 
/produkte/
index.html 
startseite.htm 
page.php 
seite.jsp
?filter=preis 
?s=suchwort
#top 
#news
#absatz2

Häufige Fehler
42
Content ist mit und ohne "www" aufrufbar.
http://example.com
http://www.example.com
≠

Häufige Fehler
43
Content ist über "http" und "https" aufrufbar.
http://www.example.com
https://www.example.com
≠

Häufige Fehler
44
Content ist mit und ohne „Trailing Slash" aufrufbar.
http://www.example.com/pfad/
http://www.example.com/pfad
≠

Häufige Fehler
45
Content ist mit (Tracking-)Parametern aufrufbar.
http://www.example.com/
http://www.example.com/tid=2348742
≠

Häufige Fehler
46
Seite ist auch mit Session-IDs aufrufbar.
http://www.example.com/sid=1337
≠

Häufige Fehler
47
Content ist mit Groß- und Kleinschreibung aufrufbar.
http://www.example.com/Pfad/
http://www.example.com/pfad/
≠

Häufige Fehler
48
Content ist über mehrere Ansichten aufrufbar
≠
http://www.example.com/artikel42/drucken/
http://www.example.com/artikel42/

Häufige Fehler
49
Content ist über Mobile und Desktop Webseite aufrufbar
≠
http://m.example.com/

Wie eine Indexierung verhindern?
50
•„noindex“
•„nofollow“
•Canonical Tag
•robots.txt
•Webmaster Tools
http://www.trafﬁcmaxx.de/blog/seo/pr-sculpting-robotstxt-noindex-oder-nofollow

•Wir vor jedem Request abgefragt
•Muss im Root-Verzeichnis der Domain liegen
robots.txt
User-agent: *
Disallow: /cgi-bin/
Disallow: /tmp/
Allow: /tmp/pdfs/

•Inhalte werden nicht in den Index aufgenommen
•Bedingung: Seite muss crawlbar sein (robots.txt)
Noindex
<head> 
… 
<meta name="robots" content="noindex" />

•Links auf dieser Seite werden nicht verfolgt
Nofollow
<head> 
… 
<meta name="robots" content="nofollow" />

•Seite wird nicht in den Index aufgenommen (Vorsicht)
•Link auf der Seite werden nicht verfolgt!
Canonical-Tag
<head> 
… 
<link rel="canonical" href="http://example.com"/>

Der Canonical-Tag
56
http://moz.com/blog/dispelling-a-persistent-rel-canonical-myth

Der Canonical-Tag
57
http://moz.com/blog/dispelling-a-persistent-rel-canonical-myth
rel="canonical"

Webmaster Tools

Crawl Budget
59
http://searchengineland.com/how-i-think-crawl-budget-works-sort-of-59768

1. Möglichst kurze Wege
61
Startseite
Seite 1 Seite 2 Seite 3 Seite 7.893
...

2. Die Entscheidung muss einfach sein
62
Startseite
Seite 1 Seite 2 Seite 3 Seite 5.768...

So viel wie nötig, so wenig wie möglich
63
Seite 2.1 Seite 2.2 Seite 2.3
Startseite
Seite 1 Seite 2 Seite 3 Seite 4

Navigationsschema
64

Chaotische Verlinkung ohne Siloing
65

PageRank Vererbung
66

Das Reasonable Surfer Modell
67

Typisches Webseitenkonzept
68

Navigationsbedürfnisse
69

Ontologie
70

Diskriptive Linktexte
71
http://www.schleswig-holstein.de/IQSH/DE/IQSH_node.html

Diskriptive Linktexte
72
http://www.schleswig-holstein.de/IQSH/DE/IQSH_node.html
weiter zum Artikel: 
„Institut für Qualitätsentwicklung  
an Schulen Schleswig-Holstein“

Why Page Speed matters
74
100 ms zusätzliche Ladezeit  
=  
1% geringere Conversion-Rate
Greg Linden, Amazon

Why Page Speed matters
75
500 ms zusätzliche Ladezeit
=
20% weniger Suchen
Marissa Mayer, Google

Page Speed als Rankingfaktor
76
„Let’s make the web faster“

Google Page Speed Insights
77

Google Page Speed Insights
78

Was beeinflusst die Ladezeit?
79
Verbindungsaufbau
HTML-Download
CSS-Datei
JavaScript-Datei
Bild 1
Bild 2
Bild 3
Logo Datei
Webfont
CSS-Framework
JavaScript-Framework
Icon
Bild 4
Bild 5
Bild 6
Ladezeit

80
Verbindungsaufbau
HTML-Download
CSS-Datei
JavaScript-Datei
Bild 1
Bild 2
Bild 3
Logo Datei
Webfont
CSS-Framework
Icon
Bild 4
Bild 5
Bild 6
Ladezeit

81
Verbindungsaufbau
HTML-Download
CSS-Datei
JavaScript-Datei
Bild 1
Bild 2
Bild 3
Logo Datei
Webfont
CSS-Framework
Icon
Bild 4
Bild 5
Bild 6
GZIP-Kompression
Ladezeit

82
DNS Auﬂösung
HTML-Download
CSS-Datei
JavaScript-Datei
Bild 1
Bild 2
Bild 3
Logo Datei
Webfont
CSS-Framework
Icon
Bild 4
Bild 5
Bild 6
Ladezeit

83
DNS Auﬂösung
HTML-Download
CSS-Datei
JavaScript-Datei
Bild 1
Bild 2
Bild 3
Logo Datei
Webfont
CSS-Framework
Icon
Bild 4
Bild 5
Bild 6
Auflösung &
Kompression
Ladezeit

84
DNS Auﬂösung
HTML-Download
CSS-Datei
JavaScript-Datei
Bild 1
Bild 2
Bild 3
Bild 4
Logo Datei
Bild 5
Bild 6
Webfont
CSS-Framework
Icon
Ladezeit

85
DNS Auﬂösung
HTML-Download
Bild 1
Bild 2
Bild 3
Bild 4
Logo Datei
Bild 5
Webfont
CSS-Framework
Icon
HTTP Requests
minimieren
+
Bilder auf CDN
oder Subdomain
Ladezeit
Bild 6

Webfont
86
Verbindungsaufbau
HTML-Download
CSS-Datei
JavaScript-Datei
Bild 1
Bild 2
Bild 3
Logo Datei
CSS-Framework
Icon
Bild 4
Bild 5
Bild 6
Ladezeit

Webfont
87
Verbindungsaufbau
HTML-Download
CSS-Datei
JavaScript-Datei
Logo Datei
Icon
JavaScript + 
CSS kombinieren
Ladezeit
Bild 1
Bild 2
Bild 3
Bild 4
Bild 5
Bild 6

88
Verbindungsaufbau
HTML-Download
CSS-Datei
JavaScript-Datei
Bild 1
Bild 2
Bild 3
Logo Datei
Webfont
CSS-Framework
Icon
Bild 4
Bild 5
Bild 6
Ladezeit

Webfont
89
Verbindungsaufbau
HTML-Download
CSS-Datei
JavaScript-Datei
Logo Datei
Icon
Es macht einen
echten Unterschied
Ladezeit
Bild 1
Bild 2
Bild 3
Bild 4
Bild 5

Mobile Nutzung überwiegt längst
91
Morgan Stanley

Mobile Webseiten
92

Mobile Webseite auf eigener URL
93

Auf der Desktop-Seite http://www.example.com/page-1
<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://m.example.com/page-1">
Auf der mobilen Seite http://m.example.com/page-1
<link rel="canonical" href="http://www.example.com/page-1" >
Duplicate Content vermeiden

Responsive Design
95
Responsive Webdesign stellt allen Geräten denselben Code bereit,
der anschließend auf die Bildschirmgröße angepasst wird.

Google Test für mobile Geräte
96
https://www.google.com/webmasters/tools/mobile-friendly/

Facetten-Navigation
98

•10 Preisoptionen
•12 Farben
•5 Obermateriale
•4 Funktionen
•50 Breiten
•30 Höhen
•4 Stile
•50 Marken
„Unendliche“ Möglichkeiten

•10 Preisoptionen
•12 Farben
•5 Obermateriale
•4 Funktionen
•50 Breiten
•30 Höhen
•4 Stile
•50 Marken
„Unendliche“ Möglichkeiten
= 720.000.000 Kombinationen
Nur bei den Sofas!
10 * 12 * 5 * 4 * 50 * 30 * 4 * 50

Welche Facetten in den Index?
101

Die guten ins Töpfchen, die schlechten…
102
•Per Robots.txt sperren?
•Meta-Robots auf noindex setzen?
•Canonical-Tag auf eine andere Seite?
•Links per JavaScript cloaken?

„PRG“-Pattern als Lösung
103
Post Redirect Get
example.com/sofas/schlafcouch/gruen/

E-Mail: k.spriestersbach@eology.de
Telefon: 09381 58290 22
Mobil: 0176 96933632
Twitter: @seokai
Kai Spriestersbach
Präsentation unter: http://kai.im/sefd-smx2015
VIELEN DANK

SEFD - Search Engine Friendly Design - SMX München 2015 Kai Spriestersbach

Weitere ähnliche Inhalte

Was ist angesagt?

Andere mochten auch

Ähnlich wie SEFD - Search Engine Friendly Design - SMX München 2015 Kai Spriestersbach

Mehr von SEARCH ONE

SEFD - Search Engine Friendly Design - SMX München 2015 Kai Spriestersbach