Wachstumstaktiken für Verlage für die Wahlsaison | WEBINAR
Wachstumstaktiken für Verlage für die Wahlsaison | WEBINAR
Nachdem Sie diesen Leitfaden durchgearbeitet haben, sollten Sie in der Lage sein zu verstehen, wie vorhandene Nachrichtenartikel geändert und mithilfe von Seitenlayoutdesigns erstellt werden, die die Fähigkeit von Google verbessern, den Inhalt der Seite zu crawlen und zu verstehen.
Videodauer
15:35
Quiz beantworten
Nehmen Sie das aktuelle Modulquiz
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 Endbenutzer angezeigt wird. Dies ist wichtig, da Google letztendlich von einer User-First-Philosophie angetrieben wird. Webseiten, die das Bedürfnis des Benutzers zuerst, am schnellsten und auf einfachste Weise befriedigen, werden mit höheren SERP-Rankings belohnt.
Das Design und Layout Ihrer Website bestimmt auch, wie einfach Web-Crawler wie der Google-Bot sie crawlen und indizieren. Ein einfaches und optimiertes Design und Layout bedeutet schnelles und einfaches Crawlen, was sich wiederum in besseren Rankings niederschlägt.
Was hindert Publisher also daran, Best Practices für Design und Layout umzusetzen? Am häufigsten werden Verlage mit diesen Schmerzpunkten konfrontiert:
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 ergaben die Suchergebnisse:
Auf Platz zwei der Top Stories SERP-Rangliste, direkt über einer Story von NME, steht der Artikel von Daily Illini über Charlie Puths neueste Veröffentlichung.
Die Tatsache, dass die Zeitung Daily Illini, eine Studentenzeitung der Universität, die weltweit größte eigenständige Musik-Website übertrifft, wirft einige wichtige Fragen auf
Wie kann eine Studentenzeitung in einer Stadt mit etwa 40.000 Einwohnern im Mittleren Westen der USA die größte Musiknachrichten-Website der Welt übertreffen? Fasziniert beschließen wir, noch ein wenig herumzustöbern.
Zuerst haben wir uns die Seite von NME über Charlie Puth angesehen.
Als erstes bemerken wir das Popup-Video als erstes, um die rechte Ecke des Bildschirms zu laden. Es ist offensichtlich nicht sehr gut zu laden. Das Puffervideo verbirgt auch einen Teil der Nachrichtenüberschrift und ihres Körpers.
Als nächstes stellen wir fest, dass das erste Ansichtsfenster hauptsächlich von Dingen bewohnt wird, die für die Nachrichtengeschichte nicht relevant sind. Es gibt eine große Bannerwerbung, die etwa die Hälfte der Seite abdeckt, und natürlich gibt es das Video.
Tatsächlich begegnen wir auf der Seite mehr Videos, größere, reiche Bilder, mehr Popup-Anzeigen und viele Hyperlinks. Angesichts der medienreichen Seite dauerte es eine ganze Weile, dass das Laden eine ganze Weile dauerte.
Als nächstes haben wir die Daily Illini inspiziert und hier ist, was wir gefunden haben.
Die Seite ist ordentlich, sauber und übersichtlich. Es hat seinen Anteil an Anzeigen und einen großen Spendenknopf oben, aber es gibt keine Videos oder Pop-ups, die das Ansichtsfenster abdecken oder die Überschrift der Nachrichten behindern. Wir können die Überschrift sofort sehen, und es ist sehr wahrscheinlich, dass dies für Googles Web -Crawler gilt.
Insgesamt ist die Seite leicht, minimalistisch und blitzschnell zum Laden.
Wir beschlossen, den zugrunde liegenden Code ein wenig mehr unter die Motorhaube zu schauen. Wenn Sie mit der rechten Maustaste auf die Seite klicken und die Quelle der Ansicht auswählen, können wir den Code der Seite sehen.
Das haben wir für die NME -Seite gesehen:
Zwei Dinge erregten hier unsere Aufmerksamkeit:
Dies ist aus zwei Gründen nicht das Beste für eine Seite:
Als wir uns den Code für die tägliche Illini -Seite dagegen ansah, sahen wir Folgendes:
Dies ist ein sehr einfacher HTML -Code. Außerdem werden innerhalb der Skripte keine Skripte ausgeführt<head> Abschnitt.
Wie summiert sich das alles zu dem täglichen Illini, der NME überträgt?
Hier gibt es wahrscheinlich eine Reihe von Faktoren, und eines ist Design und Layout. Auf der Daily Illini -Seite werden bestimmte Design- und Layout -Techniken bereitgestellt, die selbst kleine Verlage leicht replizieren können, um ihre Gesamt -SEO -Strategie zu steigern.
Dazu gehören die Verwendung von sauberem, einfachem HTML-Code, das Vermeiden von Skripten im Abschnitt über den Kopf, die Seite des Seitens und schnelles Laden und nicht zu stark auf Pop-ups und interstitielle Anzeigen.
Die folgende Anleitung greift jeweils ausführlich in eine davon aus und erklärt dabei mehrere andere Techniken, die Sie implementieren können, um Ihre SERP -Rangliste erheblich zu verbessern.
Die Semantik bezieht sich auf die Bedeutung von Wörtern. Semantische HTML -Tags sind diejenigen, die ihre Bedeutungen sowohl für den Leser als auch für einen Web -Crawler eindeutig definieren.
Zum Beispiel, wenn wir ein Tag wie verwenden<header> Wir wissen, was es enthält - Informationen über den Header.
Ähnlich<h1> ist ein semantisches Tag, das GoogleBot mitteilt, dass das, was folgt, die wichtigste Überschrift im Artikel ist.
Im Gegensatz dazu, wenn wir ein Tag wie verwenden<div> , seine Bedeutung ist nicht sofort erkennbar. In HTML<div> steht für Division, und alles, was dies impliziert, ist, dass ein neuer Code -Abschnitt begonnen hat, ohne notwendigerweise Informationen über den Inhalt dieses Abschnitts zu enthüllen.
Webcrawler wie GoogleBot werden mit künstlichen Intelligenz und maschinellem Lernalgorithmen erstellt, die versuchen, die Funktionsweise des menschlichen Gehirns zu simulieren. Dies bedeutet, dass sie Text in ähnlicher Weise wie das menschliche Gehirn ergeben.
Der HTML -Code, der für Menschen leicht zu verstehen ist, sollte auch für Googles Web -Crawler von Google leicht zu verstehen sein.
Betrachten Sie als Beispiel die beiden folgenden HTML -Code -Teile:
Quelle: https://www.pluralsight.com/guides/semantic-html
Diese Seite verwendet die<div> Markieren Sie für alles, vom Header bis zum Hauptinhalt bis zur Fußzeile. Es wird nicht sofort erkennen, indem die Tags gelesen werden, was sein Inhalt ist.
Im Gegensatz dazu verwendet die folgende Seite das semantische Markup. Der Header wird in die platziert<header> Tag, die Fußzeile innerhalb der<footer> Tag, und der Hauptteil des Artikels geht innerhalb des<main> Etikett.
Quelle: https://www.pluralsight.com/guides/semantic-html
Da dies für GoogleBot einfach ist, um zu lesen und zu verstehen, hat diese Seite eine bessere Chance, höher zu rängen als die vorherige, alle anderen Dinge sind gleich.
Um anzuzeigen, ob Ihre Seite semantisches Markup verwendet, klicken Sie einfach mit der rechten Maustaste auf die Seite, wenn Sie Google Chrome verwenden, und klicken Sie auf Überprüfung. Sie können den HTML -Quellcode der Seite sehen. Gemeinsame semantische Elemente umfassen<author> Anwesend<video> Anwesend<article> Anwesend<form> Anwesend<header> , usw.
Wir wissen jetzt, was semantisches Markup ist und warum es wichtig ist. Aber wie nutzen wir es, um die SEO zu verbessern?
Es ist einfach - verwenden Sie immer semantisches Markup, um wichtige Informationen über das Design und das Layout Ihres Artikels zu markieren. Dies beinhaltet die folgenden Artikelinformationen:
Stellen Sie sicher, dass das Layout Ihrer Seite gut geordnet ist, um das Kriechen zu verbessern
Sie entwerfen Ihre Website so, dass Sie sowohl von Menschen als auch von Webcrawlern gelesen werden, und als solches sollte Ihr Design und Ihr Layout diese Tatsache widerspiegeln.
Im Folgenden finden Sie einige Tipps, mit denen Sie messbare Ergebnisse für Ihre Website erzielen können.
Sie können HTML, CSS, JavaScript oder eine andere Frontend -Sprache verwenden, um reichhaltige und interaktive Seiten zu erstellen. Denken Sie jedoch daran, dass je fortgeschritten die Sprache ist, desto größer ist ihre Komplexität und die größere Chancen besteht darin, dass es einem Web -Crawler es schwer fällt, es zu lesen, zu interpretieren und zu kompilieren.
Alles, was in HTML codiert ist, ist vielleicht nicht die schönsten zu sehen, aber es wird sowohl schneller geladen als auch für Suchmaschinen optimiert, aus dem einfachen Grund, dass Suchmaschinen es schneller lesen und verstehen können.
Stellen Sie sich einfaches HTML als das Skelett Ihrer Webseite vor. Sie können CSS und JavaScript hinzufügen, um es auszuziehen und es ästhetisch ansprechend und dynamisch aussehen zu lassen, aber es wäre besser, den wichtigsten Inhalt im Skelett zu halten, anstatt ihn in das Fleisch zu legen.
Wie implementieren wir Plain HTML? Eine einfache Möglichkeit, dies zu tun<article> HTML -Tags.
Auf diese Weise begegnen Webcrawlers auf die<article> Tag, sie wissen sofort, dass das, was folgt, der wichtigste Inhalt auf Ihrer Seite ist - der Nachrichtenartikel. Dies hilft der Suchmaschine zu verstehen, dass der in dieses Tag eingewickelte Inhalt mehr Gewicht zugewiesen werden muss.
Einfache HTMLs<article> Tag ist ein semantischer Marker, der so aussieht:
Quelle: https://en.wikipedia.org/wiki/article_element
Die nächste offensichtliche Frage? Wenn ich ein CMS wie WordPress verwende, wo füge ich diese Tags ein?
So können Sie dies tun: Wenn Sie eine benutzerdefinierte Website über HTML erstellen, können Sie den Quellcode überprüfen, um sicherzustellen, dass sie einfach in kritischen Bereichen einfache HTML verwendet. Wir empfehlen, mit einem Entwickler ausführlicher zu sprechen, um sicherzustellen, dass Sie die Funktionalität nicht zufällig versiegen.
Wenn Sie WordPress verwenden, lesen Sie diese Anleitung . Sie können diese Anleitung auch finden , wie HTML in Beiträge und Seiten eine nützliche Referenzquelle einfügt.
Diese Anweisungen beziehen sich auf WordPress, da WordPress das beliebteste CMS für Verlage bleibt. Wenn Sie ein anderes CMS wie Wix verwenden, wenden Sie sich bitte an die Support- oder Dokumentationsseite für Ihr CMS.
Wenn Sie Zugriff auf ein Team von Webentwicklern haben, ist es am besten, dass sie dies tun, da die Bearbeitung von HTML -Code zeitaufwändig sein kann.
Test, um sicherzustellen, dass Ihr Inhalt in allen Browsern, Geräten und Größen korrekt angezeigt wird. Dieser ist offensichtlicher, aber oft übersehen. Wenn Ihr Inhalt nicht so erscheint, wie Sie es auf allen Browsern und Geräten möchten, wirkt sich dies auf die Benutzererfahrung und auf lange Sicht auf Ihre SERP -Ranglisten aus.
So tun Sie dies: Um Inhalte über Plattformen hinweg zu testen, müssen Sie Ihre Seite auf verschiedenen Geräten und in verschiedenen Browsern öffnen, um zu sehen, wie sie gerendert wird.
Zumindest sollten Sie Folgendes testen:
HTML -Markups helfen dabei, die verschiedenen Elemente Ihrer Seite zu unterstreichen. Strukturierte Daten helfen Suchmaschinen, das zu lesen, was sich in den verschiedenen Elementen Ihrer Seite befindet, und verstehen Sie den Inhalt besser.
Strukturierte Daten sind einfach eine Reihe von Anweisungen, die in einer einfachen Sprache wie JSON-LD geschrieben wurden und in den vorhandenen HTML-Code Ihrer Webseite eingefügt werden können. Stellen Sie sich es wie eine Meta -Beschreibung vor, aber für einzelne Inhaltsstücke auf Ihrer Seite.
Im folgenden Beispiel helfen strukturierte Daten Google, fünf Attribute zu einer DBpedia -Seite auf John Lennon zu identifizieren:
Quelle: https://json-ld.org/
Wie Sie sehen können, befindet sich der Code in einer einfachen Sprache, die sowohl für einen menschlichen Leser als auch für einen Web -Crawler zu verstehen ist.
Hier ist ein weiteres Beispiel, das zeigt, wie strukturierte Daten direkt in den vorhandenen HTML -Code Ihrer Webseite passen können. Die strukturierten Datenanweisungen sind grün hervorgehoben.
Quelle: Entwickler.google.com
In diesem Beispiel geben strukturierte Daten GoogleBot mit, dass es sich um eine Rezeptseite über Kaffeekuchen handelt, die jemand namens Mary Stone namens Mary Stone ist.
Die Verwendung strukturierter Daten im Layout Ihrer Website liefert messbare Ergebnisse. Beispielsweise kann die Verwendung strukturierter Daten die Klickrate einer Website (CTR) um bis zu 30%erhöhen.
Die Verwendung strukturierter Daten hilft auch Ihrer Seite, die Karussells von Google, Snippets, Videos und Wissenspanel zu verbessern.
Für Google News SEO ist es wichtig, die folgenden Elemente beim Erstellen strukturierter Daten einzubeziehen, um zusätzlichen Wert zu erzielen:
So tun Sie dies: Sie können Ihrem Inhalt entweder manuell oder mit einem Plugin für Ihr bestimmtes CMS strukturierte Daten/Schema hinzufügen.
Alle Elemente Ihres Nachrichtenartikels sollten in einer bestimmten Reihenfolge arrangiert werden, um schneller und einfacheres Kriechen zu ermöglichen. Die Reihenfolge lautet wie folgt:
Die Seitenerfahrung ist ein Maß dafür, wie Benutzer Ihre Seite erleben. Google verfügt über eine Reihe von Parametern, um die Seitenerfahrung zu quantifizieren. Wir haben ein ganzes Modul für Seitenerlebnisfaktoren , daher werden wir uns hier nur kurz kurz ansehen.
So tun Sie dies: Sie können die Seitenerfahrung sowohl manuell als auch mit Plugins oder Apps von Drittanbietern testen. Beispielsweise Page Speed Insights ein praktisches Tool, mit dem Sie die Leistung Ihrer Website basierend auf CWV und anderen Parametern analysieren und eine Punktzahl basierend auf seiner Analyse zuweisen. Es wird auch sowohl die Reaktionsfähigkeit der mobilen als auch für die Desktop -Reaktion getestet.
Nachrichtenverleger sollten nicht mehrere Nachrichtenartikel unter derselben URL veröffentlichen. Dies behindert Google daran, sie zu indizieren. Jeder Nachrichtenartikel sollte eine eigene URL haben.
Darüber hinaus sollten diese URLs dauerhaft sein. Dies bedeutet, dass dieselbe Nachricht in einer bestimmten URL angezeigt werden sollte. Wenn sich die Nachricht, die mit einer bestimmten URL zugeordnet ist, häufig ändert, kann Google sie nicht kriechen und indexieren. Verlage sollten jedoch die Nachrichtengeschichte so oft aktualisieren, wie es benötigt wird.
Wenn Weiterleitungen für Nachrichtenartikel verwendet werden müssen, sollten sie gemäß den folgenden Best Practices implementiert werden:
Während die in diesem Abschnitt aufgeführten Aktionselemente nicht so wichtig sind wie oben, empfehlen wir dennoch, so viele dieser dieser oben aufgeführten geschäftskritischen Punkte zu implementieren.
Der<head> Das Element einer Seite enthält wichtige Informationen über die Seite, die auf der Seite nicht tatsächlich angezeigt wird. Was es beinhaltet, ist Metadaten, mit denen GoogleBot den Inhalt der Seite identifiziert und klassifiziert.
In der Regel die<head> Das Element sollte nur die wichtigsten Tags und sonst nichts enthalten, sodass ein Beitrag ordnungsgemäß gekrabbt und gerendert werden kann. Dazu gehören:
Alles andere, das innerhalb der enthalten ist<head> Element verwirren wahrscheinlich Webcrawler.
Beispielsweise verwechseln Anfänger häufig den Titel-Tag mit<h1> und platzieren Sie letztere innerhalb der<head> Element. Wie bereits erläutert,<head> Das Element kann nur Metadaten enthalten, die nicht auf der Seite angezeigt werden.
Obwohl Titel und<h1> sollten im Wesentlichen dieselben Informationen enthalten. Erstere sind Metadaten, die für Webcrawler bestimmt sind und in den SERP-Ergebnissen und im Browser-Tab angezeigt werden sollen, während letztere Informationen sind, die auf der Seite angezeigt werden sollen.
Der folgende Code zeigt, wie Sie den Titel innerhalb des<head> Element.
Quelle: Entwickler.mozilla.org
Verwenden von Seitenelementen, die es einfach machen, Inhalte zu scannen und die Navigation zu einer reibungslosen Erfahrung für den Benutzer zu machen, wirkt sich auch auf die SEO aus.
Eine leicht zu navigierende Seite enthält diese Elemente:
Wenn Sie kein erfahrener Webentwickler sind, können Sie sich am besten mit einem Experten beraten, um einen benutzerfreundlichen UX zu implementieren.
Google möchte, dass Verlage Anzeigen anzeigen, ohne die Erfahrung des Benutzers zu stören. Aus diesem Grund kann es Websites bestrafen, die zu viele aufdringliche Anzeigen zeigen. Während die Benutzererfahrung eine subjektive Metrik ist, hat Google bestimmte Richtlinien und Best Practices in Bezug auf Anzeigen.
Einige von ihnen beziehen sich auf:
Weitere Informationen zu Anzeigen und Popups finden Sie in unserem detaillierten Modul .
JavaScript eignet sich hervorragend zum Erstellen dynamischer und interaktiver Inhalte, aber Webcrawler kann Schwierigkeiten haben, ihn zu rendern.
Das liegt daran, dass:
Bei Nachrichtenartikeln ist es eine gute Praxis, Unterbrechungen wie verwandte Artikelkarusselle oder Bildgalerien zu vermeiden.
Viele Verlage, die sich bei der Neugestaltung/Neugestaltung ihrer Website gut machen, da Google die Website einstellen muss. Befolgen Sie diese Best Practices, um einen reibungslosen Übergang nach Neugestaltung/Relaunch zu gewährleisten:
Halten Sie Ihre Artikelseiten so leicht wie möglich. Wir haben uns bereits angesehen, JavaScript in Artikeln zu vermeiden, aber es ist auch eine gute Praxis, starke HTML -Inhalte zu vermeiden.
Dies liegt daran, dass bei GoogleBot Ihre Seite krabbelt, sondern nur maximal 15 MB Seitendaten im ersten Crawl herunterladen kann. Auf den meisten Seiten ist dies kein wichtiges Problem, da in dem Code, den Google später in der Indizierung von Google, separat referenziert und somit über den Bestell dieser 15 -MB -Grenze hinausgeht.
Dies zeigt jedoch erneut auf die Tatsache, dass das leichtere Ihre Seite einfacher ist, um sie zu kriechen und zu indizieren.
Tipp: Wenn Sie die Größe Ihrer Seite überprüfen möchten, wechseln Sie zur Seite der Entwicklertools Ihres Browsers, wechseln Sie zur Registerkarte Netzwerk und laden Sie die Seite neu. Dadurch werden alle Anforderungen angezeigt, die Ihr Browser gestellt hat, um die Seite vollständig zu rendern. Die erste Anfrage in dieser Liste zeigt die Größe Ihrer Seite unter der Spalte Größe. Auf den meisten Seiten im Internet befindet sich diese Zahl normalerweise in Kilobyten.
Artikelausschnitte geben den Lesern eine Vorschau des Inhalts auf der Seite, bevor sie darauf klicken. Google ermittelt den Snippet für jeden Artikel, indem er den Text im Hauptteil des Artikels direkt unter dem Titel krabbelt.
Um die Möglichkeit von GoogleBot einschließlich falscher Ausschnitte zu vermeiden, stellen Sie sicher, dass:
Manchmal kann GoogleBot Ihr Bild entweder nicht indizieren oder ein anderes Bild indexieren als das, das Sie mit Ihrem Artikel vorstellen möchten. Um dies zu vermeiden, befolgen Sie diese Best Practices:
GoogleBot verwendet den Titel Ihres Artikels, um ihn korrekt zu identifizieren und zu indizieren. Verwenden Sie diese folgenden Best Practices, um sicherzustellen, dass Sie Ihren Titel genau lesen:
Schauen wir uns zwei Fallstudien von Standorten an, die bereits die in diesem Artikel erörterten Schritte implementiert haben.
Moderne Nachrichten -Websites sind komplex und reichhaltig, und es wäre unrealistisch, dass sie diese Richtlinien streng an die Einhaltung dieser Richtlinien einhalten. In diesem Abschnitt versuchen wir jedoch zu demonstrieren, wie die Befolgung der Richtlinien zu vorhersehbaren, messbaren Ergebnissen führen kann.
The Manly Observer ist eine hyperlokale Nachrichten-Website, die dem Publikum in einem beliebten Vorort von Strand auf Sydney, Australien, eingeräumt wird. Im Folgenden sieht ein typischer Nachrichtenartikel auf der Website aus:
Wir sehen die folgenden Elemente des Designs klar und auf den ersten Blick: Gegenwart:
Wenn wir den HTML -Code der Seite als nächstes betrachten, können wir die Verwendung von semantischem Markup sehen.
Dies ist Code, der von einem Menschen leicht lesbar ist. Man kann davon ausgehen, dass ein Web -Crawler diesen Code mit gleicher Leichtigkeit lesen und interpretieren kann.
Die Website verwendet das Schema https: // und verfügt über keine Popup-Anzeigen oder Interstitials, die innerhalb des ersten Ansichtsfensters geladen werden.
Unternehmer ist ein beliebtes Magazin für Unternehmer und Unternehmen. So erscheint seine Homepage.
Die Website ist blitzschnell zu laden und es gibt keine Pop-up-Anzeigen oder Videos auf der Homepage selbst. Der größte Teil der AD -Platzierung erfolgt in einzelnen Nachrichtenartikeln.
Wenn wir auf "Quelle anzeigen" klicken, sehen wir den folgenden HTML -Code:
Auf einen Blick können wir aus diesem Code Folgendes erkennen:
Wenn wir nach unten scrollen, sehen wir das folgende Codeelement:
Wir hatten die Verwendung von Schema.org und OpenGraph (OG) für Bilder besprochen. Um zusammenzufassen, sind Schema.org und OG Arten von strukturierten Daten, mit denen Webcrawler bestimmte Elemente des Codes leichter identifizieren können. Wir sehen Schema.org und OG hier implementiert.
Weiter unten sehen wir auch strukturierte Daten -Tags, wie unten gezeigt:
Wie bei unserem vorherigen Beispiel verwendet entrepreneur.com auch das Schema https: // in seinem Link, hat keine störenden Interstitials oder Pop-ups und ist schnell zu laden. Die Nachrichtenartikel folgen einem festgelegten Format von Titel, Bild, Zuordnung, Datum und Hauptinhalt. Dies führt zu einer besseren Seitenerfahrung und verbesserte damit technische SEO.
Nachdem Sie diese Lektion durchgearbeitet haben, sollten Sie vorhandene Nachrichtenseiten überprüfen und aktualisieren, um ihr Design und das Layout zu optimieren, um die Best Practices für technische SEO zu halten.
