Schema.org - Structured data in webflow

FULL ANSWER

Introduction

I know Schema.org very well - First, to implement schema.org you should know… schema.org - google/YouTube it (This is not an issue of Webflow and not “small” topic for “one tutorial” + Its take some time to really understand the idea + Good also to understand JSON objects syntax for objects & nested objects).

The official Google docs about Structured data:

Under the link above - the Feature Guides label is very useful (List of all types Structured data markup that Google Search supports + docs + examples):

BlogPosting & CMS Example

step 0: learn the schema vocabulary

Read the schema.org docs about BlogPosting and google-data-type-article docs -and/or- google/youtube it.

Step 1/2: select Format (json-ld -or- microdata)

I: microdata

microdata added by HTML tag attributes. You could easily add webflow custom attributes - but in practice, its not so easy to manage & very easy to destroy the structure over time (To move elements in the tree and so on) + Endless copy-paste :slight_smile: but this is option one.

II: json-ld - Better option (Also reccomend by google)

JavaScript notation embedded in a <script> tag in the page head or body.

json-ld embedded in webflow by custom code:

The most important thing you should know about json-ld is this:

  • Don’t mark up content that is not visible to readers of the page. For example, if the JSON-LD markup describes a performer, the HTML body should describe that same performer. Google Quality guidelines

Why it’s important? because its really easy to paste valid json-ld to webflow and only change the content (By Dynamic -or- static data).

In other words:: if you added by json-ld datePublished attribute the datePublished should be visible also for the users (visible element on the page).

image

Real Example of https://schema.org/AggregateRating:

STEP 2/2: WEBFLOW : The easy part now :slight_smile:

2.1. copy-paste BlogPosting schema before head/body:

blog-post json-ld Example:


<script type="application/ld+json">
{ 
 "@context": "http://schema.org", 
 "@type": "BlogPosting",
 "headline": "14 Ways Json Can Improve Your SEO",
 "alternativeHeadline": "and the women who love them",
 "image": "http://example.com/image.jpg",
 "award": "Best article ever written",
 "editor": "John Doe", 
 "genre": "search engine optimization", 
 "keywords": "seo sales b2b", 
 "wordcount": "1120",
 "publisher": "Book Publisher Inc",
 "url": "http://www.example.com",
 "datePublished": "2015-09-20",
 "dateCreated": "2015-09-20",
 "dateModified": "2015-09-20",
 "description": "We love to do stuff to help people and stuff",
 "articleBody": "You can paste your entire post in here, and yes it can get really really long.",
   "author": {
    "@type": "Person",
    "name": "Steve"
  }
 }
</script>

** I only find problems with articleBody (It should be plain text) - one option, for now, is to create extra field and copy-paste inside this field only the body text (Without images, bold text, italic and so on) - not perfect but work fine. Anyway google don’t use this attribute (see her).

Last step - Structured Data Testing Tool - Google

Paste your url her:


important - common debug error:
Extra “,” for the last item inside some object.

Throw error:
Missing '}' or object member name.

Update 2019.

Full Screenshot of 0 warning - 0 errors for blog post (post with reference feilds for category and author)

Extra Semantic - wrap your article with HTML article element:
image

Extra Tip: Easier to work with relative domains

Use relative paths for urls (Like this no need to update the code if you change the domain + will work fine also for .io url).

Absolute URL:
"url": "https://www.example.com/blog/article_1"
Relative URL (remember the /):
"url": "/blog/article_1"

Great related webflow VIDEO TUTORIAL:

Adding Structured Data (Dec 2, 2021) - Start at: 10:21:

38 Likes