HTML Sonderzeichen (&,§,>,<,|) und Emojis (?,?,? ) können eingesetzt werden, um durch das Google Snippet mehr Aufmerksamkeit und eine höhere Klickrate zu erzielen. Das kann wiederum zu einem besseren Ranking führen.

Im folgenden Beitrag erkläre ich kurz, wie man Sonderzeichen einsetzen kann, was es zu beachten gibt und welche HTML Sonderzeichen sich besonders gut für Title Tag und Meta Description eignen.

Mehr Aufmerksamkeit dank Sonderzeichen?

Die Klickrate in den SERPs ist ein wichtiger Faktor. Zum einen kann durch eine bessere CTR (Click-Through-Rate) mehr Traffic auf die eigene Seite gezogen werden, zum anderen gibt es zahlreiche Hinweise, dass die CTR für das Ranking relevant ist (siehe auch hier: https://www.sem-deutschland.de/blog/klickrate-ctr-rankingfaktor/).

Es erscheint plausibel, dass Websites, die auf der ersten Seite der SERPs weiter unten platziert sind und über eine überdurchschnittliche CTR verfügen, vielleicht nach oben wandern sollten. Immerhin scheinen sie die Suchintention besser zu treffen als aktuell höher platzierte Sites mit schwächerer CTR.

Es erscheint aber auch logisch, dass sich die Klickrate leicht manipulieren lässt (zum Beispiel mit dem übermäßigen Einsatz von Sonderzeichen und Emojis im Google Snippet). Manipulationen dieser Art könnten also auch zu Abstrafungen führen.

Sollten Emojis und HTML Sonderzeichen in Title Tag und Meta Desciption also eingesetzt werden? Wie so oft lautet die Antwort: „Es kommt darauf an“. Im Rahmen der Google Snippet Optimierung haben sie auf jeden Fall einen wichtigen Platz.

Kurzes Video zum Thema

Was ist beim Ensatz zu bedenken?

• Passt das zur Branche?

In manchen Branchen ist ein übermäßiger Einsatz von Emojis und Sonderzeichen einfach nicht seriös. Als Bank oder Finanzberater würde ich nicht mit Emojis wie ? oder ? in Title Tag und Meta Description arbeiten. Das schreckt einfach ab.

In der Touristik sieht das schon wieder anders aus. Hier könnte man durchaus Emojis einsetzen (???).

• Sind die SERPs bereits überflutet?

In den letzten Jahren wurden Sonderzeichen und Emojis massenhaft eingesetzt. Das könnte durchaus dazu führen, dass Google Snippets mit weniger solcher Zeichen wieder mehr Aufmerksamkeit erregen. Immerhin sind diese seltener geworden. Vor Einsatz von Sonderzeichen sollte also geprüft werden, ob die Konkurrenz für die eigenen Suchbegriffe diese bereits massenhaft verwendet.

• Zeigt Google sie überhaupt noch an?

Der übertriebene Einsatz vor allem von Emojis hat dazu geführt, dass in den meisten Bereichen gar keine mehr bei Google erscheinen. Das trifft vor allem für Emojis im Title Tag zu. Diese wurden größtenteils aus den SERPs entfernt.

Emojis in der Meta Description sieht man aktuell noch häufig. Es lohnt sich auf jeden Fall, vor Einbau der Zeichen die aktuellen Suchergebnisse zu prüfen und zu schauen, ob derartige Zeichen angezeigt werden.

Einfache HTML Sonderzeichen in Title Tag & Description

Einfache HTML Sonderzeichen werden schon seit Jahren für die Optimierung des Google Snippets eingesetzt. Sie dienen hervorragen dazu, die begrenzte Zeichenzahl von Title Tag und Meta Description auszunutzen. Folgende Varianten sind oft im Einsatz:

• Kaufmännisches Und &

Das Und-Zeichen & benötigt einfach weniger Platz als das ausgeschriebene Wort „und“. Es kann bei Aufzählungen in Title Tag und Meta Description genutzt werden. Der HTML Begriff dafür ist &

• Klammern ><

Klammern eignen sich sehr gut anstelle von Formulierungen wie „mehr als“, „weniger als“, „größer“… In meinen Title Tags setze ich sie gern wie folgt ein:

SEO aus Jena | > 13 Jahre Erfahrung | Agentur Jan Jecke

„Die HTML Ausdrücke dafür lauten < und >

Klammern können aus sehr gut als Pfeile verwendet werden und so zum Klicken bzw. Weiterlesen animieren: >>

• Senkrechter Strich |

Der senkrechte Strich eignet sich ebenfalls sehr gut, um Title Tags und Meta Descriptions in mehrere Bereiche zu trennen, ohne die Gesamtpixelzahl zu überschreiten.

In meinem Title Tag Beispiel oben habe ich sie ebenfalls im Einsatz.

Weitere HTML Sonderzeichen – Beispiel Touristik

Es gibt zahlreiche weitere Sonderzeichen, die in der Praxis zu sehen sind. In diesem Screenshot habe ich mal die aktuellen Top Ergebnisse für das Keyword „Mallorca Urlaub“ aufgerufen:

Aktuell werden hier keinerlei Emojis angezeigt, die rankenden Seiten verwenden aber Sonderzeichen, wie Klammern, im Title Tag und zahlreiche Zeichen in der Meta Description (zum Beispiel: ❤, ☀,➤,✈)

Thematisch machen Flugzeug, Sonne und Herz natürlich Sinn. Es fällt aber auf, dass im Title Tag sehr sparsam mit solchen HTML Symbolen umgegangen wird. Das sah vor einigen Jahren noch anders aus.

Typische Sonderzeichen in der Meta Description

• Play Symbol lll➤

In meinen eigenen Meta Descriptions nutze ich sehr gern das Play-Symbol. Ich verwende es sehr weit vorn in der Description. So sieht das bei mir aus:

Das Symbol besteht aus drei senkrechten Strichen und einem Pfeil.

• Haken ✓

Haken sind der Klassiker in Title Tag oder Meta Description. Ich verwende ihn aktuell einmal in meinem Snippet. Das HTML. Auch der grüne Haken ✅ wurde sehr oft eingesetzt. Aktuell zeigt Google ihn aber immer weniger an.

Emojis in Title Tag und Meta Description

Noch im letzten Jahr wurden Emojis massenweise in Title Tags angezeigt. Das hat zu sehr bunten SERPs geführt und die User sicherlich überfordert. Google scheint da eine Reißleine gezogen zu haben. Seit Ende 2020 sehe ich immer weniger Emojis in Title Tags. Sie kommen aber immer noch vor.

Auch meine eigenen Title Tag Emojis wurden aus den SERPs gebannt. Anders ist das bei der Meta Description. Hier erscheinen die bunten Bildchen weiterhin.

Typische Zeichen

• Telefon ☎️

Vor oder hinter einer Rufnummer kann in der Meta Description das Telefon Emoji platziert werden. Es erregt Aufmerksamkeit und animiert zum Anrufen. Wer die Telefonnummer in der Meta Description verwendet, der nimmt natürlich in Kauf, dass die Suchenden gleich anrufen und nicht klicken. Für den Geschäftserfolg ist das aber durchaus zuträglich.

• Goldmedaille ?

Auch dieses Emoji wurde exzessiv genutzt. Es soll Exzellenz ausstrahlen. In Title Tags habe ich es schon lange nicht mehr gesehen, in der Meta Description macht es durchaus noch Sinn.

• Wecker ⏰

Das Wecker Emoji wird gern eingesetzt, um Zeitrdruck darzustellen bzw. zur Handlung aufzufordern. „Jetzt schnell buchen“ könnte es ausdrücken. Dieses Emoji sieht man noch ab und zu in Meta Descriptions. Es kommt auch in umkämpften Branchen vor. Beispiel:

Es gibt zahlreiche weitere Emojis, die in den Google Suchergebnissen aufrauchen. Allerdings werden sie bei zu häufigen Einsatz auch gern einfach von Google entfernt. Es bietet sich also an, das eigenen Google Snippet regelmäßig zu prüfen.

Emojis im Google Local Pack

In lokalen Suchergebnissen erscheint neben den organischen Listings auch der so genannte Local Pack. Dieser enthält Einträge aus Google My Business. Auch hier kann die Klickrate mit Emiticons verbessert werden.

Hier ist der aktuelle Local Pack für das Keyword „SEO Jena“:

Mein Ergebnis sticht durch das verwendete Emoji ein wenig heraus. Die anderen Treffer setzen dies bislang nicht ein. Natürlich ist es nur eine Frage der Zeit, bis Google auch hier Emojis nicht mehr im Google My Business Title zulässt.

Zusammenfassung

Grundsätzlich eignen sich HTML Sonderzeichen und Emojis für die Optimierung von Title Tag und Meta Descriptions. Man sollte sie aber sparsam einsetzen. Mehr als ein Emoji im Title Tag ist evtl. zu viel.

Google ändert zudem ständig die Spielregeln. Werden die Emojis in der Meta Description für manche Branchen heute noch angezeigt, können sie morgen schon aus den SERPs verschwunden sein.

Google Lighthouse ist eine praktische Chrome Erweiterung, mit der man einen schnellen technischen Audit für Websites durchführen kann. Der Schwerpunkt liegt dabei auf verschiedenen Pagespeed Metriken. Es lässt sich also schnell herausfinden, ob die untersuchte Seite den Google-Anforderungen in dieser Hinsicht genügt.

In diesem Beitrag erkläre, ich wie die Daten von Google Lighthouse zu interpretieren sind und welche Handlungsempfehlungen man daraus ableiten kann.

Noch ein Messtool für Ladezeiten – wo ist der Vorteil?

Prinzipiell erweitert Lighthouse das schon seit Jahren etablierte Google Pagespeed Tool um weiter Funktionen. Neben der Messung der Ladezeiten werden auch Werte zu Accessibility, Best Practices und SEO. Nach wie vor sind meiner Meinung nach die Daten zum Pagespeed bzw. zur Performance die relevantesten.

Au den ersten Blick bekommt man einen Überblick über die vier untersuchten Bereiche. Für die Startseite meiner jjecke.de sieht das so aus:

Alle Bereiche werden in Form eines Prozentzahl angegeben. Die gelbe Farbe bei meinem Performancewert von 80 zeigt, dass das nicht Top Bereich liegt, aber auch nicht total schlecht ist.

Der große Vorteil des Tools liegt darin, dass hier nicht nur der reine Pagespeed ermittelt wird, sondern weitere wichtige Metriken hinzukommen, die die wahrgenommene Ladezeit aus Sicht der User wiedergeben. Das umfasst zum Beispiel die Daten zu den Core Web Vitals.

Core Web Vitals – was hat es damit auf sich?

Die Core Web Vitals legen den Schwerpunkt mehr auf die Usability der Website. Es wurden messbare Werte eingeführt, um Punkte beim Laden einer Website einzuschätzen, die tatsächlich sehr nervend sind. So hat es mich wirklich immer genervt, wenn die Seite zwar grundsätzlich schnell lädt, aber ein großes Seitenelement trotzdem deutlich länger braucht als der Rest.

Es ist der Nutzerfreundlichkeit auch nicht grad zuträglich, wenn die Seite schon geladen ist, es dann aber zu Verzögerungen kommt, wenn ich Menüpunkte anklicken will. Gleiches gilt für Elemente, die das Layout der Site verändern, obwohl sie bereits fertig geladen ist.

Diese Punkte setzt Google als messbare Metriken ein:

• Largest Contentful Paint
• Time to Interactive
• Cumulative Layout Shift

Mit Google Lighthouse lassen sich diese und weitere Metriken genau messen. Es wird dann eine Sekundenzahl angegeben, wie lange das größte Inhaltselement lädt oder wie lange es dauert, bis man mit der Site interagieren kann. Für die Layoutveränderungen wird ein Indexwert angegeben.

Lighthouse Metriken für meine Website

Für meine Startseite werden folgende Werte ausgegeben:

Hier zeigt sich, dass mehrere Metriken für meine Startseite nicht im optimalen Bereich liegen. Nur die Time to Interactive und die Total Blocking Time sind grün markiert.

Die restlichen Daten sind gelb markiert. Es besteht also nicht total dringender Handlungsbedarf. Trotzdem sollte man diese Metriken im Auge behalten. Immerhin hat Google angekündigt, dass die Core Web Vitals ein fester Rankingfaktor werden.

Nicht nur Zahlen – sondern auch Hilfestellung

Es ist zwar nett zu wissen, dass die eigene Website in einigen Punkten nicht ganz optimal aufgestellt ist. Doch was nützen mir diese Zahlen. Wichtig wäre doch zu wissen, wo die Probleme hier genau liegen. Und da bietet Lighthouse tatsächlich eine sinnvolle Hilfestellung.

Es wird eine Liste mit Handlungsanweisungen ausgegeben, die nach Prirität geordnet ist. Die Priorität ermittelt sich dabei durch die Zeit, die mit jeder Maßnahme eingespart werden kann. In meinem Fall sind es tatsächlich Ressourcen, die das Rendering blockieren. Damit könnten 2,22 Sekunden eingespart werden. Was eine Menge ist.

Auf die Server Response Time kann ich nich direkt Einfluss nehmen. Außer ich suche mir einen schnelleren Hostinganbieter. Für die Entfernung von ungenutztem CSS müsste man sich direkt durch den Code des WordPress Theme wälzen oder ein besseres, schlankeres auswählen.

Die next-gen Bildformate halte ich für schwierig. Es ist logisch, dass Lighthouse dies empfiehlt. Der Chrome Browser unterstützt neue Bildformate, wie WebP oder JPEG 2000. Andere Browser tun das in älteren Versionen nicht unbedingt. Man muss hier also abwägen, ob man durch eine Anpassung der Bildformate ein paar Millisekunden einspart oder gewährleistet, dass die Bilder auch von jedem Nutze in jedem Browser gesehen werden können.

Konkrete Maßnahmen für Rendering-blockierende Ressourcen

Im aufklappbaren Bereich findet man jetzt konkrete Vorschläge, was in punkto Rendering-blockierende Ressourcen getan werden kann. Aufgelistet sind mehrere CSS und JS Files mit Einsparpotenzial pro Datei. In meinem Fall sind mehrere große CSS Dateien das Hauptproblem.

Diese Dateien müssen geladen und ausgeführt werden, bevor der Browser die Seite rendern kann. Daher zählen sie zu den Rendering-blockierenden Ressourcen. Sollten diese Dateien unnötig groß sein, erschweren sie das Rendern der Seite.

Es ist sehr wahrscheinlich, dass einige der hier aufgelisteten CSS Files für das Rendern der Seite gar nicht notwendig sind. Idealerweise werden aber nur die so genannten critical styles, also die, die wirklich für das Rendern notwendig sind, geladen. Die anderen sollten verschoben werden.

Google Lighthouse gibt als Hilfestellung an, dass es mehrere WordPress Plugins gibt, die Critcal CSS und JS Code inline (also direkt im Quelltext der zu rendernden Site) darstellen, oder unnützen Code ganz verschieben können. Es werden auch Links zu passenden Plugins gesetzt.

Das klingt auf den ersten Blick hilfreich, allerdings können zusätzliche WordPress Plugins die Performance einer Site auch weiter nach unten ziehen.

Für manuelle Anpassungen am Code bräuchte man hier schon einen Webentwickler.