Fortgeschrittenes Schema Markup in Webflow

Navigationspfade oder auch Breadcrumb Schema Markup in Webflow

Für die Schema Markup Breadcrumbs habe ich schon ein Youtube Video gemacht. Schaue gerne vorbei.

Breadcrumbs sind ein wesentlicher Bestandteil für die Navigation und Nutzerfreundlichkeit deiner Website – und sie helfen Google dabei, deine Seitenstruktur besser zu verstehen. In meinem YouTube-Video „Schema Markup in Webflow – Breadcrumbs“ zeige ich dir Schritt für Schritt, wie du Breadcrumb-Markups einfügst und deine Websitestruktur optimierst.

Wir beginnen mit den Grundlagen des Schema Markups und enden mit der Überprüfung im Rich Results Testing Tool. So kannst du sicherstellen, dass dein Markup fehlerfrei ist und deine Website optimal von Google gelesen wird.

Schema Markup für Restaurants und lokale Unternehmen

Schema-Markup ist für Unternehmen von entscheidender Bedeutung, da es Suchmaschinen dabei hilft, wichtige Informationen über ein Unternehmen strukturiert zu verstehen und anzuzeigen. Gerade für Restaurants oder lokale Unternehmen ist ein optimiertes Schema-Markup hilfreich, um Kontaktinformationen, Öffnungszeiten und Bewertungen hervorzuheben und direkt in den Suchergebnissen sichtbar zu machen.

Ein Beispiel für ein Restaurant in Bremen:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Restaurant",
  "name": "Trattoria Beispiel",
  "image": "https://www.example.de/bilder/restaurant.jpg",
  "telephone": "+49 421 1234567",
  "url": "https://www.example.de",
  "servesCuisine": "Italienisch",
  "priceRange": "€€",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Am Wall 1",
    "postalCode": "28195",
    "addressLocality": "Bremen",
    "addressCountry": "DE"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": 53.0758, "longitude": 8.8072 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    "opens": "17:00",
    "closes": "23:00"
  }],
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.6", "reviewCount": "128" }
}
</script>

Neben dem Schema-Markup für Restaurants und lokale Unternehmen gibt es zahlreiche weitere Schema-Typen, die spezifische Informationen bereitstellen und Suchmaschinen helfen, den Content besser zu verstehen. Hier sind drei weitere wichtige Markups: Person, BlogPosting und FAQ.

Personen Schema Markup

Persönliche Daten und Berufsprofil strukturieren

Das Person Schema Markup ist ideal, um Personen wie Inhaber oder Autoren zu präsentieren. Es ermöglicht die Anzeige von Berufsbezeichnungen, Kontaktinformationen, Sozialen Profilen und Biografien. Das Markup hilft besonders bei der Personal- und Expertenpositionierung, z.B. für Berater oder Freelancer, und schafft Vertrauen.

Das Markup gehört in den Head-Bereich der Seite „Über mich“, der Kontaktseite oder der Startseite.

Beispiel:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Max Mustermann",
  "jobTitle": "Webentwickler",
  "url": "https://www.example.de/ueber-mich",
  "image": "https://www.example.de/bilder/portraet.jpg",
  "email": "mailto:hallo@example.de",
  "address": { "@type": "PostalAddress", "addressLocality": "Bremen", "addressCountry": "DE" },
  "worksFor": { "@type": "Organization", "name": "Mustermann Web" },
  "knowsAbout": ["Webflow", "Technisches SEO", "Schema Markup"],
  "sameAs": [
    "https://www.linkedin.com/in/max-mustermann",
    "https://www.youtube.com/@maxmustermann"
  ]
}
</script>

Blogposting Schema Markup in den Site Settings

Das BlogPosting Markup bietet eine einfache Möglichkeit, Blogposts strukturiert darzustellen, sodass Google die Hauptinformationen erkennt und prominent in den Suchergebnissen anzeigt. Dieses Markup ist ideal für Content-Creator und Unternehmen, die regelmäßig bloggen.

Beispiel:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "{{Name}}",
  "description": "{{Meta Description}}",
  "image": "{{Main Image}}",
  "datePublished": "{{Erstveröffentlichung}}",
  "dateModified": "{{Updated On}}",
  "author": { "@type": "Person", "name": "Max Mustermann", "url": "https://www.example.de/ueber-mich" },
  "publisher": {
    "@type": "Organization",
    "name": "Mustermann Web",
    "logo": { "@type": "ImageObject", "url": "https://www.example.de/logo.png" }
  },
  "mainEntityOfPage": "https://www.example.de/blog/{{Slug}}"
}
</script>
<!-- Die Werte in {{ }} sind CMS-Felder: in Webflow über "+ Add Field" im Custom Code des Blog-Templates einsetzen. -->

FAQ Schema Markup Antworten auf häufige Fragen strukturiert anzeigen

Das FAQ Markup ist ideal, um Fragen und Antworten auf deiner Website strukturiert darzustellen. Es eignet sich besonders für Seiten mit FAQ-Sektionen und erhöht die Chance, in der Google-Suchergebnisseite (SERP) hervorgehoben zu werden.

Hinweis: Seit 2023 zeigt Google FAQ-Snippets in den Suchergebnissen nur noch für Behörden- und Gesundheitsseiten. Das Markup lohnt sich trotzdem: Google, ChatGPT und Perplexity ordnen Frage und Antwort damit eindeutig zu.

Beispiel für FAQ Mikrodata Markup:‍

<section itemscope itemtype="https://schema.org/FAQPage">
  <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
    <h3 itemprop="name">Was kostet eine Webflow-Website?</h3>
    <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
      <div itemprop="text">Das hängt vom Umfang ab. Eine kleine Firmenwebsite beginnt bei einigen tausend Euro.</div>
    </div>
  </div>
</section>

Blog und FAQ anlegen

Im Blog FAQ als Multi-reference definieren

‍
Post Body (Richt-Text)

Zusammenfassung (Rich-Text)

Show FAQ

Switch nur dann aktivieren, wenn FAQ ausgewählt wird

FAQ Visibility für FAQ Section definieren

FAQ Section mit Attributen ausstatten

Section (Custom Attributes):
itemscope   (Wert leer lassen)
itemtype    https://schema.org/FAQPage

FAQ Akkordion mit Attributen versehen

Akkordion-Element (Collection Item):
itemscope   (Wert leer lassen)
itemprop    mainEntity
itemtype    https://schema.org/Question

Frage bekommt Attribut:

Frage (Überschrift):
itemprop    name

Attribut für Antwort DIV

Antwort-DIV:
itemscope   (Wert leer lassen)
itemprop    acceptedAnswer
itemtype    https://schema.org/Answer

Attribut für Antwort Text

Antwort-Text (Rich Text):
itemprop    text