SEO hin oder SEO her… Egal, denn wir sollen auf jeden Fall so viel als möglich machen um Google zu gefallen. Daher ist es sinnvoll wenn du dein Theme mit strukturierten Daten für die Suchmaschine ergänzt. Aber ich fange am Anfang an, denn du solltest es schon wissen warum wir uns dieses Getue mit den strukturierten Daten überhaupt antun.
Warum solltest du mit strukturierten Daten in WordPress arbeiten?
Eigentlich sind Webseiten für Suchmaschinen perfekt. Es ist reiner Text und schnell lesbar. Aber sie haben auch ein großes Problem mit unseren Seiten: Es sind so verdammt viele Informationen und es ist noch schwerer diese zu verstehen. Uns Menschen fällt es sehr leicht den Kontext der Informationen zu verstehen, aber für Google, Yahoo!, Bing und Konsorten ist es oft unmöglich.
Darum haben sich die großen Suchmaschinen auf einen gemeinsamen Nenner geeinigt und die Strukturierten Daten erschaffen: schema.org. Oder wie sie es erklären:
Welcome to Schema.org
Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.
Aber warum sollen wir jetzt für den Kram auch noch Zeit investieren? Ganz klar, es kann (und ziemlich sicher wird es) deine Zugriffszahlen von den Suchmaschinen verbessern. Wir liefern großartigen Content (sagt der SEO-Gott) und die Suchmaschinen wollen ihren LeserInnen den relevantesten und besten Content ausliefern. Wenn du jetzt klar darstellst um was es in deinen Posts geht, dann wird dir Google (oder andere Suchmaschinen) mehr vertrauen und dich besser behandeln.
Die Studie Schema.org – U.S. 2014: Rich Snippets With HTML Microdata And RDF von Searchmetrics ist zwar schon älter, trotzdem wird sich nicht viel geändert haben. Wenn ich so auf den Seiten herumsurfe, haben viele noch keine strukturierten Daten eingebaut. Damals waren es ganze 0,03% der Webseiten, welche online sind. Also wenn du es verwendest – und Zeit investierst – hast du sicher einen Vorteil. Genauso wie bei den AMP-Seiten, die werden auch noch immer sehr stiefmütterlich angewendet.
Welche Möglichkeiten mit strukturierten Daten zu arbeiten gibt es?
Eigentlich unendlich viele oder wie man auch gerne sagt: Das kommt darauf an! Und es stimmt, je nach dem über welches Thema du auf deinem Blog schreibst, musst du auch das passende Schema auswählen. Ich habe hier eine kleine Aufzählung mit passenden Kategorien zusammengestellt und diese auch verlinkt:
- Waren (https://schema.org/Product)
- Kochrezepte (https://schema.org/Recipe)
- Software (https://schema.org/SoftwareApplication)
- Stellenangebote (http://schema.org/JobPosting)
- lokales Geschäft (https://schema.org/LocalBusiness)
- Ort (https://schema.org/Place)
- Buch (https://schema.org/Book)
- Event (https://schema.org/Event)
- Blogpost (https://schema.org/BlogPosting)
Und gerade der letzte ist für uns am interessantesten.
Mein WordPress-Theme anpassen
Nun müssen wir natürlich ein wenig programmieren. Denn so ganz automatisch kann WordPress keine strukturierten Daten einfügen. Aber ich helfe dir mit einer Schritt für Schritt Anleitung und schon kannst auch du deine Posts mit schema.org anreichern.
Fangen wir mit den Grundlagen an. Bevor du irgendetwas an deinem Theme änderst, machst du ein Backup (kopiere dir das Theme auf die Festplatte). Und danach legst du auf jeden Fall ein Child-Theme an. Denn nur so kannst du das originale Theme immer updaten und deine Änderungen bleiben trotzdem erhalten.
Den Artikel erkennen
Natürlich können wir den speziellen Typ für einen Blogpost verwenden, aber ich habe mich für den allgemeineren Typ Artikel entschieden. Denn dieser ist wirklich für die meisten BloggerInnen verwendbar. Die Anpassungen müssen wir im Loop vornehmen. Das ist jetzt nicht so einfach zu finden und von deinem Theme abhängig. Die Ausgabe der Posts kann direkt in der index.php erfolgen oder auch in einer Datei content.php oder content-standard.php oder wo auch immer. Da musst du jetzt ein wenig in deinem Theme suchen um das article-Element oder auch ein div-Element mit der css-Klasse post-entry zu finden.
<article class='post-entry post-entry-type-<?php echo $post_format." ".$post_class; ?>'
role="article"
itemprop="hasPart" itemscope
itemtype="http://schema.org/Article">
<meta itemprop='mainEntityOfPage' itemscope
itemType='https://schema.org/WebPage'/>
Den öffnenden Tag ergänzt du vor dem >-Zeichen mit den Basisinformationen: role="article" itemprop="hasPart" itemscope="" itemtype="http://schema.org/Article", wie du es in der Zeile 1 siehst.
Den Post-Titel markieren
Nun kommt auch schon der Titel des Posts dran. Ich nehme das Beispiel aus meinem Theme, aber deines wird ziemlich ähnlich aussehen.
<h1 class='post-title' itemprop="headline">
<a href="<?php echo get_permalink() ?>" rel="bookmark"
title="<?php _e('Permanent Link:','magnomad')?> <?php the_title(); ?>"
itemprop="url">
<?php the_title(); ?>
</a>
</h1>
Hier haben wir auch zwei Ergänzungen. Im öffnenden >-Zeichen das Attribut itemprop="headline". Da bei den meisten Blogposts der Titel verlinkt ist, müssen wir auch das itemprop="url") erweitern.
Wann wurde der Post veröffentlicht?
Jetzt ergänzen wir die gesamten Meta-Informationen unseres Posts. Das ist eben das Veröffentlichungsdatum, der Autor, die Kategorien und die Schlagwörter. Fangen wir einfach mit dem Datum an.
<time pubdate
itemprop="datePublished"
datetime="<?php the_time( 'c' ); ?>"
content="<?php the_time('c'); ?>">
<?php the_time(get_option('date_format')); ?>
</time>
Es kann jetzt natürlich sein, dass in deinem Theme noch ein div-Element für das Datum verwendet wird. Natürlich ist das ein guter Zeitpunkt um das richtige Element, nämlich time-Element zu kennzeichnen, als einen span oder was auch immer zu verwenden.
Die strukturierten Daten für Kategorien und Schlagwörter
Die Kategorien und die Tags (Schlagwörter) werden auch bei dir in einem div oder vielleicht auch einem
<div>
<?php _e('Categories:','magnomad')?> <span itemprop="about"><?php the_category(', '); ?></span>
</div>
<div>
<?php _e('Tags:','magnomad')?> <span itemprop="keywords"><?php the_tags(', '); ?></span>
</div>
Den Autor des Posts erkennen
Nun sollten wir uns auch um den Autor des Posts kümmern. Auch seine Informationen reichern wir mit den passenden Attributen von schema.org an.
<div itemprop="author"
itemscope
itemtype="https://schema.org/Person">
<img
itemprop="image"
src="<?php echo get_avatar_url(get_avatar(get_the_author_meta('ID'), 150)); ?>" />
<span itemprop="name">
<?php the_author();?>
</span>
</div>
Wird nur ein Auszug oder der Inhalt angezeigt?
Nun müssen wir uns aber noch um den echten Inhalt kümmern. Auch den müssen wir mit den passenden Attributen versehen. Dabei müssen wir aber eine Kleinigkeit beachten. Denn entweder geben wir nur einen Auszug (excerpt) oder den vollen Inhalt (content) des Posts aus. Und genau da brauchen wir eine Unterscheidung der Attribute.
if(has_excerpt()) {
echo '<span itemprop="description">';
the_excerpt();
echo '</span>';
} else {
echo '<span itemprop="text">';
the_content(__('Read more →','magnomad'));
echo '</span>';
}
Die Daten des Herausgebers ergänzen
Als Letztes ergänzen wir noch den sogenannten Publisher. Das wird bei dir im Theme fehlen und den Herausgeber brauchten wir bis jetzt auch nicht. Aber denk daran je mehr Infos du der Suchmaschine gibst, desto besser wird sie mit deinem Blog zusammenarbeiten. Daher ergänzen wir folgenden Code vor dem schließenden article-Tag.
<div class="publisher-img" style="display:none;"
itemprop="publisher" itemscope
itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope
itemtype="https://schema.org/ImageObject">
<img src="/wp-content/uploads/2018/08/tmdn-logo-black-transparent.png" width="396" height="91"/>
<meta itemprop="url" content="/wp-content/uploads/2018/08/tmdn-logo-black-transparent.png">
<meta itemprop="width" content="232">
<meta itemprop="height" content="90">
</div>
<meta itemprop="name" content="https://the-magical-digital-nomad.com/wp-content/uploads/2018/08/tmdn-logo-black-transparent.png">
</div>
<meta itemprop="dateModified" content="<?php echo the_time('c'); ?>"/>
</article><!--end post-entry-->
Die Bilder der Posts mit strukturierten Daten kennzeichnen
Das ist jetzt nicht ganz so einfach. Denn wir haben verschiedene Arten von Bildern in unseren Posts. Einerseits gibt es da das Artikelbild, andererseits fügst du aber auch Bilder zu deinem Post hinzu.
Das Artikelbild auszeichnen
Dies ist die einfachste Variante, da das Bild bereits in deinem Loop enthalten ist und wir nur ein „paar“ Attribute hinzufügen müssen.
<?php if (has_post_thumbnail()) { ?>
<span itemprop="image" itemscope
itemtype="https://schema.org/ImageObject">
<a href="<?php the_permalink(); ?>" rel="bookmark">
<?php the_post_thumbnail('medium'); ?>
</a>
<?php
$picID = get_post_thumbnail_id();
$picURLs = wp_get_attachment_image_src($thumb_id, 'medium', true);
$picSize = getimagesize($picURLs[0]);
?>
<meta itemprop='url' content='<?php echo $picURLs[0]; ?>'>
<meta itemprop='width' content='<?php echo $picSize[0]; ?>'/>
<meta itemprop='height' content='<?php echo $picSize[1]; ?>'/>
</span>
<?php } ?>
Wahrscheinlich hast du in deinem Theme nur die Zeilen 1, 4, 5, 6 und 16 gefunden. Das ist ganz normal, mehr hast du bist jetzt nicht gebraucht. Die restlichen Zeilen ergänzt du einfach und legst damit die strukturierten Daten für das Artikelbild fest.
Die Bilder im Post auszeichnen
Dies ist jetzt ein wenig unangenehmer, denn wir wissen ja nie wie viele Bilder in einem Artikel enthalten sind. Aber glücklicherweise haben wir von WordPress die Datei functions.php in unserem Theme bekommen. Falls sie nicht da ist, erstelle einfach eine Textdatei mit dem Namen und füge als erste Zeile <?php und als letzte Zeile ?> ein. Nun verwenden wir einen Filter, welcher den Shortcode caption verändert. Bilder werden immer mit dieser Technik in Artikel eingefügt. Daher ist es von uns schlau, genau diesen Teil auch anzupassen und mit strukturierten Daten zu ergänzen.
//Bilder fuer schema.org anpassen
function tmdn_changeImageShortcode($empty, $attr, $content) {
//Standard-Attribute festlegen
$attr = shortcode_atts(array('id' => '',
'align' => 'alignnone',
'width' => '',
'caption' => ''), $attr);
//Falls das Bild keine Breite oder keinen Ueberschrift hat, die Funktion verlassen
if (1 > (int)$attr['width'] || empty( $attr['caption'])) {return '';}
//Eine vorhandene ID ergaenzen
if ($attr['id']) {$attr['id'] = 'id="'.esc_attr($attr['id']).'" ';}
//das erste Zeichen (Position im ShortCode) fuer die Bild-URL ermitteln
$firstChar = strpos($content, 'href=') + 13;
//das letzte Zeichen (Position) ermitteln
$lastChar = strpos($content, '" ', $firstChar);
//nur die URL fuer das Bild aus dem Inhalt schneiden
$imgUrl = 'http://'.substr($content, $firstChar, $lastChar - $firstChar);
//die Pixel (Breite/Hoehe) der Bilddatei ermitteln
$imgSize = getimagesize($imgUrl);
//neuen Content zusammenstellen
$newContent = '<div '.$attr['id'].'class="wp-caption '
.esc_attr($attr['align']).'" style="max-width: '
.(10 + (int)$attr['width']).'px;"'
.' itemprop="image" itemscope itemtype="https://schema.org/ImageObject">'
.do_shortcode($content)
.'<p class="wp-caption-text">'.$attr['caption'].'</p>'
.'<meta itemprop="url" content="'.$imgUrl.'">'
.'<meta itemprop="width" content="'.$imgSize[0].'"/>'
.'<meta itemprop="height" content="'.$imgSize[1].'"/>'
.'</div>';
//formatierten Shortcode zurueckgeben
return $newContent;
}
add_filter('img_caption_shortcode', 'tmdn_changeImageShortcode', 10, 3);
Mit dieser Funktion werden jetzt alle Bilder mit den passenden schema.org-Daten versehen. Du siehst in den Zeile 24 und 27 bis 29 diese strukturierten Daten. An und für sich sind es die gleichen wie beim Artikelbild selbst, nur die Technik sie zu ergänzen ist anders.
Der letzte Test für die strukturierten Daten
Wenn du jetzt alles fertig hast, kannst du deinen Blog mit dem Test Tool für strukturierte Daten von Google überprüfen. Hast du alles richtig gemacht, werden die nur die Artikelelemente und das Element für die Seite selbst angezeigt. Aber es gibt eben keine Fehler und Warnungen.
Falls du dich noch weiter mit dem Thema beschäftigen willst, habe ich hier ein paar Links für dich zusammengestellt
Weitere Infos für dich:
http://schema.org/
http://www.searchmetrics.com/knowledge-base/schema/
http://queue.acm.org/detail.cfm?id=2857276
https://developers.google.com/custom-search/docs/structured_data
https://search.google.com/structured-data/testing-tool/u/0/
https://developers.google.com/search/docs/guides/mark-up-content
