Aus aktuellem Anlass und durch die Inspiration des allseits bekannten WordPress SEO Plugin von Yoast habe ich mich dazu entschlossen, ein jQuery Plugin zur dynamischen Generierung von SERP Snippets zu schreiben. Nach wenigen Stunden war es dann auch so weit und da es sich selbst bei diesem jQuery Plugin um das Thema Online Marketing bzw. SEO dreht, findet dieses nun auch seinen Platz im News-Blog von blueSummit.

Das Plugin ist so ausgelegt, dass es eigentlich von jedem Nutzer eingebunden werden kann, der sich ein wenig mit HTML und Javascript auskennt. Eine sinnvolle Standardkonfiguration ermöglicht es zudem, dass das Plugin nach der simplen Einbindung auch schon verwendet werden kann.

Für erfahrenere Nutzer und Kenner des Javascript-Frameworks jQuery gibt es jedoch auch etliche Möglichkeiten zur Anpassung des Plugins bzw. der Ausgabe des Snippets. Nachfolgend möchte ich nun die einzelnen Möglichkeiten der Einbindung und Konfigurationen nennen, aufzeigen und teilweise darauf eingehen. Am Ende des Artikels gibt es dann den Link zum Download, einer Demo-Seite sowie ein Screencast, der das ganze Konsturkt in Aktion zeigt.

Einbindung von SERPreview

$('.serpInput').serpreview();

Mit dieser Einbindung werden die Daten für die Generierung des Snippets aus dem Container “.serpInput” verwendet. Der dazu passende HTML-Code lautet z.B.:

<form class="serpInput">
<label>Title</label><input id="SERPreviewTitle" type="text" /><br />
<label>Description</label><input id="SERPreviewDescription" type="text" /><br />
</form>

Die Ausgabe der dort eingegebenen Daten erfolgt in folgendem Schnipsel:

<div id="SERPreview"></div>

Anpassung von SERPreview

Selbstverständlich können auch einige Variablen bzw. Einstellungen angepasst werden um das Preview so individuell wie möglich zu gestalten.
Folgende Einstellungen können gesetzt werden:

$('.serpInput').serpreview({

 // Verfügbar: de, en, it, fr, es, nl
 'hl' : 'de',
 // Input-Formular welches den Title beinhaltet
 'titleContainer' : '#SERPreviewTitle',
// Input-Formular welches die Description beinhaltet
 'descriptionContainer' : '#SERPreviewDescription',
 // Domain welche im URL-Feld angezeigt werden soll
 'domain' : 'http://www.example.com/',
 // Brand der ans Ende des Titles gehängt werden soll (kann auch leer bleiben)
 'brand' : ' - myBrand',
// Container in welchen das Preview geladen werden soll
 'outputContainer' : '#SERPreview',
// Überschrift des Previews
 'serpIntro' : 'Google Snippet Preview',
// Maximale Länge des Titels (überlänge wird mittels "..." abgeschnitten)
 'maxTitleLen' : 65,
 // Maximale Länge Description (überlänge wird mittels "..." abgeschnitten)
 'maxDescriptionLen' : 160,
 // Maximale Länge der URL (überlänge wird mittels "..." abgeschnitten)
 'maxUrlLen' : 60,
// Preview gleich laden (Befüllung mit Default-Texten)
 'previewReady' : true 

});

SERPreview Demo

» zur Demo

SERPreview Download

Volles Package der Version 1.0, sowohl für Developement als auch komprimiert für den Einsatz.

» jetzt downloaden

Viel Spaß mit dem Plugin!
Über Kommentare mit konstruktiver Kritik oder der Verwendung des Plugins freue ich mich selbstverständlich.

Dieser Artikel wurde am Donnerstag, 17. November 2011 um 18:01 veröffentlicht und ist abgelegt unter SEO. Du kannst die Antworten zu diesem Artikel mit Hilfe des RSS 2.0 Feeds verfolgen. Du kannst eine Antwort hinterlassen oder einen Trackback von deiner Seite aus senden.