Der BesserOnlineBlog 【ツ】

besser Online jeden Tag – Tipps für SEO, eCommerce, Online-Marketing

SEO Bookmarklet für Title, Description und Keywords (Phils SEO-Inspector!)

seo-inspector
Helfe Sterne sammeln!
Loading ... Loading ...

Also irgendwie sind die sogenannten Bookmarklets die ganze Zeit an mir vorbeigegangen. Musti hat mich diese Woche um Hilfe für ein solches gebeten. Da musste ich mich erst mal selbst schlau machen was so ein Bookmarklet eigentlich ist. Aber ein guter Grund sich nun einmal näher damit zu beschäftigen.

Was sind Bookmarklets

Bookmarklets sind eigentlich – wie der Name schon sagt – Bookmarks für den Browser. Das “let” macht jedoch eine kleine Clientseitige JavaScript Anwendung daraus. Diese wird auf die aktuell geöffnete Seite per JavaScript angewendet. Mit Hilfe des Document Object Models (DOM) lassen sich so Informationen über eine Seite auslesen und anzeigen.

Phils SEO Inspector!

Ich habe ein kleines Bookmarklet entwickelt, welches den Title einer Seite, die Site Description, die Site Keywords (auch wenn die ja bekanntlich nicht so sehr wichtig sind) und die “Meta Robots Daten” ausliest. Damit hat man per Button sofort relevante Informationen ohne lästiges Suchen im Quellcode parat

Das Einbinden ist sehr einfach. Rechtsklickt den blauen Button  und wählt “Lesezeichen für diesen Link hinzufügen” (Mozilla Firefox).

Phils SEO Inspector!

Nun könnt ihr euer Bookmarklet in eurer Favoritenleiste platzieren. Surft eine gewünschte Seite an, und klickt auf das Bookmarklet. Das Ergebnis sieht dann z.B. so aus.

seo-bookmarklet-bahn.de

Screnshot SEO Bookmerklet

Phils SEO-Inspector! Code

Wenn ihr das Plugin abwandelt möchtet stelle ich hier noch den Code bereit:

Beachtet jedoch bitte dass ich das Bookmarklet zweigeteilt habe. Der folgende Code kommt in eine .html Datei die auch lokal aufgerufen werden kann. Dann habt ihr den Link der wieder rechtsgeklickt und als Favorit gespeichert werden muss. Entscheidend sind hier die Parameter von .setAttribute(….). Hier wird der Verweis auf eine Javascript Datei auf dem Webserver gegeben.

Warum zweigeteilt? Ich habe zwar gelesen dass der Code im Bookmarklet ein Einzeiler sein soll (ob es stimmt, weiß ich nicht genau), aber vor allem kann ich so den eigentlichen JavaScript sauber auf dem Server, ohne Codeverstopfung und zusammenschieben, schreiben.

Folgend noch der Code der das eigentliche Bookmarklet ausmacht:

Über Feedback freue mich mich wie immer sehr! Egal ob ihr Fragen dazu habt, oder Fehler entdeckt. Schreibt mir einfach in die Kommentare. Wenns euch gefällt bitte wieder Liken und ab jetzt auch noch mit Sternen versehen.

Vielen Dank ;-)


Hier schreibt: Phillip Groschup, Student für E-Commerce an der FH Würzburg. Ich interessiere mich für ECommerce, SEO/SEA, Online-Marketing und Webentwicklung. Ich schreibe und bearbeite mit Hilfe der gängingen Websprachen Websites. Insbesondere arbeite ich viel mit WordPress. Auf diesem Blog schreibe über diese Themen, über Vorträge und alles was mich sonst noch interessiert.

Schreibe einen Kommentar