Advanced schema markup in Webflow

Navigation paths or breadcrumb schema markup in Webflow

I've already made a YouTube video for the Schema Markup Breadcrumbs. Feel free to drop by.

Breadcrumbs are an essential part of your site's navigation and usability — and they help Google better understand your page structure. In my YouTube video “Schema Markup in Webflow — Breadcrumbs” I show you step by step how to insert breadcrumb markups and optimize your website structure.

We'll start with the basics of Markup scheme and end with the review in Rich Results Testing Tool. This allows you to ensure that your markup is error-free and that your website is optimally read by Google.

Schema markup for restaurants and local businesses

Schema markup is critical for companies because it helps search engines understand and display important information about a company in a structured way. Just for restaurants or local companies Is optimized schema markup useful for contact information, Opening hours and valuations highlight and make it visible directly in search results.

An example:

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

‍

In addition to schema markup for restaurants and local businesses, there are numerous other types of schemes that provide specific information and help search engines understand the content better. Here are three more important markups: persona, BlogPosting and FAQ.

People schema markup

Structure personal data and professional profile

The person schema markup is ideal for presenting people such as owners or authors. It allows you to display job titles, contact information, social profiles and biographies. The markup particularly helps with personnel and expert positioning, e.g. for consultants or freelancers, and creates trust.

It should be in the head area of the About Me Contact page and/or on the home page

example:

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

Blog posting schema markup in Site Settings

that BlogPosting markup provides an easy way blog posts present in a structured way so that Google recognizes the main information and displays it prominently in search results. This markup is ideal for content creators and companies that blog regularly.

example:

<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 scheme markup View answers to common questions in a structured way

that FAQ markup is ideal for presenting questions and answers on your website in a structured way. It is particularly suitable for sites with FAQ sections and increases the chance of being featured in the Google search results page (SERP).

‍

Example of FAQ microdata 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>

Create blog and FAQ

Define FAQ as a multi-reference in the blog

‍
Post Body (right text)

Summary (rich text)

Show FAQ

Activate Switch only when FAQ is selected

Define FAQ visibility for FAQ section

Equipping FAQ Section with Attributes

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

FAQ Adding attributes to accordion

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

Question gets attribute:

itemprop="name“

DIV response attribute

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

Response text attribute

itemprop="text“

‍