Search Engine Friendly Design

Search Engine Friendly Design

SEARCH ENGINE FRIENDLY DESIGN KURZE VORSTELLUNG Kai Spriestersbach • 11 Jahre Online Marketing-Erfahrung • Speaker • SMX München 2010 - 2015 ...

3MB Sizes 0 Downloads 5 Views

SEARCH ENGINE FRIENDLY DESIGN

KURZE VORSTELLUNG

Kai Spriestersbach •

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

Search Engine Friendly Design

Bei Amazon.de unter: http://kai.im/dvd

3

Kai Spriestersbach •

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

Search Engine Friendly Design

Bei Amazon.de unter: http://kai.im/dvd

4

Kai Spriestersbach •

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

Search Engine Friendly Design

Bei Amazon.de unter: http://kai.im/dvd

5

Gemeinsam stark

SEARCH ONE und eology kooperieren Search Engine Friendly Design

6

WAS IST SEFD?

Search Engine Friendly Design

User Centered Design

Technical Centered Design

SEFD Search Engine Friendly Design

8

Was Nutzer an Webseiten mögen •Informativ •Relevant •Schnell •Wenig

Ablenkung

•Wenig

Werbung http://www.topdesignmag.com/20-examples-of-bad-web-design/

Search Engine Friendly Design

9

Google ist nicht dumm

Search Engine Friendly Design

10

Was Suchmaschinen mögen •Informativ •Relevant •Schnell •Wenig

Ablenkung

•Wenig

Werbung http://www.2advanced.com

Search Engine Friendly Design

11

Was Suchmaschinen mögen •Informativ •Relevant •Schnell •Wenig

Ablenkung

•Wenig

Werbung

L I FA Google cache:http://www.2advanced.com

Search Engine Friendly Design

12

Search Engine Friendly Design

User Centered Design

Technical Centered Design

SEFD Search Engine Friendly Design

13

Search Engine Friendly Design

Technical Centered Design

User Centered Design

SEFD Search Engine Friendly Design

14

Content is King

Search Engine Friendly Design

15

Google muss Inhalte lesen können

Search Engine Friendly Design

16

Der Blick durch die Google-Brille

Search Engine Friendly Design

17

Suchmaschinen lesen Text

Search Engine Friendly Design

18

So sieht Google meine Seite

Search Engine Friendly Design

19

BASICS ABHAKEN

Was ist ein HTML-Dokument 
 
 … … Search Engine Friendly Design

21

Was gehört in den Kopf der Seite? 
 
 • Titel … …

• • • •

Beschreibung Stylesheet Sprache Robots

Search Engine Friendly Design

22

Was gehört in den Körper der Seite? 
 
 … …

• • • • •

Header Navigation Inhaltselemente Sidebar Footer Search Engine Friendly Design

23

Der Seitentitel 
 
 
 Search Marketing Expo - SMX München - Suchmaschinen-Marketing, SuchmaschinenOptimierung ... Search Engine Friendly Design

24

Der Seitentitel im Browser

Search Engine Friendly Design

25

Der Seitentitel im Suchergebnis

Search Engine Friendly Design

26

Der Seitentitel im Suchergebnis

Search Engine Friendly Design

27

Basic Snippet-Optimierung

Search Engine Friendly Design

28

Basic Snippet-Optimierung

Search Engine Friendly Design

29

Bilder aus Sicht von Google?

Welcher Welpe?

Search Engine Friendly Design

30

Bilder für Google „lesbar“ machen Weniger gut:

Besser: welpe

Am besten: Niedlicher Labradorwelpe sitzt auf grüner Wiese http://www.fotocommunity.de/pc/pc/display/22280012

Search Engine Friendly Design

31

Bilder für Google „lesbar“ machen Was Sie vermeiden sollten: 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

Search Engine Friendly Design

32

Was machen wir mit Videos?

http://moz.com/blog/deep-learning-machine-learning-future-of-seo-whiteboard-friday

Search Engine Friendly Design

33

Best Practice Video-Einbindung

http://moz.com/blog/deep-learning-machine-learning-future-of-seo-whiteboard-friday

Search Engine Friendly Design

34

Best Practice Video-Einbindung

Whiteboard Friday Image of Board

Search Engine Friendly Design

35

Best Practice Video-Einbindung

Search Engine Friendly Design

36

Flash?!

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

Search Engine Friendly Design

37

CRAWLABILITY

Crawling vs. Indexierung

http://www.sistrix.de/news/crawling-und-indexierung-umfangreicher-webseiten/

Search Engine Friendly Design

39

Aufbau einer URL http:
 https:
 ftp:
 mailto:

marke
 keyword
 fantasie

/news/
 /produkte/

?filter=preis
 ?s=suchwort

protocol://sub.domain.tld/ordner/datei.html?var1=42&var2=wert#fragment

www
 blog
 m
 shop

.de
 .com
 .net
 .org

index.html
 startseite.htm
 page.php
 seite.jsp Search Engine Friendly Design

#top
 #news #absatz2

40

DUPLICATE CONTENT

Häufige Fehler

http://example.com

≠ http://www.example.com

Content ist mit und ohne "www" aufrufbar. Search Engine Friendly Design

42

Häufige Fehler

http://www.example.com

≠ https://www.example.com

Content ist über "http" und "https" aufrufbar. Search Engine Friendly Design

43

Häufige Fehler

http://www.example.com/pfad/

≠ http://www.example.com/pfad

Content ist mit und ohne „Trailing Slash" aufrufbar. Search Engine Friendly Design

44

Häufige Fehler

http://www.example.com/

≠ http://www.example.com/tid=2348742

Content ist mit (Tracking-)Parametern aufrufbar. Search Engine Friendly Design

45

Häufige Fehler

http://www.example.com/

≠ http://www.example.com/sid=1337

Seite ist auch mit Session-IDs aufrufbar. Search Engine Friendly Design

46

Häufige Fehler

http://www.example.com/Pfad/

≠ http://www.example.com/pfad/

Content ist mit Groß- und Kleinschreibung aufrufbar. Search Engine Friendly Design

47

Häufige Fehler

http://www.example.com/artikel42/drucken/

≠ http://www.example.com/artikel42/

Content ist über mehrere Ansichten aufrufbar Search Engine Friendly Design

48

Häufige Fehler

http://m.example.com/

≠ http://www.example.com/

Content ist über Mobile und Desktop Webseite aufrufbar Search Engine Friendly Design

49

Wie eine Indexierung verhindern? •„noindex“ •„nofollow“ •Canonical

Tag

•robots.txt •Webmaster

Tools http://www.trafficmaxx.de/blog/seo/pr-sculpting-robotstxt-noindex-oder-nofollow

Search Engine Friendly Design

50

robots.txt User-agent: * Disallow: /cgi-bin/ Disallow: /tmp/ Allow: /tmp/pdfs/ •Wir

vor jedem Request abgefragt •Muss im Root-Verzeichnis der Domain liegen Search Engine Friendly Design

51

robots.txt User-agent: * Disallow: /cgi-bin/ Disallow: /tmp/ Allow: /tmp/pdfs/ •Wir

vor jedem Request abgefragt •Muss im Root-Verzeichnis der Domain liegen Search Engine Friendly Design

52

Noindex 
 …


•Inhalte

werden nicht in den Index aufgenommen •Bedingung: Seite muss crawlbar sein (robots.txt) Search Engine Friendly Design

53

Nofollow 
 …


•Links

auf dieser Seite werden nicht verfolgt •Bedingung: Seite muss crawlbar sein (robots.txt) Search Engine Friendly Design

54

Canonical-Tag


 …
 •Seite

wird nicht in den Index aufgenommen (Vorsicht) •Link auf der Seite werden nicht verfolgt! •Bedingung: Seite muss crawlbar sein (robots.txt) Search Engine Friendly Design

55

Der Canonical-Tag

http://moz.com/blog/dispelling-a-persistent-rel-canonical-myth

Search Engine Friendly Design

56

Der Canonical-Tag rel="canonical"

http://moz.com/blog/dispelling-a-persistent-rel-canonical-myth

Search Engine Friendly Design

57

Webmaster Tools

Search Engine Friendly Design

58

Crawl Budget

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

Search Engine Friendly Design

59

ARCHITEKTUR

1. Möglichst kurze Wege Startseite

Seite 1

Seite 2

Seite 3

Search Engine Friendly Design

...

Seite 7.893

61

2. Die Entscheidung muss einfach sein

Startseite

Seite 1

Seite 2

Seite 3

Search Engine Friendly Design

...

Seite 5.768

62

So viel wie nötig, so wenig wie möglich Startseite

Seite 1

Seite 2.1

Seite 2

Seite 3

Seite 2.2 Search Engine Friendly Design

Seite 4

Seite 2.3

63

Navigationsschema

Search Engine Friendly Design

64

Chaotische Verlinkung ohne Siloing

Search Engine Friendly Design

65

PageRank Vererbung

Search Engine Friendly Design

66

Das Reasonable Surfer Modell

Search Engine Friendly Design

67

Typisches Webseitenkonzept

Search Engine Friendly Design

68

Navigationsbedürfnisse

Search Engine Friendly Design

69

Ontologie

Search Engine Friendly Design

70

Diskriptive Linktexte

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

Search Engine Friendly Design

71

Diskriptive Linktexte

weiter zum Artikel:
 „Institut für Qualitätsentwicklung 
 an Schulen Schleswig-Holstein“

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

Search Engine Friendly Design

72

PAGE SPEED

Why Page Speed matters

100 ms zusätzliche Ladezeit 
 =
 1% geringere Conversion-Rate Greg Linden, Amazon

Search Engine Friendly Design

74

Why Page Speed matters

500 ms zusätzliche Ladezeit = 20% weniger Suchen Marissa Mayer, Google

Search Engine Friendly Design

75

Page Speed als Rankingfaktor

„Let’s make the web faster“

Search Engine Friendly Design

76

Google Page Speed Insights

Search Engine Friendly Design

77

Google Page Speed Insights

Search Engine Friendly Design

78

Was beeinflusst die Ladezeit? Verbindungsaufbau HTML-Download CSS-Framework JavaScript-Framework Webfont CSS-Datei JavaScript-Datei Logo Datei Icon Bild 1 Bild 2 Bild 3 Bild 4 Bild 5 Ladezeit Search Engine Friendly Design

Bild 6 79

Was beeinflusst die Ladezeit? Verbindungsaufbau HTML-Download CSS-Framework JavaScript-Framework Webfont CSS-Datei JavaScript-Datei Logo Datei Icon Bild 1 Bild 2 Bild 3 Bild 4 Bild 5 Ladezeit Search Engine Friendly Design

Bild 6 80

Was beeinflusst die Ladezeit? Verbindungsaufbau HTML-Download CSS-Framework JavaScript-Framework Webfont CSS-Datei JavaScript-Datei Logo Datei Icon Bild 1 Bild 2 Bild 3 Bild 4 Bild 5 Ladezeit Search Engine Friendly Design

GZIP-Kompression

Bild 6 81

Was beeinflusst die Ladezeit? DNS Auflösung HTML-Download CSS-Framework JavaScript-Framework Webfont CSS-Datei JavaScript-Datei Logo Datei Icon Bild 1 Bild 2 Bild 3 Bild 4 Bild 5 Ladezeit Search Engine Friendly Design

Bild 6 82

Was beeinflusst die Ladezeit? DNS Auflösung HTML-Download CSS-Framework JavaScript-Framework Webfont CSS-Datei JavaScript-Datei Logo Datei Icon Bild 1 Bild 2 Bild 3 Bild 4 Bild 5 Ladezeit Search Engine Friendly Design

Auflösung & Kompression

Bild 6 83

Was beeinflusst die Ladezeit? DNS Auflösung HTML-Download CSS-Framework JavaScript-Framework Webfont CSS-Datei JavaScript-Datei Logo Datei Icon Bild 1 Bild 2 Bild 3 Bild 4 Bild 5 Ladezeit Search Engine Friendly Design

Bild 6 84

Was beeinflusst die Ladezeit? DNS Auflösung HTML-Download CSS-Framework JavaScript-Framework Webfont Logo Datei Icon Bild 1 Bild 2 Bild 3 Bild 4 Bild 5 Bild 6

HTTP Requests minimieren + Bilder auf CDN oder Subdomain

Ladezeit Search Engine Friendly Design

85

Was beeinflusst die Ladezeit? Verbindungsaufbau HTML-Download CSS-Framework JavaScript-Framework Webfont CSS-Datei JavaScript-Datei Logo Datei Icon Bild 1 Bild 2 Bild 3 Bild 4 Bild 5 Ladezeit Search Engine Friendly Design

Bild 6 86

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

JavaScript +
 CSS kombinieren

Ladezeit Search Engine Friendly Design

87

Was beeinflusst die Ladezeit? Verbindungsaufbau HTML-Download CSS-Framework JavaScript-Framework Webfont CSS-Datei JavaScript-Datei Logo Datei Icon Bild 1 Bild 2 Bild 3 Bild 4 Bild 5 Ladezeit Search Engine Friendly Design

Bild 6 88

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

Es macht einen echten Unterschied

Ladezeit Search Engine Friendly Design

89

MOBILE FRIENDLY FIRST!

Mobile Nutzung überwiegt längst

Morgan Stanley

Search Engine Friendly Design

91

Mobile Webseiten

Search Engine Friendly Design

92

Mobile Webseite auf eigener URL

Search Engine Friendly Design

93

Duplicate Content vermeiden

Auf der Desktop-Seite http://www.example.com/page-1

Auf der mobilen Seite http://m.example.com/page-1

Search Engine Friendly Design

94

Responsive Design

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

95

Google Test für mobile Geräte

https://www.google.com/webmasters/tools/mobile-friendly/

Search Engine Friendly Design

96

E-COMMERCE SPECIAL

Facetten-Navigation

Search Engine Friendly Design

98

„Unendliche“ Möglichkeiten •10

Preisoptionen

•12

Farben

•5

Obermateriale

•4

Funktionen

•50

Breiten

•30

Höhen

•4

Stile

•50

Marken Search Engine Friendly Design

99

„Unendliche“ Möglichkeiten •10

Preisoptionen

•12

Farben

•5

Obermateriale

•4

Funktionen

•50

Breiten

•30

Höhen

•4

10 * 12 * 5 * 4 * 50 * 30 * 4 * 50

= 720.000.000 Kombinationen Nur bei den Sofas!

Stile

•50

Marken Search Engine Friendly Design

100

Welche Facetten in den Index?

Search Engine Friendly Design

101

Die guten ins Töpfchen, die schlechten…

•Per

Robots.txt sperren?

•Meta-Robots

auf noindex setzen?

•Canonical-Tag •Links

auf eine andere Seite?

per JavaScript cloaken?

Search Engine Friendly Design

102

„PRG“-Pattern als Lösung

Post

Redirect

Get

example.com/sofas/schlafcouch/gruen/

Search Engine Friendly Design

103

VIELEN DANK Kai Spriestersbach

E-Mail: [email protected] Telefon: 09381 58290 22 Mobil: 0176 96933632 Twitter: @seokai

Präsentation unter: http://kai.im/sefd-smx2015