How to Add Schema Markup to Your Webflow Site

Published on Jan 15, 2024
5-minute read

Structured data markup, also known as schema markup, enhances your website’s user experience by providing visually appealing search snippets — also called as rich results. Schema markup can boost your website’s ranking and increase your website’s click-through-rate. This article shows how to implement schema markup to your Webflow site.

Note:

This article is for Webflow developers and individuals managing websites using Webflow. A solid understanding of the Webflow CMS is assumed.

Javascript Object Notation for Linked Data (JSON-LD)

Schema markups are often embedded into web pages using the JSON-LD format. JSON-LD structures and presents data in a form that is easy for humans and machines to understand.

Copying JSON-LD to Webflow

  1. Go to Google’s structured data markup documentation and click on the ‘Get Started’ button under the Article structured data markup.
Article strucuted data section with the Get Started button highlighted
  1. Scroll down to JSON-LD format inside the Article structured data markup page and copy the script.
The JSON-LD format for the Article structured data with the script highlighted
  1. Go to your Webflow project and paste the script in the ‘Before tag’ section of your CMS Collection Template page.
The script pasted into the ‘Before </body> tag’ section of the CMS Collection Template page. 'Before </body> tag' is highlighted.

Note: Depending on the type of content, the Article structured data markup can take different @type properties. Google recommends using the following @type properties for the Article structured data markup:

  • “@type”: “Article” — Used for almost all types of article content.
  • "@type": "NewsArticle" — Used exclusively for content reporting news.
  • “@type”: “BlogPosting” — Used exclusively for blog posts.

Adding the @id property

To dynamically add the Article structured data markup to all the blog pages in the collection list, it is important to add a unique identifier property, @id ,to the above script.

"@id": "https://www.example.com/COLLECTION-LIST-NAME/COLLECTION-ITEM-SLUG-FIELD",

  • Replace 'www.example.com' with your website’s URL.
  • Replace COLLECTION-LIST-NAME with the name of your collection list.
  • Connect your collection item’s slug field in place of COLLECTION-ITEM-SLUG-FIELD.
@id property highlighted inside the script. The 'Add Field' button is highlighted too.

Note: The above image is only for reference. Your COLLECTION-LIST-NAME and COLLECTION-ITEM-SLUG-FIELD might take different values depending on your project.

Connecting CMS fields to each property value

As with COLLECTION-ITEM-SLUG-FIELD, map remaining property values to their appropriate CMS item fields. The following reference image presents the end result after linking all property values to their corresponding CMS item fields.

All property values connected to their respective CMS fields

Note:

  • You can have as many properties as you want in your schema markup. View all the recommended properties for the Article structured data markup here.
  • It is important to only add data visible to the users. For example, if the page does not contain a ‘Article Updated Date’, do not add the dateUpdated property to the schema markup. You can learn more about the structured data guidelines here.

Other references