Optimierungen für die mobile Websuche von Google
Änderungen in der mobilen Websuche von Google machen es notwendig ein paar Anpassungen am Template für Contao vorzunehmen,
um sicherzustellen, dass Google auch die richtige Struktur der eigenen Website erkennt.
Webseitentitel und Breadcrumbs in Contao - Googles mobile Websuche
In dem Artikel heute geht es um Breadcrumbs und die neue Darstellung der Seitenstruktur einer Website in der mobilen Websuche von Google.
Wie man bereits an dem Screenshot von Google ersehen kann, wird zukünftig die bisherige Anzeige der URL wie google.com/about/company/history durch Google » about » company » history ersetzt, was für den Nutzer deutlich lesefreundlicher ist.
Bisher wird die Ersetzung des Namens in den Suchergebnissen nur in den USA durchgeführt, es ist aber zu erwarten, dass die Änderung weltweit stattfindet.
Um die Darstellung des Webseitentitels nicht dem Zufall zu überlassen, liefert Google auch gleich entsprechendes Markup mit, welches sich einfach in die eigene Website integrieren lässt. Dabei setzt Google auf schema.org, Auszeichnungen im Format JSON-LD, RDFa, oder microdata.
Die wichtigsten Angaben sind folgende:
- url = die URL Ihrer offiziellen Website (Pflichtfeld)
- name = der bevorzugte Namen Ihrer Website (Pflichtfeld)
- alternateName = ein alternativer Name, den Google verwenden soll (optional)
2 Beispiele für gondao.de findet Ihr im folgenden:
Webseitentitel Markup (JSON LD)
<script type="application/ld+json">
{ "@context" : "http://schema.org",
"@type" : "WebSite",
"name" : "Gondao - Contao-Stammtisch Dresden",
"alternateName" : "Gondao",
"url" : "http://www.gondao.de"
}
</script>Webseitentitel Markup (Microdata)
<head itemscope itemtype="http://schema.org/WebSite">
<title itemprop='name'>Gondao</title>
<link rel="canonical" href="https://gondao.de/" itemprop="url">Einbinden ins Contao Template
Ich habe mich auf gondao.de für die Variante mit JSON LD entschieden, weil Sie sich am einfachsten in das aktuelle Template integrieren lässt. Es gibt hierbei mindestens 2 Möglichkeiten zum Einbinden: Im individuellen Template in fe_page oder direkt im Seitenlayout des Templates im Bereich eigener Javascript-Code.
Da wir bereits ein angepasstes fe_page Template einsetzen, habe ich die Änderung hier eingefügt. (siehe Screenshot 1)
Breadcrumb bzw. Navigationspfad
Auch für die Breadcrumb gibt es ein neues Format. Der Rollout hat bereits begonnen und wird weltweit in der mobilen Websuche durchgeführt.
Altes Markup für Navigationspfad
<a href="http://www.example.com/dresses">Dresses</a> ›
<a href="http://www.example.com/dresses/real">Real Dresses</a> ›
<a href="http://www.example.com/dresses/real/green">Real Green Dresses</a>Neues Markup für Navigationspfad (RDFa)
<div xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb">
<a href="http://www.example.com/dresses" rel="v:url" property="v:title">
Dresses
</a> ›
<span rel="v:child" typeof="v:Breadcrumb">
<a href="http://www.example.com/dresses/real" rel="v:url" property="v:title">
Real Dresses
</a> ›
<span rel="v:child" typeof="v:Breadcrumb">
<a href="http://www.example.com/dresses/real/green" rel="v:url" property="v:title">
Real Green Dresses
</a> ›
</span>
</span>
</div>Verwendung des neuen Markups für die Breadcrumb in Contao
Um das bestehende Breadcrumb-Template für Contao anzupassen, kopieren wir uns das Template mod_breadcrumb und nehmen die entsprechenden Änderungen vor. Der Vollständigkeit halber habe ich noch einmal das bisherige Format des Templates und die Ausgabe eingefügt. Anschließend dann meine Variante und die Ausgabe um Google gerecht zu werden.
Ausgabe des bisherigen mod_breadcrumb Templates
<div class="mod_breadcrumb block">
<ul>
<li class="first"><a href="home.html" title="Contao Stammtisch Dresden">Contao Stammtisch Dresden</a></li>
<li><a href="blog.html" title="Blog">Blog</a></li>
<li class="active last">Optimierungen für die mobile Websuche von Google</li>
</ul>
</div>Anpassung des mod_breadcrumb Templates
<?php $this->extend('block_unsearchable'); ?>
<?php $this->block('content'); ?>
<div xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isRoot']): ?>
<a href="<?php echo $item['href']; ?>" rel="v:url" property="v:title" title="<?php echo $item['title']; ?>"><?php echo $item['link']; ?></a> ›
<?php else: ?>
<span rel="v:child" typeof="v:Breadcrumb">
<?php if ($item['isActive']): ?>
<a href="<?php echo $item['href']; ?>" rel="v:url" property="v:title" title="<?php echo $item['title']; ?>"><?php echo $item['link']; ?></a>
<?php else: ?>
<a href="<?php echo $item['href']; ?>" rel="v:url" property="v:title" title="<?php echo $item['title']; ?>"><?php echo $item['link']; ?></a> ›
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
<?php foreach ($this->items as $item): ?>
</span>
<?php endforeach; ?>
</div>
<?php $this->endblock(); ?>Ausgabe des angepassten mod_breadcrumb Templates
<div class="mod_breadcrumb block">
<div xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb">
<a href="home.html" rel="v:url" property="v:title" title="Contao Stammtisch Dresden">Contao Stammtisch Dresden</a> ›
<span rel="v:child" typeof="v:Breadcrumb">
<a href="blog.html" rel="v:url" property="v:title" title="Blog">Blog</a> ›
<span rel="v:child" typeof="v:Breadcrumb">
<a href="blog/blogdetails.html" rel="v:url" property="v:title" title="Optimierungen für die mobile Websuche von Google">Blogdetails</a>
</span>
</span>
</span>
</span>
</div>
</div>Die fertige Ausgabe sieht dann in etwa so aus:
Der Autor
Mathias Arzberger ist Inhaber und Entwickler bei der pdir / digital agentur und beschäftigt sich seit 1999 mit Softwareentwicklung und Webtechnologien im Open-Source-Umfeld.
Einen Kommentar schreiben
Sie müssen sich anmelden, um Kommentare hinzuzufügen.