SEFD - Search Engine Friendly Design - SMX München 2015 Kai Spriestersbach
-
Upload
kai-spriestersbach -
Category
Marketing
-
view
631 -
download
2
Transcript of SEFD - Search Engine Friendly Design - SMX München 2015 Kai Spriestersbach
SEARCH ENGINE FRIENDLY DESIGN
KURZE VORSTELLUNG
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
Search Engine Friendly Design
Kai Spriestersbach
4
• 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
Search Engine Friendly Design
Kai Spriestersbach
5
• 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
Search Engine Friendly Design
Gemeinsam stark
6
SEARCH ONE und eology kooperieren
WAS IST SEFD?
Search Engine Friendly Design
Search Engine Friendly Design
8
User Centered Design
Technical Centered Design
SEFD
Search Engine Friendly Design
Was Nutzer an Webseiten mögen
9
•Informativ •Relevant •Schnell •Wenig Ablenkung •Wenig Werbung
http://www.topdesignmag.com/20-examples-of-bad-web-design/
Search Engine Friendly Design
Google ist nicht dumm
10
Search Engine Friendly Design
Was Suchmaschinen mögen
11
•Informativ •Relevant •Schnell •Wenig Ablenkung •Wenig Werbung
http://www.2advanced.com
Search Engine Friendly Design
Was Suchmaschinen mögen
12
•Informativ •Relevant •Schnell •Wenig Ablenkung •Wenig Werbung
Google cache:http://www.2advanced.com
FAIL
Search Engine Friendly Design
Search Engine Friendly Design
13
User Centered Design
Technical Centered Design
SEFD
Search Engine Friendly Design
Search Engine Friendly Design
14
SEFD
Technical Centered DesignUser
Centered Design
Search Engine Friendly Design
Content is King
15
Search Engine Friendly Design
Google muss Inhalte lesen können
16
Search Engine Friendly Design
Der Blick durch die Google-Brille
17
Search Engine Friendly Design
Suchmaschinen lesen Text
18
Search Engine Friendly Design
So sieht Google meine Seite
19
BASICS ABHAKEN
Search Engine Friendly Design
Was ist ein HTML-Dokument
21
<!DOCTYPE HTML> <html lang="de"> <head>
…
</head>
<body>
…
</body>
Search Engine Friendly Design
Was gehört in den Kopf der Seite?
22
<!DOCTYPE HTML> <html lang="de"> <head>
…
</head>
<body>
…
</body>
• Titel • Beschreibung • Stylesheet • Sprache • Robots
Search Engine Friendly Design
Was gehört in den Körper der Seite?
23
<!DOCTYPE HTML> <html lang="de"> <head>
…
</head>
<body>
…
</body>
• Header • Navigation • Inhaltselemente • Sidebar • Footer
Search Engine Friendly Design
Der Seitentitel
24
<!DOCTYPE HTML> <html lang="de"> <head><title>Search Marketing Expo - SMX München
- Suchmaschinen-Marketing, Suchmaschinen-
Optimierung</title>
...
Search Engine Friendly Design
Der Seitentitel im Browser
25
Search Engine Friendly Design
Der Seitentitel im Suchergebnis
26
Search Engine Friendly Design
Der Seitentitel im Suchergebnis
27
Search Engine Friendly Design
Basic Snippet-Optimierung
28
Search Engine Friendly Design
Basic Snippet-Optimierung
29
<head><meta name="description" content="SEO
+ SEA = SMX! Die führende …" />
Search Engine Friendly Design
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
Search Engine Friendly Design 32
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
Search Engine Friendly Design
Was machen wir mit Videos?
33
http://moz.com/blog/deep-learning-machine-learning-future-of-seo-whiteboard-friday
Search Engine Friendly Design
Best Practice Video-Einbindung
34
http://moz.com/blog/deep-learning-machine-learning-future-of-seo-whiteboard-friday
Search Engine Friendly Design
Best Practice Video-Einbindung
35
<img src="//cloudfront.net/uploads/blog/
whiteboard-friday-image-of-board.jpg"
alt="Whiteboard Friday Image of Board">
Search Engine Friendly Design
Best Practice Video-Einbindung
36
Search Engine Friendly Design
Flash?!
37
http://www.gocodigo.com/digital-signage-101-blog/2013/digital-signage/why-should-i-care-about-html5
CRAWLABILITY
Search Engine Friendly Design
Crawling vs. Indexierung
39
http://www.sistrix.de/news/crawling-und-indexierung-umfangreicher-webseiten/
Search Engine Friendly Design
Aufbau einer URL
40
protocol://sub.domain.tld/ordner/datei.html?var1=42&var2=wert#fragment
http:https:ftp:mailto:
wwwblogmshop
markekeywordfantasie
.de
.com
.net
.org
/news//produkte/
index.htmlstartseite.htm page.phpseite.jsp
?filter=preis?s=suchwort
#top#news
#absatz2
DUPLICATE CONTENT
Search Engine Friendly Design
Häufige Fehler
42
Content ist mit und ohne "www" aufrufbar.
http://example.com
http://www.example.com
≠
Search Engine Friendly Design
Häufige Fehler
43
Content ist über "http" und "https" aufrufbar.
http://www.example.com
https://www.example.com
≠
Search Engine Friendly Design
Häufige Fehler
44
Content ist mit und ohne „Trailing Slash" aufrufbar.
http://www.example.com/pfad/
http://www.example.com/pfad
≠
Search Engine Friendly Design
Häufige Fehler
45
Content ist mit (Tracking-)Parametern aufrufbar.
http://www.example.com/
http://www.example.com/tid=2348742
≠
Search Engine Friendly Design
Häufige Fehler
46
Seite ist auch mit Session-IDs aufrufbar.
http://www.example.com/
http://www.example.com/sid=1337
≠
Search Engine Friendly Design
Häufige Fehler
47
Content ist mit Groß- und Kleinschreibung aufrufbar.
http://www.example.com/Pfad/
http://www.example.com/pfad/
≠
Search Engine Friendly Design
Häufige Fehler
48
Content ist über mehrere Ansichten aufrufbar
≠http://www.example.com/artikel42/drucken/
http://www.example.com/artikel42/
Search Engine Friendly Design
Häufige Fehler
49
Content ist über Mobile und Desktop Webseite aufrufbar
≠http://m.example.com/
http://www.example.com/
Search Engine Friendly Design
Wie eine Indexierung verhindern?
50
•„noindex“ •„nofollow“ •Canonical Tag •robots.txt •Webmaster Tools
http://www.trafficmaxx.de/blog/seo/pr-sculpting-robotstxt-noindex-oder-nofollow
Search Engine Friendly Design 51
•Wir vor jedem Request abgefragt •Muss im Root-Verzeichnis der Domain liegen
robots.txt
User-agent: * Disallow: /cgi-bin/ Disallow: /tmp/ Allow: /tmp/pdfs/
Search Engine Friendly Design 52
•Wir vor jedem Request abgefragt •Muss im Root-Verzeichnis der Domain liegen
robots.txt
User-agent: * Disallow: /cgi-bin/ Disallow: /tmp/ Allow: /tmp/pdfs/
Search Engine Friendly Design 53
•Inhalte werden nicht in den Index aufgenommen •Bedingung: Seite muss crawlbar sein (robots.txt)
Noindex
<head>…<meta name="robots" content="noindex" />
Search Engine Friendly Design 54
•Links auf dieser Seite werden nicht verfolgt •Bedingung: Seite muss crawlbar sein (robots.txt)
Nofollow
<head>…<meta name="robots" content="nofollow" />
Search Engine Friendly Design 55
•Seite wird nicht in den Index aufgenommen (Vorsicht) •Link auf der Seite werden nicht verfolgt! •Bedingung: Seite muss crawlbar sein (robots.txt)
Canonical-Tag
<head>…<link rel="canonical" href="http://example.com"/>
Search Engine Friendly Design
Der Canonical-Tag
56
http://moz.com/blog/dispelling-a-persistent-rel-canonical-myth
Search Engine Friendly Design
Der Canonical-Tag
57
http://moz.com/blog/dispelling-a-persistent-rel-canonical-myth
rel="canonical"
Search Engine Friendly Design 58
Webmaster Tools
Search Engine Friendly Design
Crawl Budget
59
http://searchengineland.com/how-i-think-crawl-budget-works-sort-of-59768
ARCHITEKTUR
Search Engine Friendly Design
1. Möglichst kurze Wege
61
Startseite
Seite 1 Seite 2 Seite 3 Seite 7.893...
Search Engine Friendly Design
2. Die Entscheidung muss einfach sein
62
Startseite
Seite 1 Seite 2 Seite 3 Seite 5.768...
Search Engine Friendly Design
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
Search Engine Friendly Design
Navigationsschema
64
Search Engine Friendly Design
Chaotische Verlinkung ohne Siloing
65
Search Engine Friendly Design
PageRank Vererbung
66
Search Engine Friendly Design
Das Reasonable Surfer Modell
67
Search Engine Friendly Design
Typisches Webseitenkonzept
68
Search Engine Friendly Design
Navigationsbedürfnisse
69
Search Engine Friendly Design
Ontologie
70
Search Engine Friendly Design
Diskriptive Linktexte
71
http://www.schleswig-holstein.de/IQSH/DE/IQSH_node.html
Search Engine Friendly Design
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“
PAGE SPEED
Search Engine Friendly Design
Why Page Speed matters
74
100 ms zusätzliche Ladezeit =
1% geringere Conversion-Rate
Greg Linden, Amazon
Search Engine Friendly Design
Why Page Speed matters
75
500 ms zusätzliche Ladezeit =
20% weniger Suchen
Marissa Mayer, Google
Search Engine Friendly Design
Page Speed als Rankingfaktor
76
„Let’s make the web faster“
Search Engine Friendly Design
Google Page Speed Insights
77
Search Engine Friendly Design
Google Page Speed Insights
78
Search Engine Friendly Design
Was beeinflusst die Ladezeit?
79
VerbindungsaufbauHTML-Download
CSS-DateiJavaScript-Datei
Bild 1Bild 2
Bild 3
Logo Datei
Webfont
CSS-FrameworkJavaScript-Framework
Icon
Bild 4Bild 5
Bild 6Ladezeit
Search Engine Friendly Design
Was beeinflusst die Ladezeit?
80
VerbindungsaufbauHTML-Download
CSS-DateiJavaScript-Datei
Bild 1Bild 2
Bild 3
Logo Datei
Webfont
CSS-FrameworkJavaScript-Framework
Icon
Bild 4Bild 5
Bild 6Ladezeit
Search Engine Friendly Design
Was beeinflusst die Ladezeit?
81
VerbindungsaufbauHTML-Download
CSS-DateiJavaScript-Datei
Bild 1Bild 2
Bild 3
Logo Datei
Webfont
CSS-FrameworkJavaScript-Framework
Icon
Bild 4Bild 5
Bild 6
GZIP-Kompression
Ladezeit
Search Engine Friendly Design
Was beeinflusst die Ladezeit?
82
DNS AuflösungHTML-Download
CSS-DateiJavaScript-Datei
Bild 1Bild 2
Bild 3
Logo Datei
Webfont
CSS-FrameworkJavaScript-Framework
Icon
Bild 4Bild 5
Bild 6Ladezeit
Search Engine Friendly Design
Was beeinflusst die Ladezeit?
83
DNS AuflösungHTML-Download
CSS-DateiJavaScript-Datei
Bild 1Bild 2
Bild 3
Logo Datei
Webfont
CSS-FrameworkJavaScript-Framework
Icon
Bild 4Bild 5
Bild 6
Auflösung & Kompression
Ladezeit
Search Engine Friendly Design
Was beeinflusst die Ladezeit?
84
DNS AuflösungHTML-Download
CSS-DateiJavaScript-Datei
Bild 1Bild 2
Bild 3Bild 4
Logo Datei
Bild 5Bild 6
Webfont
CSS-FrameworkJavaScript-Framework
Icon
Ladezeit
Search Engine Friendly Design
Was beeinflusst die Ladezeit?
85
DNS AuflösungHTML-Download
Bild 1Bild 2
Bild 3Bild 4
Logo Datei
Bild 5
Webfont
CSS-FrameworkJavaScript-Framework
Icon
HTTP Requests minimieren
+ Bilder auf CDN
oder Subdomain
Ladezeit
Bild 6
Search Engine Friendly Design
Webfont
Was beeinflusst die Ladezeit?
86
VerbindungsaufbauHTML-Download
CSS-DateiJavaScript-Datei
Bild 1Bild 2
Bild 3
Logo Datei
CSS-FrameworkJavaScript-Framework
Icon
Bild 4Bild 5
Bild 6Ladezeit
Search Engine Friendly Design
Webfont
Was beeinflusst die Ladezeit?
87
VerbindungsaufbauHTML-Download
CSS-DateiJavaScript-Datei
Logo DateiIcon
JavaScript +CSS kombinieren
Ladezeit
Bild 1Bild 2
Bild 3Bild 4
Bild 5Bild 6
Search Engine Friendly Design
Was beeinflusst die Ladezeit?
88
VerbindungsaufbauHTML-Download
CSS-DateiJavaScript-Datei
Bild 1Bild 2
Bild 3
Logo Datei
Webfont
CSS-FrameworkJavaScript-Framework
Icon
Bild 4Bild 5
Bild 6Ladezeit
Search Engine Friendly Design
Webfont
Was beeinflusst die Ladezeit?
89
VerbindungsaufbauHTML-Download
CSS-DateiJavaScript-Datei
Logo DateiIcon
Es macht einen echten Unterschied
Ladezeit
Bild 1Bild 2
Bild 3Bild 4
Bild 5
MOBILE FRIENDLY FIRST!
Search Engine Friendly Design
Mobile Nutzung überwiegt längst
91
Morgan Stanley
Search Engine Friendly Design
Mobile Webseiten
92
Search Engine Friendly Design
Mobile Webseite auf eigener URL
93
Search Engine Friendly Design 94
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
Search Engine Friendly Design
Responsive Design
95
Responsive Webdesign stellt allen Geräten denselben Code bereit, der anschließend auf die Bildschirmgröße angepasst wird.
Search Engine Friendly Design
Google Test für mobile Geräte
96
https://www.google.com/webmasters/tools/mobile-friendly/
E-COMMERCE SPECIAL
Search Engine Friendly Design
Facetten-Navigation
98
Search Engine Friendly Design 99
•10 Preisoptionen •12 Farben •5 Obermateriale •4 Funktionen •50 Breiten •30 Höhen •4 Stile •50 Marken
„Unendliche“ Möglichkeiten
Search Engine Friendly Design 100
•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
Search Engine Friendly Design
Welche Facetten in den Index?
101
Search Engine Friendly Design
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?
Search Engine Friendly Design
„PRG“-Pattern als Lösung
103
Post Redirect Get
example.com/sofas/schlafcouch/gruen/
E-Mail: [email protected] Telefon: 09381 58290 22 Mobil: 0176 96933632
Twitter: @seokai
Kai Spriestersbach
Präsentation unter: http://kai.im/sefd-smx2015
VIELEN DANK