Streaming live at 10am (PST)

Schema.org - Structured data in webflow


#1

Hello Webflowers!

I’ve read every post on this forum related to structured data but I feel that we (me) are in need of clear, relevant tutorial.

Has anyone been able to add structured data to their webflow site that is picked up correctly when testing in the structured data tool by google?


#2

Yes, please - A tutorial would be much appreciated. Schema.org gives good examples of the proper syntax, but it isn’t wonderfully clear how to implement in Webflow.

The answer appears to be to use “attributes”, but some examples of best practices would be a big help. Thanks!


#3

Same! Would be awesome to get some help about this!


#4

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

The official Google docs about this topic:
https://developers.google.com/search/docs/guides/intro-structured-data

BlogPosting & CMS Example

step 0: learn the schema vocabulary

Read the docs BlogPosting -or- google 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 by design (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 text).

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:

https://developers.google.com/search/docs/data-types/article

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 dont use this attribute (see her).

Last step - Structured Data Testing Tool - Google

Paste your url her:

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


Semantic markup
#5

Holy Cow, Thank you for taking so much time and care to post such a thorough discussion! I will go through it in detail as soon as I can.


#6

Next time someone will ask about this topic - i copy-paste this q link :slight_smile:


#7

Great tutorial, I had done the same thing with dynamic variables there.

Although, I pasted mine into the body end, I thought this was standard. You have yours I. The head section though.
When I goto the testing tool with the live link, it picks it up anyway.


#8

True - it dosent matter. But in my opinion, Microdata is more semantic in the head (Like other metadata like title and description).