Accessibility, SEO und Ladezeitoptimierung in WordPress

Accessibility, SEO und Ladezeitoptimierung in WordPress sind wichtige Themen im Web. Ein Grund mehr, warum ich die Ende April am UNI Campus des alten Wiener AKH stattfindende WordCamp Vienna nicht verpassen durfte!

Der Fokus der Konferenz lag dieses Jahr auf aktuellen Lösungsansätzen für altbekannte Probleme , die man sowohl als EntwicklerIn, als auch als RedakteurIn immer im Kopf haben sollte:

  • Wie integriere ich Accessibility in meine Gutenberg-Blocks, damit jeder meine Inhalte lesen und benutzen kann?
  • SEO Ansätze zur Gestaltung von Inhalten, die im Web schnell gefunden werden
  • Welche Möglichkeiten zur Ladezeitoptimierung habe ich in WordPress?

 

 

Accessibility in WordPress – wie gestalte ich meine Gutenberg-Blocks barrierefrei?

Ein sehr interessanter Vortrag über Accessibility in WordPress, in Verbindung mit Gutenberg-Blocks, kam von einer isländischen Dame mit dem klingenden Namen Alda Vigdís Skarphéðinsdóttir.

Als zertifizierte Accessibility Expertin und Programmiererin kämpfe ich immer wieder damit, auch WordPress-Seiten für alle UserInnen komplett zugänglich zu machen. Daher war ich sehr erfreut, dass dieses Thema heuer von einer Programmiererin aufgearbeitet und präsentiert wurde, die bereits selbst beim WordPress Core mitentwickelt hat.

Das alltägliche Leben spielt sich immer mehr auch im World Wide Web ab, daher sollte es (wie auch Gebäude und öffentliche Gelände) für jedeN zugänglich und nutzbar sein. Egal ob mit Sehbeeinträchtigung, motorischen Einschränkungen oder einfach nur älteren Menschen die nicht so technik-affin sind, wie die jüngere Generation. Niemand soll von öffentlichen Webseiten und Internetapplikationen ausgeschlossen werden!

Wie gestalte ich meine Gutenberg-Blocks nun also barrierefrei? Es empfiehlt sich, sowohl als ProgrammiererIn als auch als RedakteurIn, einmal in die WCAG 2.1 – der internationale Standard für Web Accessibility – hineinzuschauen und sich mit den Regeln der Barrierefreiheit im Netz auseinanderzusetzen. Einfache Dinge, wie ein semantisch logisches Markup zu verwenden, Überschriften korrekt zu gliedern (nach h1 folgt h2, nach h2 folgt h3) und sprechende Alternativtexte für Medien zu verwenden, erleichtern es Menschen mit Beeinträchtigungen massiv, den Inhalt einer Webseite zu erfassen.

Gutenberg-Blocks geben besonders uns EntwicklerInnen die Möglichkeit, das Markup zu verändern und zusätzlichen Code einzufügen, um eine barrierefreie Nutzung sicherzustellen. Den gesamten Vortrag mit weiteren Tips findet man auf Alda’s Blog zum nachlesen.

 

SEO in WordPress – wie verfasse ich gute Inhalte, die gefunden werden?

Suchmaschinenoptimierung ist ein Keyword, das im heutigen Web nicht mehr wegzudenken ist – denn in erster Linie wollen wir doch, dass unser mühevoll gestalteter Content auch gefunden wird! Apropos Keyword – diese sind wahrscheinlich eines der ersten Maßnamen, die einem unter dem Begriff SEO einfallen. Die richtigen Keywords helfen, um bei Google so weit oben wie möglich gelistet zu werden. Doch wie finde ich denn nun die perfekten Keywords für meine Webseite? Dazu wurden beim Vortrag mit dem Titel „Vom Keyword zum Thema – So schreibst du Texte, die gefunden werden“ einige praktische Tools vorgestellt:

Dabei ist es natürlich ratsam, sich bereits vor der Erstellung der Inhalte über die Keywords Gedanken zu machen. Sie im Nachhinein einzubauen ist oft mühsam.

Grundsätzlich ist es beim Thema SEO von Vorteil, das Thema gleich von Anfang an zu berücksichtigen. Meine Key Facts aus dem Vortrag von Daniel Marx für dich:

  • suche als aller Erstes auf Google, was die Konkurrenz zu deinem Wunschthema bietet.
  • Analysiere, was die ersten 5 gelisteten Webseiten gemeinsam haben
  • und versuche dies auf deiner eigenen Webseite ähnlich umzusetzen ( nur besser 😻 )

Auch wir im datenwerk beschäftigen uns natürlich viel mit SEO! Datenwerkerin Petra bloggt zum Beispiel, wie wichtig in Zukunft die mobilen Ansichten von Webseiten in Bezug auf SEO sein werden. Schau doch mal rein.

 

Ladezeitoptimierung in WordPress – schneller ist immer besser!

Kennst du das? Eine Webseite benötigt bei jedem Klick eine gefühlte Ewigkeit beim Laden. Du sitzt wartend vor einer teilweise leeren Seite und der Frustrationspegel steigt so weit an, dass du die Webseite wieder verlässt. Das gilt es natürlich bei der eigenen Webseite zu vermeiden! Eine schnelle Ladezeit bedeutet längere Verweildauer, höhere Konversionsrate und positivere User Experience. Und um nochmal auf das Thema SEO zurückzugreifen: ein besseres Google-Ranking bedeutet es auch!

Inspiriert vom Vortragenden David Bongard habe ich folgende Tipps sowohl für EinsteigerInnen und RedakteurInnen:

  • vermeide unnötige Bilder (z.B. über Icon-Fonts)
  • verwende Plugins zur Bildoptimierung (z.B. EWWW Image Optimizer)
  • verwende Plugins für CMS Caching (Super Cache für EinsteigerInnen, W3C Total Cache für ExpertInnen)

als auch für erfahrene ProgrammierInnen:

  • Prüfe die PHP Version und aktualisiere sie bei Bedarf
  • Lade nicht sofort benötigtes JavaScript immer im Footer
  • minifiziere alle CSS und JavaScript Files
  • und optimiere die htaccess Einstellungen

 

Mit meinen Tipps für Accessibility, SEO und Ladezeitoptimierung in WordPress bist du nun optimal gerüstet. Damit steht dem Erfolg deiner Webseite nichts mehr im Weg.

Solltest du trotzdem noch Hilfe brauchen, sind ich und meine KollegInnen im datenwerk jederzeit für dich erreichbar.

Schreib uns

Eva Angerer

Eva Angerer

Eva ist in der Agentur die Allrounderin der Programmiersprachen und Frameworks. Ob PHP und Symfony, ob Java oder Apps – Eva gets it done! Bei ihr wird der Code zur Kunst. Sie experimentiert gerne mit Farben und Formen, um ein ansprechendes und vor allem userInnenfreundliches Ergebnis zu erhalten. Obendrein ist Eva zertifizierte Web-Accessibility Expertin und kümmert sich darum, dass unsere Webseiten auch von motorisch-, kognitiv-, oder sehbeinträchtigten Usern genutzt werden können.

Das könnte Dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.