Streaming live at 10am (PST)

How to add blogPosting Schema.org to CMS blog pages - Zero Errors (Copy & Paste)

Adding structured data to your news, blog, and sports article page can enhance your appearance in Google Search results.
image
https://developers.google.com/search/docs/data-types/article

Step 1 - copy-paste

Copy ==> Paste – custom code - Before body/head under blogPost collection page.
https://schema.org/BlogPosting

In this example i use author and category reference fields.

<script type="application/ld+json">
{ 
 "@context": "http://schema.org", 
 "@type": "BlogPosting",
 "headline": "{{Name}}",
 "image": "{{post-primary-image-feild}}", 
 "genre": "{{category-reference-feild}}", 
  "mainEntityOfPage": {
     "@type": "WebPage",
      "@id": "https://www.mybaseUrl.uk/post/{{slug-feild}}"
 },
 "publisher": {
  "@type": "Organization",
   "name": "My Company Name",
   "email": "info@gmail.co.uk",
   "address": "My company Address, London, England, EC2M 7EA",
   "logo": {
      "@type": "ImageObject",
      "url": "https://uploads-ssl.webflow.com/some-absolute-url-path.png"
    }
 },
 "url": "{{slug_feild}}",
 "datePublished": "{{datePublished_feild}}",
 "dateCreated": "{{dateCreated_feild}}",
 "dateModified": "{{dateModified_feild}}",
 "description": "{{description_feild} }}",
   "author": {
    "@type": "Person",
    "name": "{{reference-feild-person-name}}"
  }
 }
</script>

Step 2 - Bind the data

In the code above where you see{{feidl}} - You should bind with webflow CMS data.

Example for "headline": "{{Name}}":

Step 3 - Change the not dynamic data (address, email, company name…)

Example:
"address": "My Address her",

logo url

"logo": {
      "@type": "ImageObject",
      "url": "https://uploads-ssl.webflow.com/some-absolute-url-path.png"
    }

Get logo url like this:

Step 4 - Publish and test

https://search.google.com/structured-data/testing-tool


Extra-1 - HTML5
Change the main article div to “article”.

image

Extra 2 - Twitter Cards (Copy-Paste before body + Bind feilds)
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image.html

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{{title-feild}}" />
<meta name="twitter:description" content="{{description-feild}}" />
<meta name="twitter:image" content="{{image-feild}}" />
<meta name="twitter:site" content="@my-twitter-user-name" />

Related:

I’m definitely bookmarking this @Siton_Systems. This has been on my list for a while :slight_smile: