Best way to add Schema?

I am just wondering if anyone had a link to a tutorial or recommendations on the best way to add Schema to clients’ websites.

It would be hugely helpful if there was a way to do this within Webflow rather than having to export all of the files and add them directly into the code - as updates to the website would mean it would need to be added for all new exports over and over again.

Thanks :smile:

There are two methods to do this. You can apply page wide schema in the head section of the page using the custom code section or you can add schema to specific elements using the custom attribute option in the settings panel.

If you are using the CMS and want to add schema to a template you would want to use the costume attribute option since there is no way to connect dynamic data to the head of the costume code section.

Hope this helps :smile:

If you need more detail I will put together some screen shots.

1 Like

Hi Alex!

Thanks for the response!

It would be hugely helpful if I could see some screenshots for using the custom attribute option!

A lot of the Schema I use is focused on marking up specific content (e.g. the name of a business, phone number, address, etc).

Thanks again!

Sure,

In this example I select the div or the span that contains the publish date on an article. I navigate to the settings panel and select to make a new attribute for the html element. I input the the as follows.

You can follow the same process for “itemType” “itemScope”

Does that make sense?

2 Likes

Sorry - finally got a chance to revisit this.

I added a span around the specific text that I want to mark up with Schema. I added the itemprop=“streetAdress” part, but how do I add the part below?

div itemprop=“address” itemscope itemtype=“PostalAddress - Schema.org Type

Any help would be hugely appreciated!

Hi @quantive, from what it sounds like, you should be able to add the other attributes the same way you did with “itemprop”. Custom attributes | Webflow University

It’s hard to say without more info on the documentation.

Thanks for the reply!

I’m running into issues with this as the content I am looking to mark-up is located in a paragraph which includes other content that is not related to the address (e.g. where to find parking).

Further, this paragraph is set within a two column row, rather than a div.

I am essentially looking to make sure that only the right content is marked up correctly with this Schema.

Does that help?

Hi there,

I just wanted to follow up on this.

I tried adding the code and it doesn’t look like it displays correctly when adding the itemscope itemtype details (used Google’s Structured Data Testing Tool to try and verify).

The reason for this is because Webflow automatically changes itemscope itemtype to itemscope-itemtype (see the screenshots).

The dash in between looked like it is the issue. How can I stop Webflow from automatically adding a dash to replace spaces when I add schema?

Hey,

Sorry for leaving you hanging on this.

What you will want to do is add a separate itemscope attributed to the div.

Like so,

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.