Website positioning and Accessibility: Technical Website positioning [Series Part 3]

0

Die Ansichten des Autors sind vollständig seine oder ihre eigenen (mit Ausnahme des unwahrscheinlichen Ereignisses der Hypnose) und spiegeln möglicherweise nicht immer die Ansichten von Moz wider.

Wir hoffen, Ihnen hat diese Serie über SEO und Barrierefreiheit gefallen. In der letzten Folge zeigt Ihnen Cooper, wie die technischen SEO-Strategien, die Sie auf Ihrer Website implementieren, dazu beitragen können, diese wahrnehmbarer, bedienerfreundlicher, verständlicher und robuster zu machen.

Klicken Sie auf das Whiteboard-Bild oben, um eine größere Version in einem neuen Tab zu öffnen!

Video-Transkription

Hey, Moz-Fans. Willkommen zur neuesten Ausgabe von Whiteboard Friday. Ich bin Cooper Hollmaier. Ich mache seit 2016 SEO und arbeite heute für einen großen Outdoor-Händler, um unsere technische SEO-Strategie zum Leben zu erwecken. Vielen Dank, dass Sie an dieser Reihe über SEO und Barrierefreiheit teilgenommen haben.

Ich hoffe, dass Sie eine breite Perspektive und neue Tipps und Tricks für die Erstellung von Inhalten erhalten haben, die nicht nur bei Ihrem Publikum Anklang finden, bei der Suche eine gute Leistung erbringen, sondern auch mehr Menschen zugänglich sind. Heute werden wir über technisches SEO und Barrierefreiheit sprechen.

Technisches SEO und Barrierefreiheit

Lassen Sie uns eintauchen. Das letzte Mal haben wir über Richtlinien für die Barrierefreiheit von Webinhalten gesprochen, und Sie werden sich vielleicht daran erinnern, dass die vier Prinzipien der WCAG wahrnehmbar, funktionsfähig, verständlich und robust sind.

Wahrnehmbar

Als technischer SEO sind Sie wahrscheinlich am meisten mit Wahrnehmbarem beschäftigt, weil es in Ihrem täglichen Betrieb, Ihrem täglichen Arbeitsablauf darum geht, sicherzustellen, dass die Seiten, die Inhalte und die Erlebnisse, die Sie erstellen, für die Suche zugänglich sind Suchmaschinen und wahrnehmbar für Suchmaschinen.

Wenn wir SEO-Empfehlungen oder SEO-Audits durchgehen, höre ich häufig häufig verwendete Themen, z. B. das Header-Tag ist in das Bild eingebrannt, sodass eine Suchmaschine es nicht sehen kann oder der Inhalt, den ich produziere sichtbar für Bots, aber nicht sichtbar für Menschen. Dies sind Probleme mit der Wahrnehmung auf Basisebene. Ich möchte, dass Sie diese Einstellung einnehmen und überlegen, ob Sie dies auch auf Ihr gesamtes Publikum anwenden. Können also alle Ihre Mitarbeiter, die sich mit Ihrem Service oder Ihrem Produkt oder Ihrer Erfahrung beschäftigen möchten, alle Dinge, die Sie anbieten, auf einer grundlegenden Ebene wahrnehmen?

1. Stile

Bild einer handgeschriebenen Liste von Stiländerungen, einschließlich nativem Text, ohne Keyword-Füllung und Farbkontrast.

Einige Dinge, die Sie vielleicht denken, ähneln denen, die Sie bei dieser Prüfung sehen würden, wie z. B.: Ist mein gesamter Text auf der Seite sichtbar? Ist es aktiver Text? Ist es nativ auf der Seite, kann ich es also auswählen und kopieren und einfügen, oder ist es in das Bild eingebrannt und für unterstützende Technologien oder Browser nicht erreichbar, oder was haben Sie? Sie könnten auch denken: Ist der Farbkontrast zu meinem Hintergrund und meinem Text der richtige Kontrast?

Gibt es genug Klarheit und Schärfe zwischen meinen Layoutelementen? Wenn die Dinge ein wenig verschwommen erscheinen oder nicht ganz klar ist, dass etwas für eine Suchmaschine und einen Benutzer zugänglich ist, gehen Sie zurück zum Zeichenbrett und finden Sie heraus, wie Sie beides gut funktionieren lassen.

2. Rich Media

Bild der handschriftlichen Liste der Rich Media-Verbesserungen.

Wir möchten den Seiten, die wir für unsere Kunden erstellen, auch Bilder, Text, Video und Audio hinzufügen. Es ist wichtig, dass diese Rich-Elemente jetzt, da wir den grundlegenden Text und die Gestaltungselemente hinter uns haben, auch von allen Ihren Benutzern wahrgenommen werden können. Es gibt ein paar Dinge, die wir tun können, um dies zu erreichen. Wenn Sie Bildern eine Textalternative geben und zusätzlich zu diesen Bildern etwas bereitstellen, wird dies für einen Bildschirmleser besser sichtbar und für jemanden mit Sehbehinderung verständlich.

Auch die Benennung von Dingen mit menschenfreundlichen Namen im Vergleich zu “DSC1352.JPEG” wird sowohl Suchmaschinen als auch Hilfstechnologien helfen, dieses Bild zu sehen und zu verstehen, was es ist. Im Kontext auf der Seite ist es auch wichtig, dass Sie Bilder auf Seiten platzieren, die einen Mehrwert bieten. Sie möchten einen Benutzer mit zusätzlichen Inhalten aufklären, um ihm ein bisschen mehr Gefühl zu geben oder ihm mehr Kontext zu dem zu geben, worüber Sie sprechen. Fügen Sie Bilder nach Wert hinzu, nicht nur, um in der Google-Bildersuche angezeigt zu werden.

Was ist mit Videos? Video ist also ein bisschen anders. Video hat eine Reihe von bewegten Bildern. Jedes Mal, wenn ich an Bewegung denke, denke ich mir: “Wie kann ich sicherstellen, dass ein Benutzer, wenn er diese Bewegung stoppen möchte, dies kann?”

Eine klare Wiedergabesteuerung ist entscheidend, wenn es um Barrierefreiheit geht, sowie um ein großartiges Videoplayer-Erlebnis für jeden Benutzer. Außerdem synchrone Äquivalente für diese Textalternativen. Wir haben über Bilder mit Textalternativen gesprochen. Videos müssen auch Textalternativen haben, aber sie müssen zeitlich mit diesem Video synchronisiert werden. Andernfalls ergeben sie im Kontext keinen Sinn.

Stellen Sie dann sicher, dass sie unterscheidbar sind. Dies ist bei Video und Audio gleich. Wir wollen sicherstellen, dass der Vordergrund und der Hintergrund leicht voneinander zu unterscheiden sind. Wenn sich Ihr Video matschig anfühlt, wenn sich Ihr Audio matschig anfühlt und ich mein Ohr oder meine Augen belasten muss, um diesen Inhalt zu sehen und zu verstehen, was passiert, müssen Sie ein bisschen klarer und klarer sein diese beiden Unterscheidungen.

Dann Textabschriften. Genauso wie Sie Untertitel für Videos benötigen, möchten Sie für Audio ein Textprotokoll haben. Wenn ich mich also an einem lauten Ort befinde und das Audio nicht hören kann oder meine Kopfhörer nicht angeschlossen sind oder benötigt werden um Hilfstechnologie zu verwenden, kann ich auf dieses Audio zugreifen.

Dies sind alles Dinge, die Sie sehen werden, wenn Sie Code als technische Suchmaschinenoptimierung überprüfen und die Sie beachten sollten.

Wenn Sie diese Dinge nicht auf Ihrer Website haben, würde ich Sie ermächtigen, diese Fragen zu stellen, die schwierigen Fragen wie: Hey, gibt es eine Textalternative zu diesem Bild? Wie wird eine Person mit einer Sehbehinderung, wie wird eine Person mit einer Hörbehinderung auf diese Dinge zugreifen?

3. Seitenstruktur

Foto von handgezeichneten Bildern, die verschiedene Seitenstrukturen vergleichen.

Bei drei und vier geht es um Seitenstruktur und semantisches HTML. Es geht also ein bisschen weniger darum, ob dies wahrnehmbar und irgendwie verständlich ist.

Es streift irgendwie das Verständliche, aber es sollte auch ein bisschen um Wahrnehmung gehen. Wenn Sie eine Reihe von H1s auf einer Seite haben, wie Sie sich vorstellen können, könnte eine Suchmaschine dies als sehr verwirrt empfinden, oder? Sie sind wie, okay, es gibt eine Menge H1s auf dieser Seite. Ich bin mir nicht sicher, worum es auf dieser Seite geht. Das Hinzufügen von Strukturen und kaskadierenden Überschriften zur Kennzeichnung von Eltern-Kind-Beziehungen trägt dazu bei, dass Ihre Inhalte ein wenig besser wahrnehmbar sind. Es wird einfacher zu verstehen, was passiert.

4. Semantisches HTML

Das Gleiche gilt für semantisches HTML. Wir neigen dazu, viele Divs und Spans und nicht identifizierbare Elemente in unseren HTML-Code aufzunehmen. Aber indem Sie sie auf geeignetere Weise markieren, damit wir ihre Bedeutung verstehen, verstehen Sie, was diese Tags enthalten, sei es die Navigation oder Formulare oder Tabellen in der Lage zu sein, diese Dinge zu analysieren, damit sie die Dinge wahrnehmen können, die Sie auf Ihre Seite setzen, die sich voneinander unterscheiden, und eine reichhaltigere Erfahrung bieten.

Bedienbar

Okay, wir können den Inhalt wahrnehmen. Aber wie stellen wir sicher, dass es funktionsfähig ist?

1. HTML-Sitemaps

Foto eines handgezeichneten HTML-Sitemap-Beispiels.

Ein paar SEO-Empfehlungen, die ich oft sehe, sind das Erstellen einer HTML-Sitemap und das Einfügen von Breadcrumbs auf Ihre Seite. Oft kann es zu Rückschlägen kommen. Die HTML-Sitemap ist sehr wichtig, die wir für SEO kennen, damit diese Seiten tief in der Hierarchie unserer Website auffindbar sind.

Wir wissen, dass Semmelbrösel für die Auffindbarkeit ebenso wichtig sind. Beide Elemente helfen Benutzern mit unterstützender Technologie, besser auf der Website zu navigieren. Die HTML-Sitemap ermöglicht, wenn Ihr Menü nicht alle Seiten Ihrer Website enthält oder wenn es verwirrend ist oder Sie JavaScript oder eine andere Technologie verwenden, auf die mein Tech-Stack nicht zugreifen kann.

2. Semmelbrösel

Foto des handgezeichneten Brotkrumenbeispiels.

Mit Breadcrumbs kann ich dann die jeweilige Produktsuchseite auf einer E-Commerce-Website nach oben und unten analysieren, ohne zum Menü zurückkehren und dann jeden einzelnen Menüpunkt erneut analysieren zu müssen. Diese beiden sind also super wichtig für die Navigation, aber auch besonders für Leute, die mit einer Tastatur navigieren und Hilfstechnologien verwenden.

3. Entwickeln Sie zuerst die Tastatur

Foto von Hand gezeichnetem Computer und Tastatur.

Dann eine Nicht-SEO-Sache, aber dennoch wichtig und zuordenbar, entwickeln Sie zuerst Ihre Website und Ihre Erfahrungstastatur. Nicht jeder hat eine Maus oder die Fähigkeit, eine Maus aufgrund einer Bewegungsstörung oder aufgrund einer Beeinträchtigung oder aufgrund eines Mangels an Technologie oder Hardware zu verwenden. Stellen Sie also sicher, dass Sie zuerst die Tastatur entwickeln und mehr Personen einschließen, die Sie mit Ihrem Publikum zusammenfassen möchten.

Verständlich

1. Sprache

Foto von handgeschriebenem HTML-Code mit Angabe von LANG=

Verständlich. Wir sprechen also im internationalen SEO darüber, wie wichtig es ist, den HTML-Code auf unserer Seite zu verwenden, um die Sprache der Seite anzugeben, wenn wir es mit verschiedenen Ländern und verschiedenen Sprachen zu tun haben. Es hilft Suchmaschinen, die richtigen Ergebnisse im richtigen nationalen oder internationalen Kontext zu liefern. Es hilft auch Screenreadern, Ihre Inhalte in der richtigen Sprache vorzulesen.

2. Navigationslayout

Foto von handgezeichneten Webseitenbeispielen.

Dann sind Navigationslayout und Interstitials meiner Meinung nach ziemlich häufig, aber niemand mag eine Navigation oder ein Layout einer Website, das verwirrend ist. Je einfacher Sie es machen, desto einfacher ist es für die Leute, mit dieser Website zu konvertieren oder das zu tun, was Sie von ihnen erwarten, sei es, um zu lernen, zu kaufen oder um eine Dienstleistung zu erbringen. Das ist einfacher, wenn die Navigation und das Layout optimiert sind und wir nicht an verschiedenen Stellen unterschiedliche Wörter verwenden, um dasselbe zu bedeuten. Noch wichtiger ist es für Menschen mit assistiver Technologie.

3. Interstitials

Foto einer handgezeichneten Seite mit einem

Interstitials, niemand mag diese Popups in unserem Gesicht, die es uns nicht erlauben, den Rest der Website zu durchsuchen. Google liebt sie auch nicht. Aber besonders Leute mit assistiver Technologie, wenn wir diese Pop-ups nicht richtig behandeln, werden wir in einem Szenario enden, in dem Benutzer in einer Tastaturfalle stecken und sie nicht aus dem Interstitial herauskommen können , oder sie verstehen nicht, dass überhaupt ein Interstitial auf der Seite platziert wird. Daher ist es wichtig, bei der Verwendung von Interstitials sehr aufmerksam zu sein.

Robust

Last but not least ist robust. Wie stellen wir sicher, dass die Inhalte, die wir auf die Seite stellen, mit einer Vielzahl von Geräten und Szenarien kompatibel sind?

1. Validierung

Foto eines handgezeichneten Beispiels für die JSON+LD-Validierung.

Nur die Verwendung von richtigem HTML ist ein großer Weg, dies zu tun. Sie können einen Validator verwenden und sich Ihr HTML, Ihr CSS und Ihr JSON-LD ansehen. Wenn Sie den richtigen Code erstellen und vor allem, wenn Sie semantisches HTML verwenden und diesem Code auch Bedeutung verleihen, werden Sie viel bessere Erfahrungen machen und alles, was Ihr Gebäude erstellt, leichter verdaulich machen.

2. Responsiv

Foto des handgezeichneten Bildes von Webseiten, deren Größe für mobile, mittlere Bildschirme und große Bildschirme geändert wird.

Reagiert Ihre Website? Sie sollten dies bereits tun. Wenn dies nicht der Fall ist, stellen Sie sicher, dass es auf einem Handy, einem Desktop- und einem Tablet-Gerät funktioniert und das Layout gleich bleibt, es wird nur in der Größe oder auf andere Weise neu abgebildet.

3. Interaktiv

Foto der handgezeichneten Webseite mit Pfeilen, um verschiedene verfügbare Interaktionen anzuzeigen.

Stellen Sie sicher, dass es interaktiv ist. Wenn ein Benutzer in der Lage sein möchte, zu zoomen, weil er eine Sehbehinderung hat, oder wenn er in der Lage sein möchte, die Farben zu ändern, erlaubt Ihre Technologie auf Ihrer Website dies? Es sollte. Wenn Sie diese drei Dinge unten tun, wird es meiner Meinung nach viel Arbeit bedeuten und Sie müssen viel weniger arbeiten, weil Sie das Framework, die Grundlage für den Zugang, geschaffen haben .

Das ist technisches SEO und Zugänglichkeit. Wenn Sie weitere Fragen haben oder Validierungswerkzeuge wünschen, finden Sie hier einige auf der rechten Seite, oder Sie können mich auf Twitter @cooperhollmaier kontaktieren, um weitere Ratschläge zu erhalten. Aber vielen Dank, dass Sie sich Whiteboard Friday und die Zugänglichkeit zusammen mit SEO angehört haben. Ich hoffe, dass Sie dies annehmen und in der Art und Weise, wie Sie in Zukunft SEO betreiben, immer integrativer werden.

Videotranskription von Speechpad.com

Ressourcen

Leave A Reply

Your email address will not be published.