11-mal heruntergeladen
Hochgeladen vonAndré Scharf
SEO im Web Development - webinale 2016
André Scharf von digitasLBi erklärt die Bedeutung von SEO im Web Development, einschließlich der Herausforderungen der Crawlbarkeit, Content-Optimierung und der technischen Aspekte wie URL-Gestaltung und Ladezeiten. Der Prozess umfasst Projektanalyse, Design, Umsetzung und Testing, um Websites für Suchmaschinen effizient zugänglich und sichtbar zu machen. Zudem werden verschiedene SEO-Aufgaben und -Strategien vorgestellt, um die Auffindbarkeit von Inhalten zu verbessern.
SEO im Web Development - webinale 2016
- 1. André Scharf |DigitasLBi | @andrescharf SEO im Web Development
- 2. Kurz was zumir … • 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
- 8.
- 12. 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
- 14. WAS MACHT SEOEIGENTLICH?
- 15.
- 16. Einfach dargestellt… • Durchsuchtdas 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
- 17. Die Rolle vonSEO 1. Websites und Inhalte crawlbar machen 2. Content leicht verwertbar machen 3. Inhalte auffindbar, sichtbar und erreichbar machen Off-Site On- Page Technik
- 18.
- 21. Oder ums mitDilbert zu sagen
- 22. 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
- 23. Klassische Überschneidungen • Websitestrukturund URL-Gestaltung • JavaScript und Crawlbarkeit • Structured Markup • HTML5 und Template-Strukturen • Mobile Website, Responsiveness, etc. • HTTP-Headers vs. <head>-Elements • Seitenladezeiten
- 24. Klare Website-Hierarchie Content Kategorien Bereiche Thema Homepage Silo1 Kategorie 1.1 Artikel Kategorie 1.2 Artikel Silo 2 Kategorie 2.1 Artikel Kategorie 2.2 Artikel
- 25.
- 26.
- 27. JS wird sogarimmer beliebter
- 28.
- 29.
- 30. Auch hier empfiehltGoogle JS
- 31.
- 32. HTML5 macht vielesleichter HTML4 HTML5
- 33.
- 34.
- 35. HTTP Header vs.<head> Tags
- 36. HTTP Header vs.<head> Tags
- 37. 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)
- 38.
- 39. 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
- 40.
- 42. 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
- 44. 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!
Hinweis der Redaktion
- #9 3,874 marketing technology solutions on a single slide
- #18 SEO = Vermarktung? Wenn das so wäre, könnte SEO ganz unabhängig von der Website arbeiten, oder? Aber warum wollen SEOler dann immer an der Website rumfummeln? SEO = On-site (Technik + On-page) + Off-site Off-site ist schwerer geworden (Panda, Penguin, …) On-site ist individueller geworden was das Backend anbetrifft, aber im Frontend sind die Erwartungen (aus SEO-Sicht) einfach zu definieren, da kann man leicht mitreden diverse technische Anforderungen bzgl. CMS, AJAX, JS, AMP, etc.
- #21 https://www.flickr.com/photos/breatheindigital/4418188897/sizes/o/
- #23 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
- #26 Wenn möglich, nur eine Domain und Subdomain verwenden. Je einfacher und lesbarer, umso besser. Keywords in URLs verwenden. Mehrere URLs für gleiche Inhalte vermeiden. 301-Weiterleitungen oder Canonical Links nutzen. URL-Parameter und v.a. dynamische Parameter vermeiden. Kürzer ist besser. URLs und Page Titles abstimmen. Stoppwörter sind unnötig. Unsichere Zeichen vermeiden oder codieren. Weiterleitungsketten vermeiden. Case Sensitivity beachten. Bindestriche als Worttrenner. Keywordspamming verhindern.
- #27 Fast jede Website im Netz verwendet irgendeine Form von JS um Inhalte zu verändern Aber Google stellt spezielle Anforderungen, um JS crawlen zu können
- #28 AngularJS als Framework MVW für Einzelseitenanwendung ist nicht SEO-konform, obwohl es von Google stammt Facebooks MVW Framework ReactJS besitzt dagegen ein Feature, um HTML statisch zu rendern
- #32 Hx-Tagging nur für relevante Seiteninhalte Separate CSS-Formatierungen für Sidebar-Elemente usw. HTML5 ändert alles ein wenig und erlaubt mehr Möglichkeiten
- #34 https://developers.google.com/webmasters/mobile-sites/mobile-seo/
- #35 https://www.ampproject.org/ Alternativ: Facebook Instant Pages
- #36 https://support.google.com/webmasters/answer/189077?hl=en https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag?hl=en#using-the-x-robots-tag-http-header
- #37 https://support.google.com/webmasters/answer/189077?hl=en https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag?hl=en#using-the-x-robots-tag-http-header
- #38 https://support.google.com/webmasters/answer/189077?hl=en https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag?hl=en#using-the-x-robots-tag-http-header
- #39 Google erwartet, dass Inhalte Above the Fold in unter 1 Sekunde geladen werden Abzgl. Overhead bleiben damit 400ms zu Laden der Inhalte https://developers.google.com/speed/docs/insights/mobile#delivering-the-sub-one-second-rendering-experience
- #41 https://developers.google.com/speed/pagespeed/insights/