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 Beipiel:

<script type="application/ld+json">  
{
   "@context": "https://schema.org",
   "@type": "Restaurant",
   "name": "Burger King",
   "description": "{{Kurzbeschreibung des Restaurants}}",
   "image": [
      "{{URL zum quadratischen Bild des Restaurants (1x1)}}",
      "{{URL zum Bild im Seitenverhältnis 4x3}}",
      "{{URL zum Bild im Seitenverhältnis 16x9}}"
   ],
   "address": {
      "@type": "PostalAddress",
      "streetAddress": "{{Straße und Hausnummer}}",
      "addressLocality": "{{Stadt}}",
      "addressRegion": "{{Bundesland/Kanton}}",
      "postalCode": "{{Postleitzahl}}",
      "addressCountry": "{{Ländercode, z.B. DE für Deutschland}}"
   },
   "geo": {
      "@type": "GeoCoordinates",
      "latitude": {{Breitengrad des Restaurants}},
      "longitude": {{Längengrad des Restaurants}}
   },
   "url": "{{URL der Restaurant-Website}}",
   "telephone": "{{Telefonnummer des Restaurants}}",
   "servesCuisine": "{{Art der Küche (z.B. Italienisch, Deutsch)}}",
   "priceRange": "{{Preisspanne, z.B. $, $$, $$$}}",
   "openingHoursSpecification": [
      {
         "@type": "OpeningHoursSpecification",
         "dayOfWeek": ["{{Wochentag 1}}", "{{Wochentag 2}}"],
         "opens": "{{Öffnungszeit (Format: HH:MM)}}",
         "closes": "{{Schließzeit (Format: HH:MM)}}"
      },
      {
         "@type": "OpeningHoursSpecification",
         "dayOfWeek": ["{{Wochentag 3}}", "{{Wochentag 4}}", "{{Wochentag 5}}"],
         "opens": "{{Öffnungszeit (Format: HH:MM)}}",
         "closes": "{{Schließzeit (Format: HH:MM)}}"
      },
      {
         "@type": "OpeningHoursSpecification",
         "dayOfWeek": "{{Wochentag 6}}",
         "opens": "{{Öffnungszeit (Format: HH:MM)}}",
         "closes": "{{Schließzeit (Format: HH:MM)}}"
      },
      {
         "@type": "OpeningHoursSpecification",
         "dayOfWeek": "{{Wochentag 7}}",
         "opens": "{{Öffnungszeit (Format: HH:MM)}}",
         "closes": "{{Schließzeit (Format: HH:MM)}}"
      }
   ],
   "menu": "{{URL zur Speisekarte}}",
   "acceptsReservations": "True",
   "reservationUrl": "{{URL zur Online-Reservierung, falls vorhanden}}",
   "paymentAccepted": [
      "{{Akzeptierte Zahlungsmethode 1, z.B. Kreditkarte}}",
      "{{Akzeptierte Zahlungsmethode 2, z.B. PayPal}}",
      "{{Akzeptierte Zahlungsmethode 3, z.B. Bargeld}}"
   ],
   "owner": {
      "@type": "Person",
      "name": "{{Name des Inhabers}}",
      "url": "{{URL zur Webseite des Inhabers, falls vorhanden}}"
   },
   "foundingDate": "{{Gründungsjahr des Restaurants}}",
   "review": [
      {
         "@type": "Review",
         "reviewRating": {
            "@type": "Rating",
            "ratingValue": {{Bewertung (Zahl zwischen 1 und 5)}},
            "bestRating": {{Höchstbewertung, typischerweise 5}}
         },
         "author": {
            "@type": "Person",
            "name": "{{Name des Rezensenten 1}}"
         },
         "datePublished": "{{Datum der Veröffentlichung (z.B. 2023-10-15)}}",
         "reviewBody": "{{Text der Bewertung}}"
      },
      {
         "@type": "Review",
         "reviewRating": {
            "@type": "Rating",
            "ratingValue": {{Bewertung (Zahl zwischen 1 und 5)}},
            "bestRating": {{Höchstbewertung, typischerweise 5}}
         },
         "author": {
            "@type": "Person",
            "name": "{{Name des Rezensenten 2}}"
         },
         "datePublished": "{{Datum der Veröffentlichung (z.B. 2023-09-05)}}",
         "reviewBody": "{{Text der Bewertung}}"
      }
   ],
   "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": {{Durchschnittliche Bewertung (z.B. 4.5)}},
      "reviewCount": {{Anzahl der Bewertungen (z.B. 128)}}
   },
   "contactPoint": {
      "@type": "ContactPoint",
      "telephone": "{{Telefonnummer für Reservierungen}}",
      "contactType": "Customer Service",
      "availableLanguage": ["Deutsch", "Englisch"]
   }
}
</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.

‍

Beispiel:

<script type="application/ld+json">  
{
   "@context": "https://schema.org",
   "@type": "Person",
   "name": "{{Vollständiger Name}}",
   "alternateName": "{{Spitzname oder Künstlername}}",
   "jobTitle": "{{Berufsbezeichnung, z.B. Webentwickler}}",
   "worksFor": {
      "@type": "Organization",
      "name": "{{Name des Unternehmens}}",
      "url": "{{URL der Unternehmenswebsite}}"
   },
   "url": "{{URL zur persönlichen Website oder Portfolio}}",
   "image": "{{URL zum Profilbild}}",
   "description": "{{Kurzbeschreibung oder Biografie der Person}}",
   "birthDate": "{{Geburtsdatum im Format YYYY-MM-DD}}",
   "birthPlace": {
      "@type": "Place",
      "name": "{{Geburtsort}}",
      "address": {
         "@type": "PostalAddress",
         "addressLocality": "{{Stadt}}",
         "addressCountry": "{{Land, z.B. DE für Deutschland}}"
      }
   },
   "address": {
      "@type": "PostalAddress",
      "streetAddress": "{{Straße und Hausnummer}}",
      "addressLocality": "{{Wohnort}}",
      "addressRegion": "{{Bundesland/Kanton}}",
      "postalCode": "{{Postleitzahl}}",
      "addressCountry": "{{Ländercode, z.B. DE}}"
   },
   "contactPoint": {
      "@type": "ContactPoint",
      "telephone": "{{Telefonnummer}}",
      "contactType": "Persönlich",
      "email": "{{E-Mail-Adresse}}",
      "availableLanguage": ["Deutsch", "Englisch"]
   },
   "alumniOf": {
      "@type": "EducationalOrganization",
      "name": "{{Name der Bildungseinrichtung, z.B. Universität}}",
      "sameAs": "{{URL zur Website der Bildungseinrichtung}}"
   },
   "knowsAbout": [
      "{{Fachgebiet 1, z.B. Webentwicklung}}",
      "{{Fachgebiet 2, z.B. SEO}}",
      "{{Fachgebiet 3, z.B. Accessibility}}"
   ],
   "sameAs": [
      "{{URL zum LinkedIn-Profil}}",
      "{{URL zum Twitter-Profil}}",
      "{{URL zum Facebook-Profil}}",
      "{{URL zum Instagram-Profil}}"
   ],
   "award": [
      "{{Auszeichnung 1, z.B. Top Webentwickler 2023}}",
      "{{Auszeichnung 2}}"
   ],
   "affiliation": {
      "@type": "Organization",
      "name": "{{Mitgliedschaft oder Organisation, z.B. Verband deutscher Entwickler}}"
   },
   "hasOccupation": {
      "@type": "Occupation",
      "name": "{{Berufsbezeichnung, z.B. Webentwickler}}",
      "estimatedSalary": {
         "@type": "MonetaryAmount",
         "currency": "{{Währung, z.B. EUR}}",
         "value": "{{Durchschnittliches Gehalt}}"
      }
   },
   "performerIn": {
      "@type": "Event",
      "name": "{{Name des Events, falls zutreffend}}",
      "location": {
         "@type": "Place",
         "name": "{{Ort des Events}}"
      }
   },
   "hasCredential": {
      "@type": "EducationalOccupationalCredential",
      "credentialCategory": "{{Art des Zertifikats, z.B. Bachelor, Master, Zertifizierung}}",
      "name": "{{Name des Zertifikats oder Abschlusses}}",
      "url": "{{URL zur Zertifizierung oder Abschlussbeschreibung}}"
   }
}
</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>
document.addEventListener('DOMContentLoaded', function() {
   var summary = document.getElementById('post-summary').innerHTML;
   var content = document.getElementById('post-content').innerHTML;
   var schemaData = {
      "@context": "https://schema.org",
      "@type": "BlogPosting",
      "headline": "{{Blog-Post-Titel}}",
      "image": "{{URL zum Hauptbild des Blog-Posts}}",
      "author": {
         "@type": "Person",
         "name": "{{Autor Name}}"
      },
      "publisher": {
         "@type": "Organization",
         "name": "{{Name Organization}}",
         "logo": {
            "@type": "ImageObject",
            "url": "{{Link zum Logo}}"
         }
      },
      "datePublished": "{{wf {\"path\":\"date\",\"transformers\":[{\"name\":\"date\",\"arguments\":[\"YYYY-MM-DDTHH:mm:ss+01:00\"]}],\"type\":\"Date\"} }}",
      "dateModified": "{{wf {\"path\":\"updated-on\",\"transformers\":[{\"name\":\"date\",\"arguments\":[\"YYYY-MM-DDTHH:mm:ss+01:00\"]}],\"type\":\"Date\"} }}",
      "mainEntityOfPage": {
         "@type": "WebPage",
         "@id": "https://www.example.com/blog/{{URL-Slug}}"
      },
      "description": summary,
      "articleBody": content
   };
   var script = document.createElement('script');
   script.type = 'application/ld+json';
   script.text = JSON.stringify(schemaData);
   document.head.appendChild(script);
});
</script>

‍‍

‍

‍

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.

‍

Beispiel für FAQ Mikrodata Markup:‍

<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
   <h2 itemprop="name">Wie finde ich eine Ausbildungsstelle?</h2>
   <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
      <div itemprop="text">
         Wir bieten einen offiziellen Service zur Suche nach verfügbaren Ausbildungsplätzen. Um loszulegen, erstelle ein Konto, wähle die gewünschte Region und deine Präferenzen. Du kannst dann alle offiziell registrierten offenen Ausbildungsplätze durchsuchen.
      </div>
   </div>
</div>

<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
   <h2 itemprop="name">Wen kann ich kontaktieren?</h2>
   <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
      <div itemprop="text">
         Du kannst das Ausbildungsbüro über unsere offizielle Telefonhotline oder das untenstehende Webformular kontaktieren. In der Regel beantworten wir schriftliche Anfragen innerhalb von 7-10 Tagen.
      </div>
   </div>
</div>

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

itemtype="https://schema.org/FAQPage“
itemscope=""

FAQ Akkordion mit Attributen versehen

itemtype=""
itemprop="mainEntity"
itemtype="https://schema.org/Question"

Frage bekommt Attribut:

itemprop="name“

Attribut für Antwort DIV

itemscope=""
itemprop="acceptedAnswer"
itemtype="https://schema.org/Answer"

Attribut für Antwort Text

itemprop="text“

‍