Streaming live at 10am (PST)

Schema.org - Structured data in webflow

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?

7 Likes

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!

1 Like

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

1 Like

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:

Under the link above - the reference tab is very usefull (List of all types google support for rich results + docs + examples):

BlogPosting & CMS Example

step 0: learn the schema vocabulary

Read the schema.org docs 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 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 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 dont use this attribute (see her).

Last step - Structured Data Testing Tool - Google

Paste your url her:


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

18 Likes

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.

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

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.

1 Like

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

I have added a schema code in the website. But its showing review rating on few pages, not all the pages. Any specific details i need to check, why this so.

Webmaster is not showing any error.

Thanks for this, this is great!

Hi, @Siton_Systems :wave:
If needed to create something like this:

I need place:
<sсript type=“application/ld+json”>

</sсript>
on whole pages of website or enough just Home page?

And, for see updated info need wait Google reindex?

1 Like

Google knowledge panel

For adobe this is Google knowledge panel (automatically generated with information that comes from various sources). Google it.
https://support.google.com/knowledgepanel/answer/9163198?hl=en

Google Business

Also rich panel. You should open user + verify + add details her:
image

This schema.org helpful her:
https://developers.google.com/search/docs/data-types/local-business

https://developers.google.com/search/docs/guides/enhance-site

Keep in mind: This rich-card only appears for the result you are in first rank.

1 Like

Thank you @Siton_Systems. There are more info, and before I will start learning it just answer please:
if I create for example like this code and place it on <Head> for all pages:

<sсript type=“application/ld+json”>
{
@context”: “https://schema.org”,
@type”: “Organization”,
“url”: “https://www.my-website.com/”,
“logo”: “https://my-logo.png”,
“legalName”: “My Company Name”,
“foundingDate”: “2019”,
“address”: {
@type”: “PostalAddress”,
“addressLocality”: “San Francisco”,
“addressRegion”: “CA”,
“postalCode”: “94108”,
“streetAddress”: “street address”
},
“sameAs” : [ “https://www.facebook.com/my-company”,
https://twitter.com/my-company”,
https://www.linkedin.com/company/my-company”,
https://www.instagram.com/my-company”]
}
</sсript>

What will it give? Will the logo and information with the address of social networks appear on the rich-card?

1 Like

hey @bro-design, did you find out if this worked? :slight_smile:

Hi, @Benny. After 19 days, when I place this code on website:

I check now in google “rich card” and did not find changes, the information is old. I think for edit need to edit info in “Google Business” as said @Siton_Systems

1 Like

Hey @bro-design, understood, thank you for your reply! :slight_smile:

Thanks for the detailed explanation of the process. @Siton_Systems

I am trying to add reviews to some of the products but not to all. So I tried to create a CMS text field but this time also add some json code with " s in it.

When the website is published webflow automatically translates " into &quot version.

Is there any workaround for that or this technique can only be used for custom text fields not some parts of the json itself?

@erblis - do not use special characters (like “<” or “{” or ") inside the schema-review field like this and put this as custom code inside JSON script (Google it - not so simple to solve this idea).

https://www.w3schools.com/html/html_entities.asp

This for example " convert to ==> &quot;.

https://www.freeformatter.com/html-escape.html

One way is to use a simple number field (Min 0 - max 100) and use this field for the dynamic data.

The idea

image

microdata

Anyway, your schema is missing. It’s hard to solve this by JSON-LD before body.

For list of reviews - You should use microdata because “no way” to add a collection of reviews (more than one object) inside webflow custom code.

Anyway the idea of microdata on WB is more complex (Maybe write me in private).

1 Like

Thanks …
Your explanation very helpful.

1 Like

Thank you @Siton_Systems for the detailed explanation with screenshots.

I’ve managed to utilize custom attribute capabilities of webflow to use microdata.
I’ve get it to work with 0 errors and only 2 warnings /

My recent bottleneck is even I use conditional visibility for the rating section, microdata values still recalled by google structured data testing tool.

I’ve created CMS fields for aggregateRating ratingValue and ratingCount for each product. On the webflow designer, made conditional visibility on when the rating value is empty the div block is hidden. It works on the visual side, but still, google gives error on rating value is empty.

Is there a way to prevent microdata tagged items not to get rendered when they’re hidden?