André Scharf | DigitasLBi | @andrescharf
SEO im Web Development
Kurz was zu mir …
• Online seit ca. 20 Jahren
• Beruflich im Web seit
13 Jahren
• Ostkind und Wunschbayer
• Kunden:
Marrio...
Digital Technology Landscape
Klassischer Workflow
Projektanalyse,
Abstimmung,
Datensammlung
Workshops
Wireframes,
Designkonzept,
Abstimmung &
Verfeiner...
WAS MACHT SEO EIGENTLICH?
Wie Suchmaschinen arbeiten
Einfach dargestellt…
• Durchsucht das Web
• Findet und folgt
Hyperlinks
• Sammelt neue und
geänderte Seiten und
Inhalte
Cr...
Die Rolle von SEO
1. Websites und
Inhalte crawlbar
machen
2. Content leicht
verwertbar machen
3. Inhalte auffindbar,
sicht...
SEO IM DEVELOPMENT
Oder ums mit Dilbert zu sagen
Shannon-Weaver-Modell
Von User:Wiska Bodo - de:Datei:Sender-Empfänger-Modell.png; 200px, CC BY-SA 3.0, https://commons.wik...
Klassische Überschneidungen
• Websitestruktur und URL-Gestaltung
• JavaScript und Crawlbarkeit
• Structured Markup
• HTML5...
Klare Website-Hierarchie
Content
Kategorien
Bereiche
Thema Homepage
Silo 1
Kategorie
1.1
Artikel
Kategorie
1.2
Artikel
Sil...
URL-Gestaltung
JavaScript ist überall
JS wird sogar immer beliebter
ReactJS is SEO-konform
Structured Markup
Auch hier empfiehlt Google JS
Überschriftenstruktur
HTML5 macht vieles leichter
HTML4 HTML5
Mobile Websites
Accelerated Mobile Pages
HTTP Header vs. <head> Tags
HTTP Header vs. <head> Tags
HTTP Header vs. <head> Tags
• Möglich für…
– X-Robots-Tags
– Hreflang-Tags
– Rel-Canonical-Links
• Weniger Code im Seitenh...
Seitenladezeiten
Wie erreicht man <1s?
1. Serverantwortzeiten <200ms halten
2. Zielseiten-Weiterleitungen vermeiden
3. Serveranfragen zum e...
PageSpeed Insights als Hilfe
SEO im Workflow
Projektanalyse,
Abstimmung,
Datensammlung
Workshops
Wireframes,
Designkonzept,
Abstimmung &
Verfeinerung
X...
Bildquellen: wikimedia.org, pexels.com, flickr.com, imgflip.com, quickmeme.com
Folien gibt’s unter: http://de.slideshare.n...
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
Nächste SlideShare
Wird geladen in …5
×

SEO im Web Development - webinale 2016

595 Aufrufe

Veröffentlicht am

„Wenn unsere Website fertig ist, machen wir SEO, um mehr Besucher zu bekommen.“ So oder so ähnlich kennt die Aussage wohl jeder von uns. Bei der Planung neuer Websites stehen oft konzeptionelle und visuelle Aspekte an erster Stelle, danach folgen technische Elemente, und die Vermarktung kommt dann ins Spiel, wenn bereits alles andere fertig ist. Aber dient SEO tatsächlich nur der Vermarktung der Website? Warum werden immer wieder zahllose Change Requests fällig, sobald der SEOler sich einmischt? Werfen wir einen Blick auf den Ablauf von Webprojekten und die Rolle, die SEO dabei spielt. Wir sprechen darüber, an welchen Stellen SEO-Aspekte berücksichtigt werden sollten und wie sich Reibungseffekte vermeiden lassen.

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

SEO im Web Development - webinale 2016

  1. 1. André Scharf | DigitasLBi | @andrescharf SEO im Web Development
  2. 2. Kurz was zu mir … • Online seit ca. 20 Jahren • Beruflich im Web seit 13 Jahren • Ostkind und Wunschbayer • Kunden: Marriott, ZDF, Bosch, Goodyear, AIDA, Telekom, Langenscheidt, Microsoft, SEAT, Nissan, IKEA, Daimler, u.v.m. André Scharf Director SEO, DigitasLBi andre.scharf@digitaslbi.com @andrescharf
  3. 3. Digital Technology Landscape
  4. 4. Klassischer Workflow Projektanalyse, Abstimmung, Datensammlung Workshops Wireframes, Designkonzept, Abstimmung & Verfeinerung XHTML/CSS/JS, Content, Individuelle Programmierung Testing, Testing, Testing & Testing Delivery & Support ➊ Planung ➋ Design ➌ Umsetzung ➍ Testing ➎ Delivery & Support Account Manager, Projektmanager Projektmanager, Designer, Konzepter, UX Projektmanager, Entwickler, Designer, Texter Projektmanager, Entwickler, Designer, Entwickler & QA Beteiligte Personen Online-Marketing
  5. 5. WAS MACHT SEO EIGENTLICH?
  6. 6. Wie Suchmaschinen arbeiten
  7. 7. Einfach dargestellt… • Durchsucht das Web • Findet und folgt Hyperlinks • Sammelt neue und geänderte Seiten und Inhalte Crawler • Durchsucht und analysiert Inhalte • Analysiert Verlinkungen • Rendert Webseiten Indexer • Interpretiert Suchanfragen und deren Kontext • Ruft Inhalte aus dem Index ab • Bewertet und rankt die Ergebnisse Query Engine
  8. 8. Die Rolle von SEO 1. Websites und Inhalte crawlbar machen 2. Content leicht verwertbar machen 3. Inhalte auffindbar, sichtbar und erreichbar machen Off-Site On- Page Technik
  9. 9. SEO IM DEVELOPMENT
  10. 10. Oder ums mit Dilbert zu sagen
  11. 11. Shannon-Weaver-Modell Von User:Wiska Bodo - de:Datei:Sender-Empfänger-Modell.png; 200px, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=19142848
  12. 12. Klassische Überschneidungen • Websitestruktur und URL-Gestaltung • JavaScript und Crawlbarkeit • Structured Markup • HTML5 und Template-Strukturen • Mobile Website, Responsiveness, etc. • HTTP-Headers vs. <head>-Elements • Seitenladezeiten
  13. 13. Klare Website-Hierarchie Content Kategorien Bereiche Thema Homepage Silo 1 Kategorie 1.1 Artikel Kategorie 1.2 Artikel Silo 2 Kategorie 2.1 Artikel Kategorie 2.2 Artikel
  14. 14. URL-Gestaltung
  15. 15. JavaScript ist überall
  16. 16. JS wird sogar immer beliebter
  17. 17. ReactJS is SEO-konform
  18. 18. Structured Markup
  19. 19. Auch hier empfiehlt Google JS
  20. 20. Überschriftenstruktur
  21. 21. HTML5 macht vieles leichter HTML4 HTML5
  22. 22. Mobile Websites
  23. 23. Accelerated Mobile Pages
  24. 24. HTTP Header vs. <head> Tags
  25. 25. HTTP Header vs. <head> Tags
  26. 26. HTTP Header vs. <head> Tags • Möglich für… – X-Robots-Tags – Hreflang-Tags – Rel-Canonical-Links • Weniger Code im Seitenheader • Auch für Nicht-HTML-Dokumente anwendbar (z.B. Videos, Bilder, PDF) • Leider durch SEO-Tools i.d.R. nicht erkennbar (Alternative: DevTools)
  27. 27. Seitenladezeiten
  28. 28. Wie erreicht man <1s? 1. Serverantwortzeiten <200ms halten 2. Zielseiten-Weiterleitungen vermeiden 3. Serveranfragen zum ersten Rendern minimieren 4. Nur asynchron ladende und absolut notwendige JavaScript- u/o CSS-Ressourcen „above the fold“ 5. Zeit für Browserlayout und Rendering berücksichtigen (200 ms) 6. JavaScript-Ausführung und -Rendering optimieren 7. HTML, JavaScript und CSS reduzieren 8. Komprimierung aktivieren
  29. 29. PageSpeed Insights als Hilfe
  30. 30. SEO im Workflow Projektanalyse, Abstimmung, Datensammlung Workshops Wireframes, Designkonzept, Abstimmung & Verfeinerung XHTML/CSS/JS, Content, Individuelle Programmierung Testing, Testing, Testing & Testing Delivery & Support ➊ Planung ➋ Design ➌ Umsetzung ➍ Testing ➎ Delivery & Support • Zieldefinition • Zielgruppenanalyse • Marktanalyse • Status-Quo-Analyse • Keywordanalyse SEO-Aufgaben • Websitestruktur • Navigationsstruktur • Landingpages • Keywordmapping • Content-Planung • Analysekonzept • URL-Struktur • Websitestruktur • Templatestruktur • Metadaten • Überschriften- und Contentoptimierung • Structured Markup • Analytics-Setup • Test-Crawls • Planung der Weiterleitungen • Überprüfen und Nachbessern • 301-Weiterleitungen • XML-Sitemaps • Search Console u/o Webmaster Tools • Ergebniskontrolle • Ongoing Services
  31. 31. Bildquellen: wikimedia.org, pexels.com, flickr.com, imgflip.com, quickmeme.com Folien gibt’s unter: http://de.slideshare.net/ascharf382 Danke fürs Zuhören!

×