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?
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!
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):
Read the schema.org docs about BlogPosting and google-data-type-article docs -and/or- google/youtube it.
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 
but this is option one.
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).
Real Example of https://schema.org/AggregateRating:
2.1. copy-paste BlogPosting schema before head/body:
<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>
2.2. Add dynamic elements to your blog post (heading, date, image and so on).
Related: Structure and style Collection pages - Webflow University Documentation
2.3. Create custom fields for your json-ld
Related: CMS Collections - Webflow University Documentation
2.4. Custom code → Add feilds. Finish
** 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).
Paste your url her:
important - common debug error:
Extra “,” for the last item inside some object.
Throw error:
Missing '}' or object member name.
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:
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"
Adding Structured Data (Dec 2, 2021) - Start at: 10:21:
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
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.
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 
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?
For adobe this is Google knowledge panel (automatically generated with information that comes from various sources). Google it.
Also rich panel. You should open user + verify + add details her:
This schema.org helpful her:
Keep in mind: This rich-card only appears for the result you are in first rank.
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” : [ “Redirecting...”,
“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?
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
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 " 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).
This for example " convert to ==> ".
One way is to use a simple number field (Min 0 - max 100) and use this field for the dynamic data.
The idea
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).
Thanks …
Your explanation very helpful.
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?
