"OnPage SEO - Technik Grundlagen" - Vortrag von Danny Linden, OnPage.org auf der SEOkomm 2015

1. OnPage SEO
Technik Grundlagen
SEOkomm – 20. November 2015

2. 20.11.15 @danny_munich 2
Aus Gelsenkirchen
2011 nach München
2013 zu OnPage.org
Interessen: Real-World Big-Data Applicationen,
Suchmaschinen(-optimierung), Machine-Learning
@danny_munich
/danny.linden2
danny@onpage.org

3. Runterladen, Lesen & Anwenden
https://de.onpage.org/knowledge-base/100-punkte-plan/
20.11.15 @danny_munich 3

4. Was technische OnPage Optimierung bedeutet
- Wie optimiere ich meine Webseite für User und Suchmaschinen
Auszug aus „Einführung in Suchmaschinenoptimierung – Google“:
http://static.googleusercontent.com/media/www.google.de/de/de/webmasters/docs/einfuehrung-in-suchmaschinenoptimierung.pdf
20.11.15 @danny_munich 4

5. Website aus User-Sicht Website aus Crawler-Sicht
20.11.15 @danny_munich 5

6. Website aus User-Sicht Website aus Crawler-Sicht
20.11.15 @danny_munich 6

7. Was den Crawler „GoogleBot“ von einem User unterscheidet
• Fragt zusätzlich die Robots.txt ab
• Lädt / Rendert eine URL inkl. JavaScript, führt aber
keine Interaktionen aus (Hovern, Klicken...)
• Vorsicht bei sehr neuen Javascript/HTML Standards
20.11.15 @danny_munich 7

8. Was ist EINE URL
https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
20.11.15 @danny_munich 8

9. Was ist EINE URL
https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
http://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler.html
http://de.onpage.org/blog/seo-spickzettel-fuer-entwickler/
http://de.onpage.org:80/blog/seo-spickzettel-fuer-entwickler/
20.11.15 @danny_munich 9

10. Was ist EINE URL
https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
http://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler.html
http://de.onpage.org/blog/seo-spickzettel-fuer-entwickler/
http://de.onpage.org:80/blog/seo-spickzettel-fuer-entwickler/
20.11.15 @danny_munich 10

11. Was ist eine URL: Das Protokoll
https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
• HTTP 1.1 / HTTPS Protokoll
• Kanonisch unterschiedliche URLs
• Kein Grund auf SSL zu verzichten
• Kostenlose Zertifikate von letsencrypt.org und startssl.com
20.11.15 @danny_munich 11

12. Was ist eine URL: Die Domain
https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
• Besteht mindestens aus Top-Level Domain (org) und Second-Level Domain
(onpage)
• Beliebig viele Ebenen
• Wird in eine (oder mehrere) IP Adressen über einen DNS Server aufgelöst
DNS „A“ Feld (IPv4): 192.168.0.1
DNS „AAAA“ Feld (IPv6): 2a03:2880:20:4f06:face:b00c:0:1
Weitere Felder (MX für E-Mail Server)
20.11.15 @danny_munich 12

13. Was ist eine URL: Die Ressource
https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
https://de.onpage.org/blog-seo-spickzettel-fuer-entwickler
https://de.onpage.org/blog/spickzettel/seo/entwickler
• Ressource die beim Webserver angefragt wird
• Kann nahezu beliebig gestaltet werden
20.11.15 @danny_munich 13

14. Wir rufen eine URL auf
http://www.seokomm.at/agenda/
20.11.15 @danny_munich 14

15. Unnützes Wissen: OSI Modell
20.11.15 @danny_munich 15

16. Wir rufen eine URL auf
DNS Auflösung
• Auflösen der IP Adresse von www.seokomm.at
– DNS Server fragt DNS-Root-Server nach den DNS Server von at
– DNS Server fragt nic.at nach DNS Server von seokomm.at
– DNS Server fragt webhostone Server (ns1.nshost2.de) nach der IP Adresse
– DNS Server Antwortet mit der IP-Adresse: 89.107.186.95
http://www.seokomm.at/agenda/
20.11.15 @danny_munich 16

17. Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
• Verbindungsaufbau zum Server
– HTTP: Port 80
– HTTPS: Port 443
– Unterhalb von HTTP wird TCP verwendet
• Mit dem QUIC-Protokoll von Google kommt UDP zum Einsatz
http://www.seokomm.at/agenda/
20.11.15 @danny_munich 17

18. Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
HTTP
Anfrage
• HTTP Anfrage an den Webserver
– Webserver Apache, Nginx, Lighttpd...
http://www.seokomm.at/agenda/
20.11.15 @danny_munich 18
GET /agenda/ HTTP/1.1
Host: www.seokomm.at
Beispiel HTTP Request:

19. Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
HTTP
Anfrage
http://www.seokomm.at/agenda/
20.11.15 @danny_munich 19

20. Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
HTTP
Anfrage
HTTP
Antwort
• Enthält
– Status Code
– HTTP-Header-Daten
– Body (HTML)
http://www.seokomm.at/agenda/
20.11.15 @danny_munich 20

21. Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
HTTP
Anfrage
HTTP
Antwort
http://www.seokomm.at/agenda/
• Statuscode: 200
• Cache Control: no-cache
• Connection: keep-alive
• Gzip-Komprimiert
• Expires: 19.Nov 1981
20.11.15 @danny_munich 21

22. Einschub: Status Codes
• 1xx
• 200: Alles ok
• 3xx: Weiterleitungen
• 301: Permanenter Redirect
• 302: Temporärer Redirect
• 4xx: Clientfehler
• 404: Not found
• 5xx: Serverfehler
• 503: Service unavailable
20.11.15 @danny_munich 22

23. Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
HTTP
Anfrage
HTTP
Antwort
Parsen des
HTML
Aufbau des
DOM
http://www.seokomm.at/agenda/
20.11.15 @danny_munich 23

24. Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
HTTP
Anfrage
HTTP
Antwort
Parsen des
HTML
Aufbau des
DOM
Abfragen
der Assets
http://www.seokomm.at/agenda/
20.11.15 @danny_munich 24

25. Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
HTTP
Anfrage
HTTP
Antwort
Parsen des
HTML
Aufbau des
DOM
Abfragen
der Assets
Bearbeiten
des DOMs
Fertig
http://www.seokomm.at/agenda/
20.11.15 @danny_munich 25

26. Vom Browser zum Crawler:
Die robot.txt Robots.txt robots.txt
# robots.txt beispiel
User-agent: *
Disallow: /foo/
Allow: /foo/bar/
User-agent: Googlebot
Disallow: blabla.html
Disallow: /temp/
User-agent: Applebot
Disallow: /
Sitemap: http://example.com/sitemap.xml
20.11.15 @danny_munich 26

27. HTML
Das Dokument
20.11.15 @danny_munich 27

28. Anatomie des HTML Codes
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
</head>
<body>
<h1>Die Seokomm ist geil</h1>
</body>
</html>
20.11.15 @danny_munich 28

29. Der Head
<head>
<title>OnPage.org: Für bessere Webseiten!</title>
<meta name="description" content="Die Analyse-Software für technisches SEO" />
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://de.onpage.org/"/>
<link rel="alternate" hreflang="de" href="https://de.onpage.org/"/>
<link rel="alternate" hreflang="en" href="https://en.onpage.org/"/>
<link rel="dns-prefetch" href="https://static1.onpage.org/">
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="Die Analyse-Software für technisches SEO"/>
<link rel="apple-touch-icon" href="https://static2.onpage.org/images/apple-touch-icon.png" />
<meta name="google-site-verification" content="w_Thn7h1sTPLiPver1ndVRYn4" />
<link type="text/css" rel="stylesheet" href="https://static2.onpage.org/onpage.min.css" />
<script type='text/javascript'> window.q=[]; window.$=function(f) { q.push(f); }; var ga_currency = "eur"; var ga_lang = "de"; </script>
</head>
20.11.15 @danny_munich 29

30. Der Body
<body>
<h1>OnPage SEO Optimierung</h1>
<h2>Ladezeiten</h2>
<h3>Kompression</h3>
<div>...</div>
<h3>CDN</h3>
<div>...</div>
<h2>Interne Verlinkung</h2>
<h3>NoFollow</h3>
<div>...</div>
<h3>Ankertext</h3>
<div>...</div>
</body>
HTML Validator: https://validator.w3.org
CSS Validator: https://jigsaw.w3.org/css-validator/
20.11.15 @danny_munich 30

31. Speed, Speed, Speed
- Kompression über Webservers (gzip)
- Caching
- Content-Delivery-Network (CDN)
- Js / CSS Dateien Zusammenfassen
- Unnötige Assets entfernen
- Viel hilft nicht viel – Auch bei Thema Wordpress Plugins
- Minifier verwenden
- HTTP/2
- QUIC
20.11.15 @danny_munich 31

32. <link rel="dns-prefetch" href="//de.onpage.org">
<link rel="preconnect" href="//de.onpage.org">
<link rel="prefetch" href="//de.onpage.org/image.jpg">
<link rel="subresource" href="//de.onpage.org/image.jpg">
<link rel="preload" href="//de.onpage.org/image.jpg" as="image">
<link rel="prerender" href="//de.onpage.org/blog/">
Prefetch me if you can
Read More: https://de.onpage.org/blog/rasend-schnelle-ladezeiten-dank-prefetching-preloading-und-prerendering
20.11.15 @danny_munich 32

33. <!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{ "@context": "http://schema.org",
"@type": "NewsArticle“,
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg“]}
</script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
20.11.15 @danny_munich 33
Accelerated Mobile Pages (AMP)

34. ONPAGE NOGOS
Häufige Fehler
20.11.15 @danny_munich 34

35. Intern NoFollow? No!
• Verlust von Linkpower
– Massiv, da iterativer Algorithmus
• Kein Mittel gegen Indexierung
– Sitemap
– Externe Links
– Magie & Zauberei...
20.11.15 @danny_munich 35

36. Intern 301/404? Pfui!
• Keinen Grund für interne 301 Redirects
• Für 404 (not found) sowieso nicht
20.11.15 @danny_munich 36

37. Disallow != NoIndex !=NoFollow
# robots.txt beispiel
User-agent: *
Disallow: /foo/
Allow: /foo/bar/
User-agent: Googlebot
Disallow: blabla.html
Disallow: /temp/
User-agent: Applebot
Disallow: /
Sitemap: http://example.com/sitemap.xml
Metatag im HTML „Head“:
<meta name="robots" content="noindex, follow">
Feld im HTTP Header (.htacces, Softwareseitig):
X-Robots-Tag: noindex, nofollow
20.11.15 @danny_munich 37

38. HTTP Header != HTML Meta
• Canonical
• Index
• Charset
• Sprache
20.11.15 @danny_munich 38

39. last but also least: Wordpress
• Falsches System für richtigen Wunsch
• Unendlich Duplicate/Thin-Content Seiten
Schlechte Seitenarchitektur
– Archive
– Kategorieseiten
– Autorenseiten
• Plugins Laden over 9000 JavaScripts nach
20.11.15 @danny_munich 39

40. Header FuckUps² am Beispiel „Charset“
20.11.15 @danny_munich 40

41. Fazit
• Macht geile Seiten mit modernen Technologien
• Steckt Liebe, Köpfchen & Testzeit in ein Projekt
– Und nicht nur Wordpress Plugins
• Versucht nicht Crawler zu betrügen, es sich
schließlich auch nur Menschen
20.11.15 @danny_munich 41