ALONA DEMCHYK SEO CAMPIXX 2019 / BERLIN...» Eine Progressive Web Application ist eine Website, die...

transcript

TECHNISCHES SEO 2019

ALONA DEMCHYK

SEO CAMPIXX 2019 / BERLIN

ALONA DEMCHYK

SEO CONSULTANT

SEO Consultant

» Bei Plan.Net Performance seit 2015

» 11 Jahre Suchmaschinenoptimierung/Performance Marketing

» Erfahrungen: BSH, MediaMarkt, ExLibris, Carglass, IKEA

Online auf:

LinkedIn: https://www.linkedin.com/in/alonademchyk

Xing: https://www.xing.com/profile/Alona_Demchyk

Twitter: https://twitter.com/alonademchykAlona Demchyk

https://alonademchyk.com

INHALTE

1. Trends 2019

2. Herausforderungen

3. Serverseitige Optimierung

4. Server & Client Kommunikation

5. Clientseitige Optimierung

6. Suchmaschinen

7. Crawling- & Indexierungsprobleme

8. Identifikation von Problemen

DIE TRENDS VON HEUTE

Artificial

Intelligence

Chatbots

Technologien

AR Apps

Show-Rooms

Wearables

Influencer

Instagram

Smart Stores

Snapchat

Hosting

High-Tech

JavaScript

Frameworks

Seitenarten

Minimalistisch

Multitouch

Displays

Internet

VerbindungCloud

Computing Hohe Video-

Bild Qualität

Trends

Internet

Geolocation

Nachhaltig

ENDGERÄTE

CLIENTS

JAVASCRIPT

SERVER /

HOSTING

SUCHMASCHINE

Sprachgesteuerte

Endgeräte

DIE NUTZER WOLLEN

SCHNELLER

INFORMATIONEN

ERHALTEN

UNABHÄNGIG VOM

ENDGERÄT ODER

STANDORT

Q1 2017, Quelle: https://www.akamai.com/us/en/multimedia/documents/state-of-the-internet/q1-2017-state-of-

the-internet-connectivity-report.pdf

SCHNELLSTE

INTERNET-

VERBINDUNG

GIBT ES IN

SÜDKOREA MIT

Ø 28.6 MBPS

DEUTSCHLAND

Ø 15.3 MBPS …

DEUTSCHLAND

MOBILE

Ø 24.1 MBPS

Quelle: https://www.ericsson.com/en/press-releases/2016/2/streaming-delays-mentally-taxing-for-smartphone-users-ericsson-mobility-report

LADEZEITEN

Quelle: https://optinmonster.com/mobile-landing-page-best-practices/

WIE PASST SEO

INHALT

SNIPPET

AUTHORITY

TEXT, BILD, VIDEO

WEBSERVER /

HOSTING

CLIENTS

JAVASCRIPT

SUCHMASCHINE

TECHNIK

EIN SERVER IST EIN

COMPUTER ODER

PROGRAMM, DER DATEN

ODER DIENSTE FÜR DIE

ANDEREN PROGRAMME

ODER COMPUTER

BEREITSTELLT

VERSCHIEDENE SERVER-

MailserverProxyserver

File-Server

DNS ServerWebserver Gameserver

EIN WEBSERVER

SPEICHERT WEBSEITEN,

BEREITET DIESE AUF, UND

LIEFERT SIE AN CLIENTS

WIE WEBBROWSER ODER

SUCHMASCHINEN-

CRAWLER AUS

Quelle: https://www.quicksprout.com/everything-about-web-hosting/

SHARED HOSTING DEDICATED HOSTING CLOUDVIRTUAL PRIVATE

SERVER

HOSTING

SERVER CLIENTSUCH-

MASCHINE

BEREITS BEIM HOSTING

ENTSCHEIDET MAN

ÜBER DIE LADEZEITEN

DER SEITE

Quelle: http://www.stadtbaecker-scharold.de/wer.html

KLEINE WEBSEITE – KEIN PROBLEM

SERVER CLIENTSUCH-

MASCHINE

KLEINE WEBSEITE – KEIN PROBLEM

GROßE WEBSEITE – CDNSERVER CLIENT

MASCHINE

CDN – CONTENT

DELIVERY NETWORK

» CDN – Content Delivery Network

» Statische Daten der Webserver werden auf die

Replica Server übertragen (Verteilungssystem)

» Nutzer ruft die Website auf, befindet sich dabei

in Venezuela. Über Request Routing System

wird der RS in Venezuela zu Hilfe gerufen. Er

spielt die aktuellste Version der Website die er

hat aus.

Ihr Webserver Replica Server (RS)

SERVER CLIENTSUCH-

MASCHINE

» Die CDN Anbieter unterscheiden sich nach Server-

Anzahl und Länderabdeckung

» Besonders geeignet sind Videostreams

» Nicht CDN geeignet sind personalisierte,

öffentliche und häufig wechselnde Informationen

» Logfile Analyse ist erschwert

» China ist ein Sonderfall:

https://www.cdnplanet.com/geo/china-cdn/

https://www.kernpunkt.de/blog/digitales-

marketing/webseiten-performance-in-china.html

CDN BESONDERHEITEN

SERVER CLIENTSUCH-

MASCHINE

WER NUTZT CDN

SERVER CLIENTSUCH-

MASCHINE

CDN ANBIETER WELTWEIT

Akamai

Amazon Web Services (CloudFront)

CDNetworks

Cloudflare

Google (Cloud CDN)

Host Europe (PlusServer)

Microsoft (Azure)

SERVER CLIENTSUCH-

MASCHINE

DER CLIENT IST EIN

PROGRAMM, DASS AUF

DEM ENDGERÄT

AUSGEFÜHRT WIRD UND

MIT DEM SERVER

KOMMUNIZIERT.

SERVER & CLIENT

KOMMUNIZIEREN MIT-

EINANDER, OBWOHL

WIR DAS NICHT

DAS PASSIERT NACH

DEM FRAGE-ANTWORT

PRINZIP…

UND NACH

PROTOKOLL…

…HTTP PROTOKOLL

ServerClient

CLIENT-SERVER-KOMMUNIKATION

SERVER CLIENTSUCH-

MASCHINE

Request

Response

Anfrage mit

URL Request

Antwort

mit HTML

Response

WEITERE NÜTZLICHE INFORMATIONEN

Request Response

SERVER CLIENTSUCH-

MASCHINE

Request-Zeilen

Methode

Request URI

HTTP-Version

Response-Zeilen

HTTP-Version

Status Code

Beschreibung

WEITERE NÜTZLICHE INFORMATIONEN

Request Response

SERVER CLIENTSUCH-

MASCHINE

Request-Zeilen

Methode

Request URI

HTTP-Version

Response-Zeilen

HTTP-Version

Status Code

Beschreibung

FRONTEND

FÜR EINE BESSERE UND

SCHNELLERE

KOMMUNIKATION

HEUTIGE TRENDS ERFORDERN NEUE

CLIENTSEITIGE LÖSUNGENSERVER CLIENT

MASCHINE

Neue Lösungen

ACCELERATED MOBILE

PAGES (AMP)

Quelle: https://de.wikipedia.org/wiki/Single-Page-Webanwendung

» Das AMP Projekt ist ein gemeinsames Projekt von Google und Twitter

» Primär entwickelt für Verlage

» Veröffentlicht von Google im Oktober 2015

» Apache Lizenz – Open Source Code bei GitHub

SERVER CLIENTSUCH-

MASCHINE

» Langsame HTML Tags werden durch neue

HTML Tags ersetzt

» Websites werden gecached und bei Google

gehostet (gstatic.com)

» Das Canonical Tag, das auf die ursprüngliche

Webseite verweist, ist daher sehr wichtig

AMP BESONDERHEITEN

SERVER CLIENTSUCH-

MASCHINE

Nackter HTML-Code

WER NUTZT AMP

SERVER CLIENTSUCH-

MASCHINE

Quelle: https://www.ampproject.org/docs/fundamentals/validate

https://validator.ampproject.org

AMP TESTEN (I)

SERVER CLIENTSUCH-

MASCHINE

AMP MIT CHROME DEVELOPER TOOLS

TESTEN

SemrRush Site Audit

Screaming FrogSEMrush Site Audit

AMP TESTEN (II)

SERVER CLIENTSUCH-

MASCHINE

» Schlecht für eigene Ads, da die AMP Seiten auf

dem Google Server gecached und gehostet

werden

» Weniger Kontrolle über Style und Inhalte

» Limitierte Anzahl an HTML Tags

» Zweite Version einer Website:

» Google Analytics – aufwändige Einstellung

» Aufwand doppelte Programmierung

» AMP sind vor allem für News, Verlage und

Content Websites vorteilhaft

» Wesentlich schnellere Ladezeiten durch

redundanten Code, Lazy Loading und

Rendering

AMP PROS UND KONTRAS

Vorteile Nachteile

SERVER CLIENTSUCH-

MASCHINE

23% mehr mobile

88% bessere Ladezeiten

1000+ AMP Artikel-Seiten täglich

SINGLE PAGE

APPLICATION (SPA)

Quelle: https://de.wikipedia.org/wiki/Single-Page-Webanwendung

» Single Page Application ist eine Webanwendung, die aus einem HTML-Dokument besteht, deren

Inhalte dynamisch nachgeladen werden.

SERVER CLIENTSUCH-

MASCHINE

CSS, HTML, JS Dateien werden

neu geladen

Template

Nur beim ersten Laden der Seite

werden alle Ressourcen geladen

Template

» Es werden clientseitige JavaScript

Frameworks eingesetzt (AngularJS, Ember.js,

ExtJS, Knockout.js, Meteor.js, ReactJS, Vue.js)

» React verbreitet sich dank Facebook. Es bietet

eine Syntax-Lösung (JSX) an, die

suchmaschinen-freundlichen Inhalt bereitstellt.

SPA BESONDERHEITEN

Template

Nur beim ersten Laden der Seite

werden alle Ressourcen geladen

SERVER CLIENTSUCH-

MASCHINE

WER NUTZT SPA

SERVER CLIENTSUCH-

MASCHINE

» JavaScript muss vorhanden und aktiviert sein

» Unvollständiges Rendering ist möglich

» SPA-Seiten können längere Ladezeiten

verursachen, umso grösser die Websites sind

(Serverside Rendering sollte ermöglicht

werden)

» Mehrere Ressourcen müssen nur einmal

geladen werden: (HTML, CSS, Scripts)

» Sie können mit Chrome debugged werden

» Sie können lokales Cache effektiv nutzen

SPA PROS UND KONTRAS

Vorteile Nachteile

SERVER CLIENTSUCH-

MASCHINE

PROGRESSIVE WEB

APPLICATION (PWA)

Quelle: https://www.onenorth.com/blog/post/whats-next-in-mobile-progressive-web-apps

» Eine Progressive Web Application ist eine

Website, die sich wie eine App verhält.

» Vier technologische Voraussetzungen:

(1) manifest.json File

(2) Service Workers

(3) HTTPs

(4) Application Shell Architecture

» Ein Nutzer muss mindestens 30 Sekunden mit

der Domain interagieren

» Weitere Infos:

https://developers.google.com/web/fundamenta

ls/web-app-manifest/

SERVER CLIENTSUCH-

MASCHINE

Quelle: https://www.onenorth.com/blog/post/whats-next-in-mobile-progressive-web-apps

WER NUTZT PWA

SERVER CLIENTSUCH-

MASCHINE

Google Developer Tools

Weitere Quellen: https://www.aleydasolis.com/en/search-engine-optimization/pwas-seo-what-are-they-why-you-need-one-and-how-to-optimize-for-them/

PWA Testen mit Google Lighthouse

PWA TESTEN

SERVER CLIENTSUCH-

MASCHINE

DIE SUCHMASCHINE IST

EIN PROGRAMM,

WELCHES AUTOMATISCH

WEBSEITEN SAMMELN

UND AUSWERTEN KANN

GOOGLE IST WIE EIN

KOPIERER, DER SEITEN

AUS WEBSERVERN

KOPIERT

CRAWLING

Crawler Crawler Crawler

Schedular

Document Index

World Wide Web

INDEXIERUNG

INFORMATION RETRIEVAL SYSTEM

Quelle: http://www.blindfiveyearold.com/crawl-optimization

CRAWL BUDGET

Quelle: https://www.google.com/about/datacenters/

Quelle: https://www.stern.de/digital/online/google--wieviel-energie-verschlingt-eine-suchanfrage-8397770.html

» Oder 5,7 Terawattstunden in 2015 = der

jährliche Energiekonsum von San Francisco

» Jeder Google-Nutzer könnte mit seinen

monatlichen Suchanfragen eine 60-Watt-

Glühbirne für drei Stunden mit Strom

versorgen.

LESEN UND AUSWERTEN KOSTET

GOOGLE BARES GELD

Quelle: Google Suchergebnisse

CRAWL BUDGET

Website

Crawler

CRAWL BUDGET

Website

Crawler

CRAWLING UND

INDEXIERUNG KANN

EINZELN GESTEUERT

WERDEN

An die Angaben in der robots.txt Datei halten sich Google, Bind und Baidu.

» Die robots.txt Datei wird von der Suchmaschine

öfter „besucht“

» Die Steuerung erlaubt oder verbietet bestimmte

Seiten zu crawlen

» Die robots.txt verhindert nicht die Indexierung

» Hauptaufgabe: Crawling Steuerung

» Testen: GSC-> Crawling-> robots.txt Tester

ROBOTS.TXT

Die XML-Sitemaps können über die entsprechenden Webmaster Tools bei Google, Bind und Baidu verifiziert werden.

» Die XML-Sitemap Datei ermöglicht es, eine

indexrelevante Liste mit URLs direkt an die

Suchmaschine zu kommunizieren

» Hier können hreflang Tags direkt vergeben werden

» Größere Websites sollten mehrere, nach Themen

erstellte XML-Sitemaps in einer Index XML-

Sitemap bereitstellen

» XML-Sitemaps können für Medien (Bilder, Videos)

erstellt werden

» Hauptaufgabe: Indexierung Steuerung

» Testen: GSC-> Crawling-> Sitemap testen

XML-SITEMAP

» Ein sehr wirksames Tool, das bei einer falschen

Einstellung die gültige Steuerung (Canonical Tag,

Meta Tag Robots) verhindern kann

» Einzelne Parameter können hinzugefügt werden

» Nicht konfigurierte Einstellungen haben kein Datum

» Hauptaufgabe: Crawling und Indexierung

Steuerung

» Testen: Logfile Analyse, Google Index

URL-PARAMETER TOOL IN DER GOOGLE

SEARCH CONSOLE

» Im Bing Webmaster Tools können einzelne

Parameter oder eine Liste mit Parametern

eingereicht werden

» Im Bing Webmaster Tools werden ausschließlich die

Parameter eingegeben, die ignoriert werden sollen

» Die Baidu Suchmaschine hat kein URL Parameter

» Hauptaufgabe: Crawling und Indexierung

Steuerung

» Testen: Logfile Analyse, Bing Index

ANDERE URL-PARAMETER TOOLS

* Ist von den anderen Signalen stark abhängig

POPULÄRSTE MAßNAHMEN UND DEREN

EINSATZ

Maßnahme Crawlen IndexierenCrawlen nicht

Indexieren

Meta Tags Robots V V V

Sitemap.xml V V V

rel=prev rel=next V V V

GSC Parameter Tool V V V

hreflang tag V V X

Canonical Tag V * *

robots.txt V X X

» Je länger die Seiten mit noindex,follow

versehen werden, desto weniger werden sie

gecrawlt.

» Irgendwann hört die Suchmaschine auf, sie

und die ausgehenden URLs der Seite zu

crawlen.

» Die ausgehenden Links dieser Seiten werden

zu noindex,nofollow.

NOINDEX WIRD ZU NOFOLLOW?

Website

noindex, follow

Crawler

Website

index, follow

Website

index, follow

Quelle: eigene Testergebnisse anhand der LogFile Analyse

» Je länger die Seiten mit noindex,follow

versehen werden, desto weniger werden sie

gecrawlt.

» Irgendwann hört die Suchmaschine auf, sie

und die ausgehenden URLs der Seite zu

crawlen.

» Die ausgehenden Links dieser Seiten werden

zu noindex,nofollow.

NOINDEX WIRD ZU NOFOLLOW?

Website

noindex, nofollow

Crawler

Website

index, follow

Website

index, follow

CRAWLING- &

INDEXIERUNGS-

PROBLEME

URL-Änderung

»Technische Änderungen (.html, Trailing Slash)

»Alte Produkt URLs werden gelöscht

»Kategorien werden verschoben

»Unterkategorien werden umbenannt, usw.

WEITERLEITUNGEN

SERVER /

HOSTING

CLIENTS

JAVASCRIPT

Clientseitige

Weiterleitung wie

JavaScript und Meta

Refresh sind nicht

suchmaschinen-

freundlich

Serverseitige

301 - permanent

302 - temporär

307 - bitte über https

Quelle: https://searchengineland.com/301-302-redirect-best-seo-293795

CRAWLING BUDGET UND

WEITERLEITUNGEN

Quelle: https://searchengineland.com/301-302-redirect-best-seo-293795

CRAWLING BUDGET UND

WEITERLEITUNGEN

LINKS, DIE KEINE LINKS SIND

Quelle:https://pbs.twimg.com/media/DyuAI2JXgAMpYq2.jpg

Quelle: https://www.seo-suedwest.de/4705-google-urls-die-server-fehler-ausloesen-sollten-vermieden-werden.html

SERVERFEHLER MEIDEN

Quelle: https://twitter.com/badams/status/1105507159641649153

Testen

BROKEN CODE MEIDEN

Quelle: https://about.google/intl/de/

NEUE LÖSUNGEN MÜSSEN FÜR DIE

SUCHMASCHINE VERSTÄNDLICH SEIN

Quelle: https://twitter.com/igrigorik/status/893574202472644608?lang=de

20152019

Quelle: https://builtvisible.com/progressive-web-app-seo/

» Verwendung von serverseitigem Rendering

» Inhalte mit verfügbaren URLs, keine #

» JavaScript und CSS-Dateien dürfen nicht

blockiert werden

» Inhalte, die nach einem ausgeführten Event

erreichbar sind, sind schwer zu indexieren

(History API)

Mehr dazu: https://builtvisible.com/on-infinite-

scroll-pushstate/

DIE INHALTE MÜSSEN LESBAR SEIN

CLIENT & SERVER

PROBLEME

PRÜFEN

Tools Server / Client

SUCHMASCHINE

PROBLEME

Endlose

ANALYSE MIT FRAGEN STARTEN

Mögliche Fragen Mögliche Fragen

Gibt es veraltete Seiten (http, Dateiendungen

usw.)?

Gibt es verwaiste Seiten?

Haben sich die Status Codes auf den Seiten

geändert?

Was crawlen die Suchmaschinen?

Werden wichtige Seiten weniger gecrawlt als

Unwichtige?

Gibt es Seiten, die nicht in der Sitemap sind?

Werden alle Sprachversionen entdeckt?

Mögliche Fragen

PRÜFEN

Tools Logfile Analyse Tools

WAS MACHT MAN, DAMIT

MAN TROTZ LANGSAMER

VERBINDUNG DIE GANZE

ACTION

MITBEKOMMT?

Quelle: https://www.semrush.com/blog/11-super-easy-new-ways-that-boosts-your-site-speed-like-never-before

*https://www.phpclasses.org/blog/post/493-php-performance-evolution.html#performance

SCHNELLER MIT…

Non-nested Table

PHP Update auf 7.1. Version mit „/“

Der Server schaut nach

einen File, wenn die URL

ohne “/” ist (extra

Weiterleiung für den Server)

Im Vergleich zu den früheren

PHP Versionen, kann die 7.1.

den Script um 26% schneller

ausführen*

CSS - oben, JS - unten Web Page Performance Test Hotlinking sperren

Quelle: https://developers.google.com/web/updates/2019/02/rendering-on-the-web

DIE HAUPTENTSCHEIDUNG WIE EINE APP

AUSGEFÜHRT WIRD, LIEGT AM

RENDERING

Quelle: https://www.notprovided.eu/rendering-on-the-web-the-seo-version/

BEIM RENDERING SEO BEACHTEN

VIELEN DANK

plan-net.com | Creating Relevance

https://www.plan-net.com/de/

LinkedIn: http://www.linkedin.com/in/alonademchyk

Xing: https://www.xing.com/profile/Alona_Demchyk

Twitter: http://twitter.com/alonademchyk

» https://unsplash.com

» https://www.pexels.com

» https://thenounproject.com

» https://giphy.com/gifs/bc-the-matrix-

BMuWMPmykHL6E

BILDER- UND ICONS-QUELLEN

ALONA DEMCHYK SEO CAMPIXX 2019 / BERLIN...» Eine Progressive Web Application ist eine Website, die...

Documents