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

http://kai.im/dvd

http://www.search-one.de/


Kai Spriestersbach

4




http://kai.im/dvd


Kai Spriestersbach

5




http://kai.im/dvd


Gemeinsam stark

6

SEARCH ONE und eology kooperieren

http://www.search-one.de/search-one-und-eology/

WAS IST SEFD?



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


http://www.2advanced.com



Was Suchmaschinen mögen

12


Google cache:http://www.2advanced.com

FAIL




13

User Centered Design

Technical Centered Design

SEFD



14

SEFD

Technical Centered DesignUser

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

BASICS ABHAKEN


Was ist ein HTML-Dokument

21

<!DOCTYPE HTML> <html lang="de"> <head>

…

</head>

<body>

…

</body>


Was gehört in den Kopf der Seite?

22


…

</head>

<body>

…

</body>

• Titel • Beschreibung • Stylesheet • Sprache • Robots


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

23


…

</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

CRAWLABILITY


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:

wwwblogmshop

markekeywordfantasie

.de

.com

.net

.org

/news//produkte/

index.htmlstartseite.htm page.phpseite.jsp

?filter=preis?s=suchwort

#top#news

#absatz2

DUPLICATE CONTENT


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.trafficmaxx.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/


•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 •Bedingung: Seite muss crawlbar sein (robots.txt)

Nofollow

<head>…<meta name="robots" content="nofollow" />


•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"/>


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

ARCHITEKTUR


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“

PAGE SPEED


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

VerbindungsaufbauHTML-Download

CSS-DateiJavaScript-Datei

Bild 1Bild 2

Bild 3

Logo Datei

Webfont

CSS-FrameworkJavaScript-Framework

Icon

Bild 4Bild 5

Bild 6Ladezeit



80



Bild 1Bild 2

Bild 3

Logo Datei

Webfont


Icon

Bild 4Bild 5

Bild 6Ladezeit



81



Bild 1Bild 2

Bild 3

Logo Datei

Webfont


Icon

Bild 4Bild 5

Bild 6

GZIP-Kompression

Ladezeit



82

DNS AuflösungHTML-Download


Bild 1Bild 2

Bild 3

Logo Datei

Webfont


Icon

Bild 4Bild 5

Bild 6Ladezeit



83



Bild 1Bild 2

Bild 3

Logo Datei

Webfont


Icon

Bild 4Bild 5

Bild 6

Auflösung & Kompression

Ladezeit



84



Bild 1Bild 2

Bild 3Bild 4

Logo Datei

Bild 5Bild 6

Webfont


Icon

Ladezeit



85


Bild 1Bild 2

Bild 3Bild 4

Logo Datei

Bild 5

Webfont


Icon

HTTP Requests minimieren

+ Bilder auf CDN

oder Subdomain

Ladezeit

Bild 6


Webfont


86



Bild 1Bild 2

Bild 3

Logo Datei


Icon

Bild 4Bild 5

Bild 6Ladezeit


Webfont


87



Logo DateiIcon

JavaScript +CSS kombinieren

Ladezeit

Bild 1Bild 2

Bild 3Bild 4

Bild 5Bild 6



88



Bild 1Bild 2

Bild 3

Logo Datei

Webfont


Icon

Bild 4Bild 5

Bild 6Ladezeit


Webfont


89



Logo DateiIcon

Es macht einen echten Unterschied

Ladezeit

Bild 1Bild 2

Bild 3Bild 4

Bild 5

MOBILE FRIENDLY FIRST!


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/

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

E-COMMERCE SPECIAL


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: [email protected] Telefon: 09381 58290 22 Mobil: 0176 96933632

Twitter: @seokai

Kai Spriestersbach

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

VIELEN DANK