SEO im Web Development - webinale 2016

480 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
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
480
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
7
Aktionen
Geteilt
0
Downloads
9
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • 3,874 marketing technology solutions on a single slide
  • 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.
  • https://www.flickr.com/photos/breatheindigital/4418188897/sizes/o/
  • 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
  • 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.
  • 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
  • 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
  • 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
  • https://developers.google.com/webmasters/mobile-sites/mobile-seo/
  • https://www.ampproject.org/
    Alternativ: Facebook Instant Pages
  • 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
  • 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
  • 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
  • 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
  • https://developers.google.com/speed/pagespeed/insights/
  • 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!

    ×