schema.org Webpage Beispiel

So erstellst du eine Webpage mit schema.org.

WebPage itemtype einbinden

<html itemscope itemtype="http://schema.org/WebPage">
    <head></head>
    <body></body>
</html>

Name der Webseite

<head>
    <meta itemprop="name" content="page-name">
</head>

Inhaber der Seite

Mit "reviewedBy" können wir sagen, wer für den Inhalt der Seite verantwortlich ist, also wer die Seite pflegt. Der Itemtype kann eine Organization oder eine Person sein.

Ein Beispiel mit einer Organization

<section class="company-name" itemprop="reviewedBy" itemscope itemtype="https://schema.org/Organization"></section>

Name, Logo und Slogan

<section class="company-name" itemprop="reviewedBy" itemscope itemtype="https://schema.org/Organization">
    <div>
        <div itemprop="brand" itemscope itemtype="https://schema.org/Organization">
            <p itemprop="legalName">Musterfirma GmbH</p>
            <figure itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                <img itemprop="thumbnail" src="http://dummyimage.com/70x70/dedede/0b9fb3.jpg&text=L" width="35" height="35" alt="
                                Logo: Musterfirma GmbH">
                <figcaption itemprop="caption">Musterfirma GmbH - Slogan</figcaption>
            </figure>
        </div>
    </div>
</section>

Eine Navigation mit itemprop="breadcrumb"

So definierst du deine Navigation mit schema.org

<section class="navigation">
    <nav itemprop="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
        <ul>
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" > <a href="#" itemprop="item"> <span itemprop="name">Referenzen</span> </a> </li>
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="#" itemprop="item"> <span itemprop="name">Über uns</span> </a> </li>
            <li itemprop="itemListElement"itemscope itemtype="http://schema.org/ListItem"> <a href="#" itemprop="item"> <span itemprop="name">Partner</span> </a> </li>
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="#" itemprop="item"> <span itemprop="name">Kontakt</span> </a> </li>
        </ul>
    </nav>
</section>

mainContentOfPage defenieren

Eine Webseite sollte eine Hauptüberschrift haben. Zusätzlich hast noch itemprop "text" und "alternativeHeadline".

<main itemprop="mainContentOfPage" itemscope itemtype="https://schema.org/WebPageElement">
    <h1 itemprop="headline">Meine Hauptüberschrift</h1>
    <h2 itemprop="alternativeHeadline">2. Unterüberschrift</h2>
    <div itemprop="text">
        <p>content</p>
    </div>
</main>

<footer class="footer">
    <div class="author" itemprop="author" itemscope itemtype="https://schema.org/Person">
        <p itemprop="name">Max Mustermann</p>
    </div>
    <div class="date">
        <p>Erstellt am: <time itemprop="dateCreated">01.01.2015</time><p>
    </div>
    <div class="copyright">
        <span itemprop="copyrightYear">2015</span>
        <div itemprop="copyrightHolder" itemscope itemtype="https://schema.org/Organization">
            <p itemprop="legalName">Musterfirma GmbH</p>
        </div>
    </div>
</footer>

schema.org Author

Der Autor des Inhalts. Ein ausführliches Beispiel mit:

  • Name
  • Geburtstdatum
  • email
  • Berufsbezeichnung
  • Adresse
  • Bild
<section class="person" itemprop="author" itemscope itemtype="https://schema.org/Person">
    <p class="name" itemprop="name">Max Msutermann</p>
    <div class="bday">
        <p>birthday: <time itemprop="birthDate" >25.09.1990</time></p>
    </div>
    <div class="email">
        <p><a itemprop="email" href="mailto:max@mustermann.de">max@mustermann.de</a></p>
    </div>
    <div class="job-title">
        <p>Position: <span itemprop="jobTitle">Web-Worker</span></p>
    </div>
    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress" class="address">
        <ul>
            <li itemprop="addressLocality">City</li>
            <li itemprop="streetAddress">Street address</li>
            <li itemprop="postalCode">Postal Code</li>
Zurück