3 Kirby CMS Seo Snippets für besser Google Rankings & optimale Darstellung in den Sozialen-Netzen
Ich zeige Dir hier, wie Du das header.php Snippet von Kirby 2 für Google & Co. sowie Soziale-Netzwerke, wie Facebook und Google+ optimierst. Sowie 2 Snippets für das Logo und die Breadcrumb mit Schema.org Auszeichnung.Die Templates in dem schlanken CMS Kirby 2 werden in der Regel aus verschiedenen Php-Snippets zusammengebaut.
Der Start ist dabei wohl in 99% der Fälle das header.php Snippet.
Kirby 2 header.php Snippet mit den grundlegenden SEO Angaben
Das Code Beispiel ist ein kompletter Html-<head>-Bereich, der mehr als nur SEO-Optimierungen enthält – also auch beispielhafte Css und Javascript Dateien und Ähnliches.
Grundlegende Opengraph-Tags werden automatisch ausgefüllt und auch die optimalen <meta>-Tags sind vorhanden.
Im Code-Snippet sind Kommentare vorangestellt, zu Klärung, warum etwas drin ist.
<!-- Die quasi Pflichtangabe des Doctype´s, in diesem Fall HTML5 -->
<!DOCTYPE html>
<!-- Die Ausrichtung der Sprache der Webseite, hier: Deutsch -->
<html lang="de">
<html>
<head>
<!-- Zeichencodierung, damit Umlaute und ähnliches korrekt dargestellt werden -->
<meta charset="utf-8">
<!-- Verwende die neueste, beim Benutzer, verfügbare InternetExplorer Version -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Löse die URLs von externen Quellen vor dem Laden der Datei auf – sollte dann etwas schneller laden. Beispielhaft: -->
<link rel="dns-prefetch" href="//ajax.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//www.facebook.com">
<link rel="dns-prefetch" href="//www.jede-externeURL-von-der-du-dateienbeziehst.com">
<!--[if lt IE 9]>
<link rel="dns-prefetch" href="//html5shiv.googlecode.com">
<![endif]-->
<!-- Angabe für Responsive Webdesigns, welche Größe zum Anfang geladen werden soll -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Der Canonical Tag zum vermeiden von doppelten Inhalt – wobei, da Kirby meine ich kein Problem mit haben sollte…-->
<link rel="canonical" href="<?php echo html($page->url()) ?>" />
<!-- Titel der Seite, der im Browser-Tab/Fenster angezeigt wird und in der Regel der Titel in den Google Suchergebnissen ist -->
<?php if($page->isHomepage()): ?>
<title><?php echo html($site->title()) ?></title>
<?php else: ?>
<title><?php echo $page->title()->html() ?> | <?php echo $site->title()->html() ?></title>
<?php endif ?>
<!-- Kurzbeschreibung der Webseite, die auch in der Google-Snippets erscheinen kann ( ca. 155 Zeichen) -->
<meta name="description" content="<?php echo $site->description()->html() ?>">
<!-- Wenn einen Google+ Unternehmenswebseite besteht, dann hier die Url eintragen -->
<link rel="publisher" href="https://plus.google.com/+Name-DeinerGoogle_MyBusinessWebseite" />
<!-- Anstatt dem Author könnte man hier auch die Google+ Url des Unternehmens nehmen -->
<meta name="publisher" content="<?php echo html($site->author()) ?>" />
<meta name="copyright" content="<?php echo html($site->author()) ?>" />
<!-- Suchmaschinen mitteilen, dass die Seite indiziert und allen Links gefolgt werden soll -->
<meta name="robots" content="index,follow" />
<!-- Beginn der OpenGraph Tags für Facebook & Co. -->
<meta name="DC.Title" content="<?php echo html($page->title()) ?>" />
<meta name="DC.Creator" content="<?php echo html($site->author()) ?>" />
<meta name="DC.Rights" content="<?php echo html($site->author()) ?>" />
<meta name="DC.Publisher" content="<?php echo html($site->author()) ?>" />
<meta name="DC.Description" content="<?php echo html($page->description()) ?>"/ >
<meta name="DC.Language" content="de_DE" />
<meta property="og:title" content="<?php echo html($page->title()) ?> | <?php echo html($site->title()) ?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo html($site->url()) ?>" />
<meta property="og:image" content="<?php echo url('assets/images/facebook/facebook-icon-646x1027.jpg') ?>" />
<meta property="og:description" content="<?php echo html($page->description()) ?>" />
<meta itemprop="name" content="<?php echo html($page->title()) ?> | <?php echo html($site->title()) ?>">
<meta itemprop="description" content="<?php echo html($page->description()) ?>">
<!-- Bei Bedarf folgende Favicons als Basis -->
<!-- Favicons -->
<link rel="shortcut icon" href="<?php echo url('/favicon.ico') ?>" />
<link rel="apple-touch-icon" href="<?php echo url('assets/images/icons/icons/iOS/apple-touch-icon-72x72.png') ?>" />
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo url('assets/images/icons/iOS/apple-touch-icon-72x72.png') ?>" />
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo url('assets/images/icons/iOS/apple-touch-icon-114x114.png') ?>" />
<!-- CSS -->
<?php echo css('assets/css/main.css') ?>
<!-- Javascript -->
<?php echo js('assets/js/jquery.plugins.js') ?>
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
slideshow:"enabled",
slideshowSpeed: 1700,
pauseOnHover:"true"
});
});
</script>
</head>
<!-- Jeder Seite erhält einen eigene Body Id, falls für individuelles Css benötigt-->
<body id="<?php echo $page->uid() ?>">
Logo mit Schema.org Auszeichnung
Schema Mark Up gilt als gutes Signal für Suchmaschinen und kann im Fall des Logos dabei helfen, wenn z.B. nach einer Marke gesucht wird, dass das Logo in den Suchergebnissen erscheint.
<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="<?php echo url() ?>">Home</a>
<img itemprop="logo" src="<?php echo url('assets/images/logo.svg') ?>" alt="<?php echo $site->title()->html() ?>" />
</div>Breadcrumb Snippet für Kirby mit Schema.org Auszeichnung
Um noch ein bisschen mehr Seo-Power zu geben, habe ich hier ein Snippet für eine Breadcrumb Navigation inklusive Schema.org Auszeichnung mit den passenden Kirby 2 Php Schnipseln.
<div class="breadcrumb" itemprop="breadcrumb">
Sie sind hier:
<span prefix="v: http://rdf.data-vocabulary.org/#">
<?php foreach($site->breadcrumb() AS $crumb): ?>
<?php if ($crumb->isActive()): ?>
<span typeof="v:Breadcrumb">
<span class="breadcrumb_last" property="v:title">
<?php echo $crumb->title() ?>
</span>
</span>
<?php else: ?>
<span typeof="v:Breadcrumb">
<a href="<?php echo $crumb->url() ?>" rel="v:url" property="v:title">
<?php echo $crumb->title() ?>
</a>
</span> ›
<?php endif ?>
<?php endforeach ?>
</span>
</div>
Und helfen Dir die Snippets weiter?
Hast Du Ergänzungen oder Änderungsvorschläge?
Über Vorschläge oder Kritik freue ich, also ab damit in die Kommentare.
