Successfully reported this slideshow.
OnPage SEO
Technik Grundlagen
SEOkomm – 20. November 2015
20.11.15 @danny_munich 2
Aus Gelsenkirchen
2011 nach München
2013 zu OnPage.org
Interessen: Real-World Big-Data Applicatio...
Runterladen, Lesen & Anwenden
https://de.onpage.org/knowledge-base/100-punkte-plan/
20.11.15 @danny_munich 3
Was technische OnPage Optimierung bedeutet
- Wie optimiere ich meine Webseite für User und Suchmaschinen
Auszug aus „Einfü...
Website aus User-Sicht Website aus Crawler-Sicht
20.11.15 @danny_munich 5
Website aus User-Sicht Website aus Crawler-Sicht
20.11.15 @danny_munich 6
Was den Crawler „GoogleBot“ von einem User unterscheidet
• Fragt zusätzlich die Robots.txt ab
• Lädt / Rendert eine URL in...
Was ist EINE URL
https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
20.11.15 @danny_munich 8
Was ist EINE URL
https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
http://de.onpage.org/blog/seo-spickzettel-fuer...
Was ist EINE URL
https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
http://de.onpage.org/blog/seo-spickzettel-fuer...
Was ist eine URL: Das Protokoll
https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
• HTTP 1.1 / HTTPS Protokoll
• ...
Was ist eine URL: Die Domain
https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
• Besteht mindestens aus Top-Level...
Was ist eine URL: Die Ressource
https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
https://de.onpage.org/blog-seo-...
Wir rufen eine URL auf
http://www.seokomm.at/agenda/
20.11.15 @danny_munich 14
Unnützes Wissen: OSI Modell
20.11.15 @danny_munich 15
Wir rufen eine URL auf
DNS Auflösung
• Auflösen der IP Adresse von www.seokomm.at
– DNS Server fragt DNS-Root-Server nach ...
Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
• Verbindungsaufbau zum Server
– HTTP: Port 80
– HTTPS: Port 44...
Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
HTTP
Anfrage
• HTTP Anfrage an den Webserver
– Webserver Apache...
Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
HTTP
Anfrage
http://www.seokomm.at/agenda/
20.11.15 @danny_muni...
Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
HTTP
Anfrage
HTTP
Antwort
• Enthält
– Status Code
– HTTP-Header...
Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
HTTP
Anfrage
HTTP
Antwort
http://www.seokomm.at/agenda/
• Statu...
Einschub: Status Codes
• 1xx
• 200: Alles ok
• 3xx: Weiterleitungen
• 301: Permanenter Redirect
• 302: Temporärer Redirect...
Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
HTTP
Anfrage
HTTP
Antwort
Parsen des
HTML
Aufbau des
DOM
http:/...
Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
HTTP
Anfrage
HTTP
Antwort
Parsen des
HTML
Aufbau des
DOM
Abfrag...
Wir rufen eine URL auf
DNS Auflösung
Verbindung
zum Server
HTTP
Anfrage
HTTP
Antwort
Parsen des
HTML
Aufbau des
DOM
Abfrag...
Vom Browser zum Crawler:
Die robot.txt Robots.txt robots.txt
# robots.txt beispiel
User-agent: *
Disallow: /foo/
Allow: /f...
HTML
Das Dokument
20.11.15 @danny_munich 27
Anatomie des HTML Codes
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="widt...
Der Head
<head>
<title>OnPage.org: Für bessere Webseiten!</title>
<meta name="description" content="Die Analyse-Software f...
Der Body
<body>
<h1>OnPage SEO Optimierung</h1>
<h2>Ladezeiten</h2>
<h3>Kompression</h3>
<div>...</div>
<h3>CDN</h3>
<div>...
Speed, Speed, Speed
- Kompression über Webservers (gzip)
- Caching
- Content-Delivery-Network (CDN)
- Js / CSS Dateien Zus...
<link rel="dns-prefetch" href="//de.onpage.org">
<link rel="preconnect" href="//de.onpage.org">
<link rel="prefetch" href=...
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="ht...
ONPAGE NOGOS
Häufige Fehler
20.11.15 @danny_munich 34
Intern NoFollow? No!
• Verlust von Linkpower
– Massiv, da iterativer Algorithmus
• Kein Mittel gegen Indexierung
– Sitemap...
Intern 301/404? Pfui!
• Keinen Grund für interne 301 Redirects
• Für 404 (not found) sowieso nicht
20.11.15 @danny_munich ...
Disallow != NoIndex !=NoFollow
# robots.txt beispiel
User-agent: *
Disallow: /foo/
Allow: /foo/bar/
User-agent: Googlebot
...
HTTP Header != HTML Meta
• Canonical
• Index
• Charset
• Sprache
20.11.15 @danny_munich 38
last but also least: Wordpress
• Falsches System für richtigen Wunsch
• Unendlich Duplicate/Thin-Content Seiten
Schlechte ...
Header FuckUps² am Beispiel „Charset“
20.11.15 @danny_munich 40
Fazit
• Macht geile Seiten mit modernen Technologien
• Steckt Liebe, Köpfchen & Testzeit in ein Projekt
– Und nicht nur Wo...
Nächste SlideShare
Wird geladen in …5
×

OnPage SEO - Technik Grundlagen - Danny Linden

3.180 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

OnPage SEO - Technik Grundlagen - Danny Linden

  1. 1. OnPage SEO Technik Grundlagen SEOkomm – 20. November 2015
  2. 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. 3. Runterladen, Lesen & Anwenden https://de.onpage.org/knowledge-base/100-punkte-plan/ 20.11.15 @danny_munich 3
  4. 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. 5. Website aus User-Sicht Website aus Crawler-Sicht 20.11.15 @danny_munich 5
  6. 6. Website aus User-Sicht Website aus Crawler-Sicht 20.11.15 @danny_munich 6
  7. 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. 8. Was ist EINE URL https://de.onpage.org/blog/seo-spickzettel-fuer-entwickler 20.11.15 @danny_munich 8
  9. 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. 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. 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. 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. 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. 14. Wir rufen eine URL auf http://www.seokomm.at/agenda/ 20.11.15 @danny_munich 14
  15. 15. Unnützes Wissen: OSI Modell 20.11.15 @danny_munich 15
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27. HTML Das Dokument 20.11.15 @danny_munich 27
  28. 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. 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. 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. 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. 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. 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. 34. ONPAGE NOGOS Häufige Fehler 20.11.15 @danny_munich 34
  35. 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. 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. 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. 38. HTTP Header != HTML Meta • Canonical • Index • Charset • Sprache 20.11.15 @danny_munich 38
  39. 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. 40. Header FuckUps² am Beispiel „Charset“ 20.11.15 @danny_munich 40
  41. 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

×