onpage seo - technik grundlagen - danny linden
TRANSCRIPT
OnPage SEO
Technik Grundlagen
SEOkomm – 20. November 2015
@danny_munich 220.11.15
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_munich 3
Runterladen, Lesen & Anwendenhttps://de.onpage.org/knowledge-base/100-punkte-plan/
20.11.15
@danny_munich 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 5
Website aus User-Sicht Website aus Crawler-Sicht
20.11.15
@danny_munich 6
Website aus User-Sicht Website aus Crawler-Sicht
20.11.15
@danny_munich 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 8
Was ist EINE URLhttps://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
20.11.15
@danny_munich 9
Was ist EINE URLhttps://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
Was ist EINE URLhttps://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 11
Was ist eine URL: Das Protokollhttps://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 12
Was ist eine URL: Die Domainhttps://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.1DNS „AAAA“ Feld (IPv6): 2a03:2880:20:4f06:face:b00c:0:1Weitere Felder (MX für E-Mail Server)
20.11.15
@danny_munich 13
Was ist eine URL: Die Ressourcehttps://de.onpage.org/blog/seo-spickzettel-fuer-entwickler
https://de.onpage.org/blog-seo-spickzettel-fuer-entwicklerhttps://de.onpage.org/blog/spickzettel/seo/entwickler
• Ressource die beim Webserver angefragt wird• Kann nahezu beliebig gestaltet werden
20.11.15
@danny_munich 14
Wir rufen eine URL aufhttp://www.seokomm.at/agenda/
20.11.15
@danny_munich 15
Unnützes Wissen: OSI Modell
20.11.15
@danny_munich 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 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 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
GET /agenda/ HTTP/1.1Host: www.seokomm.at
Beispiel HTTP Request:
@danny_munich 19
Wir rufen eine URL aufDNS Auflösung Verbindung
zum ServerHTTP
Anfrage
http://www.seokomm.at/agenda/
20.11.15
@danny_munich 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 21
Wir rufen eine URL aufDNS Auflösung Verbindung
zum ServerHTTP
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 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 23
Wir rufen eine URL aufDNS Auflösung Verbindung
zum ServerHTTP
Anfrage HTTP
AntwortParsen des
HTMLAufbau des
DOM
http://www.seokomm.at/agenda/
20.11.15
@danny_munich 24
Wir rufen eine URL aufDNS Auflösung Verbindung
zum ServerHTTP
Anfrage HTTP
AntwortParsen des
HTMLAufbau des
DOMAbfragen
der Assets
http://www.seokomm.at/agenda/
20.11.15
@danny_munich 25
Wir rufen eine URL aufDNS Auflösung Verbindung
zum ServerHTTP
Anfrage HTTP
AntwortParsen des
HTMLAufbau des
DOMAbfragen
der AssetsBearbeiten des DOMs Fertig
http://www.seokomm.at/agenda/
20.11.15
@danny_munich 26
Vom Browser zum Crawler:Die robot.txt Robots.txt robots.txt
# robots.txt beispielUser-agent: *Disallow: /foo/Allow: /foo/bar/
User-agent: GooglebotDisallow: blabla.htmlDisallow: /temp/
User-agent: ApplebotDisallow: /
Sitemap: http://example.com/sitemap.xml
20.11.15
@danny_munich 27
HTMLDas Dokument
20.11.15
@danny_munich 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 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 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.orgCSS Validator: https://jigsaw.w3.org/css-validator/
20.11.15
@danny_munich 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 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 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
Accelerated Mobile Pages (AMP)
@danny_munich 34
ONPAGE NOGOSHäufige Fehler
20.11.15
@danny_munich 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 36
Intern 301/404? Pfui!• Keinen Grund für interne 301 Redirects• Für 404 (not found) sowieso nicht
20.11.15
@danny_munich 37
Disallow != NoIndex !=NoFollow# robots.txt beispielUser-agent: *Disallow: /foo/Allow: /foo/bar/
User-agent: GooglebotDisallow: blabla.htmlDisallow: /temp/
User-agent: ApplebotDisallow: /
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 38
HTTP Header != HTML Meta• Canonical• Index• Charset• Sprache
20.11.15
@danny_munich 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 nach20.11.15
@danny_munich 40
Header FuckUps² am Beispiel „Charset“
20.11.15
@danny_munich 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