Strategien zur Verlagsentwicklung im Wahlkampf | WEBINAR
Strategien zur Verlagsentwicklung im Wahlkampf | WEBINAR
Nachdem Sie diese Anleitung durchgearbeitet haben, sollten Sie verstehen können, wie bestehende Nachrichtenartikel mithilfe von Seitenlayout-Designs modifiziert und erstellt werden, die die Fähigkeit von Google verbessern, den Inhalt der Seite zu crawlen und zu verstehen.
Videodauer
15:35
Beantworten Sie das Quiz!
Nehmen Sie am aktuellen Modulquiz teil
Materialien
Gebrauchsfertige Vorlagen
Ressourcen
Berichte und Ressourcen
2.1.1 Was ist Design und Layout?
Das Design und Layout Ihrer Website bestimmt, wie sie dem Endnutzer erscheint. Dies ist wichtig, da Google letztendlich dem Nutzer in den Mittelpunkt stellt. Webseiten, die die Bedürfnisse des Nutzers schnell, einfach und unkompliziert erfüllen, werden mit besseren Platzierungen in den Suchergebnissen belohnt.
Das Design und Layout Ihrer Website beeinflussen maßgeblich, wie leicht Webcrawler wie der Google-Bot sie durchsuchen und indexieren können. Ein einfaches und optimiertes Design ermöglicht ein schnelles und problemloses Crawling, was wiederum zu besseren Platzierungen in den Suchergebnissen führt.
Was hindert Verlage also daran, Best Practices für Design und Layout umzusetzen? Am häufigsten stoßen Verlage auf folgende Probleme:
Um diese Frage zu beantworten, haben wir eine einfache Google-Suche durchgeführt und die Schlüsselwörter „Charlie Puth News“ in die Suchleiste eingegeben.
Folgendes ergab die Suche:
Auf Platz zwei der Top-Storys-SERP-Liste, direkt über einem Artikel von NME, findet sich der Artikel des Daily Illini über Charlie Puths neueste Veröffentlichung.
Die Tatsache, dass die Daily Illini, eine Studentenzeitung der Universität, die weltweit größte unabhängige Musikwebsite in den Suchergebnissen übertrifft, wirft einige wichtige Fragen auf
Wie kann es sein, dass eine Studentenzeitung in einer Stadt mit rund 40.000 Einwohnern im amerikanischen Mittleren Westen die größte Musiknachrichten-Website der Welt übertrifft? Neugierig geworden, beschließen wir, der Sache genauer nachzugehen.
Zuerst haben wir uns die Seite von NME über Charlie Puth angesehen.
Als Erstes fällt uns das Pop-up-Video auf, das unten rechts auf dem Bildschirm versucht zu laden. Offensichtlich lädt es nicht richtig. Das puffernde Video verdeckt außerdem einen Teil der Schlagzeile und des Nachrichtentextes.
Als Nächstes fällt auf, dass der anfängliche Anzeigebereich größtenteils von Inhalten eingenommen wird, die nichts mit dem Nachrichtenartikel zu tun haben. Da ist zum Beispiel ein großes Werbebanner, das etwa die Hälfte der Seite bedeckt, und natürlich das Video.
Beim Scrollen auf der Seite stoßen wir auf weitere Videos, große, detailreiche Bilder, Pop-up-Werbung und zahlreiche Hyperlinks. Angesichts des hohen Medienanteils der Seite ist es nicht verwunderlich, dass das Laden recht lange dauerte.
Als nächstes haben wir uns die Daily Illini genauer angesehen und Folgendes haben wir festgestellt.
Die Seite ist übersichtlich und aufgeräumt. Sie enthält zwar einige Werbeanzeigen und einen großen Spendenbutton am oberen Rand, aber keine Videos oder Pop-ups, die den Bildschirm verdecken oder die Schlagzeile verdecken. Die Schlagzeile ist sofort sichtbar, und höchstwahrscheinlich gilt dies auch für Googles Webcrawler.
Insgesamt ist die Seite leicht, minimalistisch und lädt blitzschnell.
Wir beschlossen, einen genaueren Blick auf den zugrundeliegenden Quellcode zu werfen. Durch einen Rechtsklick auf die Seite und die Auswahl von „Quelltext anzeigen“ (in Chrome) können wir den Quellcode der Seite einsehen.
Das haben wir auf der NME-Seite gesehen:
Zwei Dinge erregten hier unsere Aufmerksamkeit:
Das ist aus zwei Gründen nicht optimal für eine Seite:
Als wir uns hingegen den Quellcode der Daily Illini-Seite ansahen, stellten wir Folgendes fest:
Dies ist sehr einfacher HTML-Code. Außerdem werden keine Skripte innerhalb des Codes ausgeführt.<head> Abschnitt.
Wie kommt es, dass Daily Illini den NME in den Rankings überholt hat?
Hier spielen vermutlich mehrere Faktoren eine Rolle, darunter auch Design und Layout. Die Webseite des Daily Illini nutzt bestimmte Design- und Layouttechniken, die selbst kleinere Verlage leicht übernehmen können, um ihre SEO-Strategie insgesamt zu verbessern.
Dazu gehören die Verwendung von sauberem, einfachem HTML-Code, das Vermeiden von Skripten im Header-Bereich, eine schlanke und schnell ladende Seite sowie der Verzicht auf zu viele Pop-ups und Interstitial-Anzeigen.
Der nachfolgende Leitfaden geht detailliert auf jeden dieser Punkte ein und erläutert darüber hinaus verschiedene andere Techniken, mit denen Sie Ihre SERP-Platzierungen deutlich verbessern können.
Semantik bezieht sich auf die Bedeutung von Wörtern. Semantische HTML-Tags sind solche, die ihre Bedeutung sowohl für den Leser als auch für einen Webcrawler eindeutig definieren.
Wenn wir beispielsweise ein Tag wie<header> Wir wissen, was es enthält – Informationen über den Header.
Ähnlich<h1> ist ein semantisches Tag, das dem Googlebot signalisiert, dass die folgende Überschrift die wichtigste im Artikel ist.
Im Gegensatz dazu, wenn wir ein Tag wie<div> Seine Bedeutung ist nicht sofort ersichtlich. In HTML<div> steht für Division und bedeutet lediglich, dass ein neuer Abschnitt des Gesetzestextes begonnen hat, ohne dass dabei notwendigerweise Informationen über den Inhalt dieses Abschnitts preisgegeben werden.
Webcrawler wie Googlebot basieren auf künstlicher Intelligenz und Algorithmen des maschinellen Lernens, die die Funktionsweise des menschlichen Gehirns nachahmen. Das bedeutet, dass sie Texte ähnlich wie das menschliche Gehirn interpretieren.
HTML-Code, der für Menschen leicht verständlich ist, sollte auch für Googles Webcrawler leicht verständlich sein.
Betrachten Sie beispielsweise die beiden folgenden HTML-Codeabschnitte:
Quelle: https://www.pluralsight.com/guides/semantic-html
Diese Seite verwendet die<div> Alles wird mit Tags versehen, von der Kopfzeile über den Hauptinhalt bis hin zur Fußzeile. Der Inhalt der Tags ist nicht sofort ersichtlich.
Im Gegensatz dazu verwendet die folgende Seite semantische Auszeichnung. Die Kopfzeile befindet sich innerhalb des<header> tag, die Fußzeile innerhalb des<footer> Der Tag und der Hauptteil des Artikels gehören hinein.<main> Etikett.
Quelle: https://www.pluralsight.com/guides/semantic-html
Da dies für Googlebot leicht zu lesen und zu verstehen ist, hat diese Seite, unter sonst gleichen Bedingungen, eine bessere Chance, ein höheres Ranking zu erzielen als die vorherige.
Um zu überprüfen, ob Ihre Seite semantisches Markup verwendet, klicken Sie in Google Chrome einfach mit der rechten Maustaste auf die Seite und wählen Sie „Untersuchen“. Daraufhin wird Ihnen der HTML-Quellcode der Seite angezeigt. Gängige semantische Elemente sind beispielsweise:<author> ,<video> ,<article> ,<form> ,<header> , usw.
Wir wissen nun, was semantische Auszeichnung ist und warum sie wichtig ist. Aber wie können wir sie zur Verbesserung der Suchmaschinenoptimierung einsetzen?
Es ist ganz einfach: Verwenden Sie immer semantische Auszeichnungssprache, um wichtige Informationen zum Design und Layout Ihres Artikels hervorzuheben. Dazu gehören die folgenden Artikelinformationen:
Stellen Sie sicher, dass das Layout Ihrer Seite gut strukturiert ist, um das Crawling zu verbessern
Sie gestalten Ihre Website so, dass sie sowohl von Menschen als auch von Webcrawlern gelesen werden kann, und daher sollten Design und Layout diese Tatsache widerspiegeln.
Nachfolgend finden Sie einige Tipps, die Ihnen helfen, messbare Ergebnisse für Ihre Website zu erzielen.
Sie können HTML, CSS, JavaScript oder jede andere Frontend-Sprache verwenden, um ansprechende und interaktive Seiten zu erstellen. Bedenken Sie jedoch, dass mit zunehmender Komplexität der Sprache auch die Schwierigkeit steigt, den Code für Webcrawler lesbar, interpretierbar und kompilierbar zu machen.
Alles, was in HTML codiert ist, mag zwar nicht der schönste Anblick sein, aber es lädt schneller und ist besser für Suchmaschinen optimiert, aus dem einfachen Grund, dass Suchmaschinen es schneller lesen und verstehen können.
Betrachten Sie reines HTML als das Grundgerüst Ihrer Webseite. Sie können CSS und JavaScript hinzufügen, um es auszugestalten und es ästhetisch ansprechend und dynamisch zu machen, aber es ist besser, die wichtigsten Inhalte im Grundgerüst zu belassen, anstatt sie in den eigentlichen Inhalt einzufügen.
Wie implementiert man also reines HTML? Eine einfache Möglichkeit besteht darin, den Hauptinhalt Ihres Codes in ein <body>-Element einzufügen.<article> HTML-Tags.
Auf diese Weise können Webcrawler beim Auftreten auf Folgendes stoßen:<article> Anhand des Tags erkennen Suchmaschinen sofort, dass der folgende Inhalt – der Nachrichtenartikel – der wichtigste auf Ihrer Seite ist. Dies hilft ihnen zu verstehen, dass dem Inhalt innerhalb dieses Tags ein höheres Gewicht beigemessen werden muss.
Einfaches HTML<article> Ein Tag ist ein semantischer Marker, der folgendermaßen aussieht:
Quelle: https://en.wikipedia.org/wiki/Article_element
Die nächste naheliegende Frage? Wenn ich ein CMS wie WordPress verwende, wo füge ich diese Tags ein?
So geht's: Wenn Sie eine individuelle Website mit HTML erstellen, können Sie den Quellcode überprüfen, um sicherzustellen, dass er reines HTML verwendet, insbesondere in kritischen Bereichen. Wir empfehlen Ihnen, sich ausführlicher mit einem Entwickler zu besprechen, um versehentliche Funktionseinschränkungen zu vermeiden.
Wenn Sie WordPress verwenden, konsultieren Sie bitte diese Anleitung Anleitung zum Einfügen von HTML könnte ebenfalls hilfreich sein.
Diese Anleitung gilt für WordPress, da WordPress nach wie vor das beliebteste Content-Management-System (CMS) für Publisher ist. Wenn Sie ein anderes CMS wie beispielsweise Wix verwenden, konsultieren Sie bitte die Support- oder Dokumentationsseite Ihres CMS.
Wenn Sie Zugang zu einem Team von Webentwicklern haben, ist es am besten, diese Aufgabe übernehmen zu lassen, da die Bearbeitung von HTML-Code zeitaufwändig sein kann.
Testen Sie, ob Ihre Inhalte in allen Browsern, auf allen Geräten und in allen Bildschirmgrößen korrekt angezeigt werden. Dies ist zwar offensichtlich, wird aber oft übersehen. Wenn Ihre Inhalte nicht auf allen Browsern und Geräten wie gewünscht dargestellt werden, beeinträchtigt dies die Nutzererfahrung und langfristig Ihr Suchmaschinenranking.
So geht's: Um Inhalte plattformübergreifend zu testen, müssen Sie Ihre Seite auf verschiedenen Geräten und in verschiedenen Browsern öffnen, um zu sehen, wie sie dargestellt wird.
Sie sollten mindestens Folgendes testen:
HTML-Markups helfen dabei, die verschiedenen Elemente Ihrer Seite hervorzuheben. Strukturierte Daten helfen Suchmaschinen, den Inhalt der verschiedenen Elemente Ihrer Seite zu lesen und ihn besser zu verstehen.
Strukturierte Daten sind einfach eine Reihe von Anweisungen in einer einfachen Sprache wie JSON-LD, die in den bestehenden HTML-Code Ihrer Webseite eingefügt werden können. Stellen Sie sich das wie eine Meta-Beschreibung vor, nur eben für einzelne Inhalte Ihrer Seite.
Im folgenden Beispiel helfen strukturierte Daten Google dabei, fünf Attribute einer dbpedia-Seite über John Lennon zu identifizieren:
Quelle: https://json-ld.org/
Wie Sie sehen können, ist der Code in einer einfachen Sprache verfasst, die sowohl für einen menschlichen Leser als auch für einen Webcrawler leicht verständlich ist.
Hier ist ein weiteres Beispiel, das zeigt, wie strukturierte Daten direkt in den bestehenden HTML-Code Ihrer Webseite integriert werden können. Die Anweisungen für die strukturierten Daten sind grün hervorgehoben.
Quelle: developers.google.com
In diesem Beispiel teilen strukturierte Daten dem Googlebot mit, dass es sich um eine Rezeptseite für Kaffeekuchen von einer gewissen Mary Stone handelt.
Die Verwendung strukturierter Daten im Website-Layout führt zu messbaren Ergebnissen. Beispielsweise kann die Klickrate (CTR) einer Website um bis zu 30 % gesteigert werden.
Die Verwendung strukturierter Daten trägt außerdem dazu bei, dass Ihre Seite in Googles Karussell-, Featured-Snippet-, Video- und Knowledge-Panel-Funktionen besser platziert wird.
Für die Suchmaschinenoptimierung von Google News ist es wichtig, beim Erstellen strukturierter Daten die folgenden Elemente einzubeziehen, um einen Mehrwert zu bieten:
So geht's: Sie können strukturierte Daten/Schema zu Ihren Inhalten entweder manuell oder mithilfe eines Plugins für Ihr jeweiliges CMS hinzufügen.
Alle Elemente Ihres Nachrichtenartikels sollten in einer bestimmten Reihenfolge angeordnet sein, um ein schnelleres und einfacheres Crawling zu ermöglichen. Die Reihenfolge ist wie folgt:
Die Seitenerfahrung misst, wie Nutzer Ihre Seite erleben. Google verwendet verschiedene Parameter, um die Seitenerfahrung zu quantifizieren. Wir haben den Faktoren der Seitenerfahrung ein eigenes Modul , daher werden wir sie hier nur kurz betrachten.
So geht's: Sie können die Seitenleistung sowohl manuell als auch mithilfe von Plugins oder Drittanbieter-Apps testen. PageSpeed Insights ist beispielsweise ein praktisches Tool, mit dem Sie die Performance Ihrer Website anhand des CWV-Werts und anderer Parameter analysieren und eine Bewertung vergeben können. Es testet außerdem die Responsivität auf Mobilgeräten und Desktop-Computern.
Nachrichtenverlage sollten nicht mehrere Artikel unter derselben URL veröffentlichen. Dies verhindert, dass Google sie indexiert. Jeder Artikel sollte eine eigene, eindeutige URL haben.
Darüber hinaus sollten diese URLs permanent sein. Das bedeutet, dass dieselbe Nachricht unter einer bestimmten URL angezeigt werden sollte. Ändert sich die mit einer bestimmten URL verknüpfte Nachricht häufig, kann Google sie nicht crawlen und indexieren. Herausgeber sollten die Nachricht daher so oft wie nötig aktualisieren.
Falls Weiterleitungen für Nachrichtenartikel verwendet werden müssen, sollten diese gemäß den folgenden Best Practices implementiert werden:
Die in diesem Abschnitt aufgeführten Maßnahmen sind zwar nicht so wichtig wie die oben genannten, wir empfehlen aber dennoch, so viele wie möglich davon umzusetzen, sobald die oben genannten geschäftskritischen Punkte erledigt sind.
Der<head> Ein Seitenelement enthält wichtige Informationen über die Seite, die nicht direkt auf der Seite angezeigt werden. Es handelt sich dabei um Metadaten, die dem Googlebot helfen, den Seiteninhalt zu identifizieren und zu klassifizieren.
In der Regel gilt Folgendes:<head> Das Element sollte nur die wichtigsten Tags enthalten, damit ein Beitrag korrekt gecrawlt und dargestellt werden kann. Dazu gehören:
Alles andere, was darin enthalten ist<head> Das Element könnte Webcrawler verwirren.
Beispielsweise verwechseln Anfänger häufig den Titel-Tag mit<h1> und platzieren Sie letzteres innerhalb des<head> Element. Wie bereits erläutert, das<head> Ein Element darf nur Metadaten enthalten, die nicht auf der Seite angezeigt werden.
Auch wenn Titel und<h1> sollten im Wesentlichen die gleichen Informationen enthalten, wobei es sich bei ersterem um Metadaten handelt, die für Webcrawler bestimmt sind und in den SERP-Ergebnissen und im Browsertab angezeigt werden sollen, während letzteres Informationen sind, die auf der Seite angezeigt werden sollen.
Der folgende Code zeigt, wie man den Titel innerhalb des<head> Element.
Quelle: developer.mozilla.org
Die Verwendung von Seitenelementen, die das Scannen von Inhalten erleichtern und eine reibungslose Navigation für den Benutzer ermöglichen, wirkt sich auch auf die Suchmaschinenoptimierung aus.
Eine benutzerfreundliche Seite enthält folgende Elemente:
Sofern Sie kein erfahrener Webentwickler sind, ist es ratsam, einen Experten zu konsultieren, um die beste Methode zur Implementierung einer benutzerfreundlichen UX zu finden.
Google möchte, dass Publisher Anzeigen schalten, ohne die Nutzererfahrung zu beeinträchtigen. Daher kann Google Webseiten abstrafen, die zu viele aufdringliche Anzeigen schalten. Obwohl die Nutzererfahrung ein subjektives Kriterium ist, gibt es bei Google bestimmte Richtlinien und Best Practices für die Anzeigenschaltung.
Einige davon beziehen sich auf:
Mehr zu Werbung und Pop-ups finden Sie in unserem ausführlichen Modul .
Javascript eignet sich hervorragend zur Erstellung dynamischer und interaktiver Inhalte, aber Webcrawler könnten Schwierigkeiten beim Rendern haben.
Dies liegt daran:
Bei Nachrichtenartikeln empfiehlt es sich, Unterbrechungen wie Karussells mit verwandten Artikeln oder Bildergalerien zu vermeiden.
Viele erfolgreiche Publisher sind besorgt, wenn sie ihre Website neu starten oder umgestalten, da Google die Seite dafür neu crawlen muss. Befolgen Sie diese Best Practices, um einen reibungslosen Übergang nach dem Relaunch zu gewährleisten:
Halten Sie Ihre Artikelseiten so schlank wie möglich. Wir haben bereits besprochen, wie man JavaScript in Artikeln vermeiden kann, aber es ist auch ratsam, auf umfangreiche HTML-Inhalte zu verzichten.
Das liegt daran, dass der Googlebot beim ersten Crawling Ihrer Seite maximal 15 MB an Seitendaten herunterladen kann. Für die meisten Seiten ist das kein großes Problem, da datenintensive Elemente wie Videos und Bilder separat im Code referenziert werden, den der Googlebot später indexiert, und somit nicht unter diese 15-MB-Grenze fallen.
Dies unterstreicht jedoch einmal mehr die Tatsache, dass je schlanker Ihre Seite ist, desto einfacher ist es für Googlebot, sie zu crawlen und zu indexieren.
Tipp: Um die Größe Ihrer Seite zu überprüfen, öffnen Sie die Entwicklertools Ihres Browsers, wechseln Sie zum Tab „Netzwerk“ und laden Sie die Seite neu. Dadurch werden alle Anfragen angezeigt, die Ihr Browser zum vollständigen Rendern der Seite gesendet hat. Die erste Anfrage in dieser Liste zeigt die Größe Ihrer Seite in der Spalte „Größe“ an. Bei den meisten Internetseiten wird dieser Wert in Kilobyte angegeben.
Artikel-Snippets bieten Lesern eine Vorschau des Seiteninhalts, bevor sie darauf klicken. Google ermittelt das passende Snippet für jeden Artikel, indem der Text im Hauptteil des Artikels direkt unter dem Titel gecrawlt wird.
Um zu vermeiden, dass Googlebot fehlerhafte Snippets einbindet, stellen Sie Folgendes sicher:
Manchmal indexiert Googlebot Ihr Bild entweder gar nicht oder ein anderes Bild als das, das Sie in Ihrem Artikel verwenden wollten. Um dies zu vermeiden, beachten Sie bitte folgende Best Practices:
Googlebot verwendet den Titel Ihres Artikels, um ihn korrekt zu identifizieren und zu indexieren. Beachten Sie die folgenden Best Practices, um sicherzustellen, dass Ihr Titel korrekt gelesen wird:
Betrachten wir zwei Fallstudien von Standorten, die die in diesem Artikel beschriebenen Schritte bereits umgesetzt haben.
Moderne Nachrichtenwebseiten sind komplex und vielfältig, daher wäre es unrealistisch, von ihnen eine strikte Einhaltung dieser Richtlinien zu erwarten. In diesem Abschnitt möchten wir jedoch aufzeigen, wie die Befolgung der Richtlinien zu vorhersehbaren und messbaren Ergebnissen führen kann.
Der Manly Observer ist eine lokale Nachrichtenwebsite für die Bewohner eines beliebten Strandvororts von Sydney, Australien. Im Folgenden sehen Sie, wie ein typischer Nachrichtenartikel auf der Website aussieht:
Folgende Gestaltungselemente sind auf den ersten Blick klar erkennbar:
Beim Blick auf den HTML-Code der Seite können wir die Verwendung von semantischem Markup erkennen.
Dieser Code ist für Menschen leicht lesbar. Man kann daher davon ausgehen, dass ein Webcrawler diesen Code ebenso leicht lesen und interpretieren kann.
Die Website verwendet das https://-Schema und zeigt keine Pop-up-Werbung oder Interstitials innerhalb des anfänglichen Viewports an.
Entrepreneur ist ein beliebtes Magazin für Unternehmer und Unternehmen. So sieht die Homepage aus.
Die Website lädt blitzschnell und enthält keine Pop-up-Werbung oder Videos auf der Startseite. Die meisten Anzeigen werden in den einzelnen Nachrichtenartikeln platziert.
Wenn wir auf „Quelltext anzeigen“ klicken, sehen wir folgenden HTML-Code:
Auf einen Blick lässt sich aus diesem Code Folgendes erkennen:
Beim Scrollen nach unten sehen wir das folgende Codeelement:
Wir hatten die Verwendung von schema.org und Opengraph (OG) für Bilder besprochen. Zusammenfassend lässt sich sagen, dass schema.org und OG Arten von strukturierten Daten sind, die Webcrawlern helfen, bestimmte Codeelemente leichter zu identifizieren. Wir sehen hier die Implementierung von schema.org und OG.
Weiter unten sehen wir auch strukturierte Datentags, wie unten dargestellt:
Wie unser vorheriges Beispiel verwendet auch entrepreneur.com das https://-Schema im Link, verzichtet auf störende Interstitials und Pop-ups und lädt schnell. Die Nachrichtenartikel folgen einem festgelegten Format mit Titel, Bild, Autorenangabe, Datum und Haupttext. Dies führt zu einer besseren Nutzererfahrung und somit zu einer verbesserten technischen Suchmaschinenoptimierung.
Nachdem Sie diese Lektion durchgearbeitet haben, sollten Sie in der Lage sein, bestehende Nachrichtenseiten zu überprüfen und zu aktualisieren, um deren Design und Layout zu optimieren und den technischen SEO-Best Practices zu entsprechen.
Jetzt aktiv
Mehr anzeigen
