How to add blogPosting 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.
Learn About Article Schema Markup | Google Search Central

Step 1 - copy-paste

Copy ==> Paste – custom code - Before body/head under blogPost collection page.

In this example i use author and category reference fields.

<script type="application/ld+json">
 "@context": "", 
 "@type": "BlogPosting",
 "headline": "{{Name}}",
 "image": "{{post-primary-image-feild}}", 
 "genre": "{{category-reference-feild}}", 
  "mainEntityOfPage": {
     "@type": "WebPage",
      "@id": "{{slug-feild}}"
 "publisher": {
  "@type": "Organization",
   "name": "My Company Name",
   "email": "",
   "address": "My company Address, London, England, EC2M 7EA",
   "logo": {
      "@type": "ImageObject",
      "url": ""
 "url": "/{{slug_feild}}",
 "datePublished": "{{datePublished_feild}}",
 "dateCreated": "{{dateCreated_feild}}",
 "dateModified": "{{dateModified_feild}}",
 "description": "{{description_feild} }}",
   "author": {
    "@type": "Person",
    "name": "{{reference-feild-person-name}}"

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

"address": "My Address her",

logo url

"logo": {
      "@type": "ImageObject",
      "url": ""

Get logo url like this:

Step 4 - Publish and test

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


Extra 2 - Twitter Cards (Copy-Paste before body + Bind feilds)

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


1 Like

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

Hi there - would this work for ArtcleNews schema too? Would you change the code at all if this was the case?

Yes (Both are Article types).

Google: Article objects must be based on one of the following types: Article , NewsArticle , BlogPosting . (Docs:

The code above will give you Recommended /valid code related to google guidelines.

Only change this line (Change the type) from:

"@type": "BlogPosting",


"@type": "NewsArticle",

Extra reading (Follow the non-AMP docs):

Hi @Siton_Systems, this post is very helpful. Just one question.

Why in the @id of mainEntityOfPage you use the slug with your base url preceding

but in the url property you are just using the slug field by its own?

Thanks very much

1 Like

Nice catch. No difference.

It could be :slight_smile:

"@id": "/post/{{slug-feild}}"

Anyway, it should be (The original code missing /`): (I edit the answer).
"url": "/{{slug_feild}}"


1 Like

Is it possible to bind CUSTOM fields with webflow CMS data, in the Custom Code section? The reason I ask is because when I click the “+ Add Field” drop down menu, i only see the standard fields as options. I do not see my custom fields

Hi, thanks for this article. Having a problem still though, followed all the steps and when I run a rich results test it returns an error: specifically this, Bad escape sequence in string from an error here:

“headline”: “{{wf {“path”:“name”,“type”:“PlainText”} }}”

I’m a bit confused though because I used the webflow bindings and didn’t even write out this code manually can’t understand what my error is.

Any help would be greatly appreciated