Schema markup examples

templates/_site/_news/_entry.twig

@@ -1,12 +1,31 @@
+{% do entry.setShouldRenderSchema(false) %}
 {% extends '_site/_layout' %}
 
+{% set overview = craft.entries.section('newsOverview').one() %}
 {% set breadcrumbs = [
     craft.entries.section('newsOverview').one(),
     entry,
 ] %}
 
 {% block content %}
 
+    {# @var schema \Spatie\SchemaOrg\Schema #}
+    {% set schema = seoFields.schema %}
+    {{ schema.article
+        .name(entry.title)
+        .headline(entry.title)
+        .image(entry.headerImage.one().getUrl() ?? '')
+        .articleSection(overview.title)
+        .author(entry.getUrl() ~ '#organisation')
+        .articleBody(entry.intro|striptags)
+    |raw }}
+
+    {{ schema.organization
+        .id('organisation')
+        .url(currentSite.baseUrl)
+        .name(craft.app.systemName)
+    |raw }}
+
     {% embed "_site/_snippet/_content/_defaultHeader" %}
         {% block headerText %}
             {% include '_site/_snippet/_nav/_breadcrumb' %}

templates/_site/_news/_index.twig

@@ -1,4 +1,5 @@
-{% extends "_site/_layout" %}
+{% do entry.setShouldRenderSchema(false) %}
+{% extends '_site/_layout' %}
 
 {% set breadcrumbs = [entry] %}
 
@@ -145,21 +146,36 @@
                                         </span>
                                     {% endif %}
                                     {% if catQuery %}
+                                        {% set schemaCats = [] %}
                                         {% for category in categories.id(catQuery).all() %}
                                             <span class="flex items-center px-2 mb-2 mr-2 text-sm font-light text-white capitalize rounded-full bg-primary">{{ category.title }}
                                                 <button type="button" class="flex items-center justify-center w-4 h-4 ml-2 text-black ie-hidden" data-filter-clear-elements='[{"name": "category[]","value": "{{ category.id }}"}]'>
                                                     {{ icon('clear') }}
                                                     <span class="sr-only">{{ "Verwijder filter "|t }} {{ category.title }}</span>
                                                 </button>
                                             </span>
+                                            {% set schemaCats = schemaCats|merge([{
+                                                "@type": "Thing",
+                                                "name": category.title,
+                                            }]) %}
                                         {% endfor %}
                                     {% endif %}
                                     <button type="button" id="filterClearInResults">Clear filter</button>
                                 </div>
                             {% endif %}
                             <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
+                                {% set schemaItems = [] %}
                                 {% for cardEntry in news %}
                                     {% include '_site/_snippet/_item/_card' %}
+                                    {% set schemaItems = schemaItems|merge([{
+                                        "@type": "ListItem",
+                                        "position": loop.index,
+                                        "item": {
+                                            "@type": "NewsArticle",
+                                            "name": cardEntry.title,
+                                            "url": cardEntry.url,
+                                        }
+                                    }]) %}
                                 {% else %}
                                     <div class="sm:col-span-2 md:col-span-3">
                                         {{ "Geen items gevonden"|t }}
@@ -179,4 +195,19 @@
             </div>
         </div>
     </div>
+
+
+    {# @var schema \Spatie\SchemaOrg\Schema #}
+    {% set schema = seoFields.schema %}
+    {{ schema.collectionPage
+        .name(entry.title)
+        .url(entry.url)
+        .about(schemaCats ?? '')
+        .mainEntity({
+            "@type": "ItemList",
+            "numberOfItems": schemaItems|length,
+            "itemListElement": schemaItems ?? ''
+            })
+    |raw }}
+
 {% endblock %}