OnPage SEO - Technik Grundlagen - Danny Linden

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

[email protected]

@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


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


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


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


20.11.15

@danny_munich 18



HTTP Anfrage

• HTTP Anfrage an den Webserver– Webserver Apache, Nginx, Lighttpd...


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


20.11.15

@danny_munich 20



HTTP Anfrage

HTTP Antwort

• Enthält– Status Code– HTTP-Header-Daten– Body (HTML)


20.11.15

@danny_munich 21


zum ServerHTTP

Anfrage HTTP

Antwort


• 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


zum ServerHTTP

Anfrage HTTP

AntwortParsen des

HTMLAufbau des

DOM


20.11.15

@danny_munich 24


zum ServerHTTP

Anfrage HTTP

AntwortParsen des

HTMLAufbau des

DOMAbfragen

der Assets


20.11.15

@danny_munich 25


zum ServerHTTP

Anfrage HTTP

AntwortParsen des

HTMLAufbau des

DOMAbfragen

der AssetsBearbeiten des DOMs Fertig


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

OnPage SEO - Technik Grundlagen - Danny Linden

Software

Transcript of OnPage SEO - Technik Grundlagen - Danny Linden