Forum: NOF - Tutorials (185 anschauliche Tutorials zum Lesen und Nacharbeiten) > Suchmaschinen-Optimierung (SEO)

Rich Snippets in NetObjects Fusion verwenden

(1/3) > >>

nettesekel:
Beim Versuch Tante Google zur Frage "Rich Snippets und NetObjects Fusion" ein Ergebnis zu entlocken stellte ich fest, dass das einzige deutschsprachige Ergebnis, welches auf Anhieb zu finden war, eine Frage aus unserem Forum ist, auf welche bis dato jedoch die Antwort aussteht.

Die Frage danach, wie man Rich Snippets in NetObjects Fusion einbinden /verwenden kann , sollte also dringend mal beantwortet werden und deshalb habe ich den Anfang gemacht und mich mit diesem Thema mal ein wenig auseinander gesetzt.

nettesekel:
In diesem Tutorial möchte ich weniger darauf eingehen, was "Rich Snippets" bedeutet und welchen Sinn die Verwendung hat. Hierzu gibt es reichlich Informationen im Web die man sich erlesen kann. Deshalb beschränke ich mich in diesem Bereich auf einige hilfreiche Links.


Allgemeine Informationen:
Was sind Rich Snippets und wozu dienen sie?

Infos zu den unterschiedlichen Markup-Formaten:
Mikrodaten (empfohlen)
Mikroformate
RDFa

Informationen zu von Google unterstützten Inhaltstypen:
Erfahrungsberichte
Personen
Produkte
Unternehmen und Organisationen
Rezepte
Veranstaltungen
Musik

Testtool zum Testen eurer Website auf Rich Snippets:
http://www.google.com/webmasters/tools/richsnippets

nettesekel:
Mir geht es vielmehr darum euch zu zeigen, wie ihr eure Markups in eurem Projekt platzieren könnt ohne dass ihr all eure Inhalte im Quelltext editieren müsst.
Ich habe da für mich eine recht praktische Methode herausgefunden, die ich euch nun anhand eines Beispiels aus den Google-Anleitungen demonstrieren möchte.

Ich habe mich bei meinem Beispiel für das Markup-Format "Mikrodaten" und den Inhaltstyp "Person" entschieden.
Das Beispiel findet ihr auf folgender Seite: http://support.google.com/webmasters/bin/answer.py?hl=de&answer=146646
Klickt bitte unten am Ende der Seite auf den Link "Mikrodaten" damit das entsprechende Beispiel ausgeklappt wird.

nettesekel:
Ich habe also zunächst mal den Text aus dem Beispiel in leicht veränderter Form in ein Textfeld eingefügt.




Nun müssten wir den personenbezogenen Textabsatz mit einem div umschließen, welches auch gleich die Information zum Inhaltstyp beinhaltet. Konkret auf unser Beipiel bezogen heißt das, der Quellcode dieses besagten Textabsatzes müsste mit diesem Codeschnipsel beginnen:

--- Code: HTML5 ---<div itemscope itemtype="http://data-vocabulary.org/Person">
und mit diesem Codeschnipsel enden:

--- Code: HTML5 ---</div>

Um das Ganze umzusetzen zu können, aktiviert ihr zunächst mal die erweiterten Werkzeuge. Entnehmt die Vorgehensweise bitte dem folgenden Screenshot.




Im Anschluss setzt ihr mit einem Doppelklick den Cursor an den Anfang des Textes (der Cursor muss dort blinken) und klickt dann auf den Werkzeug-Button "Objekt-HTML".




Es öffnet sich ein Fenster in welches ihr nun den öffnenden <div>-Tag einfügt. Die Eingabe bestätigt ihr mit einem Klick auf den "OK"-Button.


--- Code: HTML5 ---<div itemscope itemtype="http://data-vocabulary.org/Person">



Im Anschluss setzt ihr den Cursor an Ende des personenbezogenen Absatzes, in meinem Beispiel also hinter Harald, klickt erneut den Button fürs Objekt-HTML und fügt im Fenster nun den schließenden <div>-Tag ein.


--- Code: HTML5 ---</div>
Als Ergebnis solltet ihr in Eurem Text nun an beiden Stellen ein kleines blaues Symbol sehen.

nettesekel:
Auf diese Weise verfahrt ihr nun mit allen anderen Einfügungen auch.
Als nächstes habe ich meinen Cursor vor den Namen |Michael Müller gesetzt und über den Objekt-HTML-Button einen <span>-Tag geöffnet:


--- Code: HTML5 ---<span itemprop="name">
im Anschluss muss natürlich dieser <span>-Tag geschlossen werden. Also Cursor hinter Müller setzen....


--- Code: HTML5 ---</span>

Dann wird der Nickname/Spitzname "Michi" umschlossen. Also wieder der Cursor einmal vor und einmal hinter den zu umschließenden Text setzen und über den Objekt-HTML-Button wieder den jeweiligen Code einfügen.


--- Code: HTML5 ---<span itemprop="nickname">
--- Code: HTML5 ---</span>

Navigation

[0] Themen-Index

[#] Nächste Seite