The power of Webflow CMS allows you to easily add structured data to your blog posts, thus helping Google better understand the content of the page.
What is Structured Data?
As Google clearly states in Google Search documentation, structured data is a "standardized format for providing information about a page and classifying the page content". For example, here is a structured data snippet that might appear on a blog post page, describing the headline of the blog post, linking to an image that is representative of the article content, showing the date the article was first published, and listing core information about the author.
Structured data is also used by Google to enable what they call "special search result features and enhancements", which may allow your page to be displayed in richer features in search results. When you add structured data to a blog post page, for example, your blog post could appear in search results like this (pic courtesy: Google Search Central)
How to Add Structured Data Within Webflow?
Set Up Your Blog Post CMS Collection
The first step to take to add structured data to your blog post page is to properly set up your blog post CMS collection. To take full advantage of all the features available within Webflow, your blog post CMS collection should have fields for:
- The article headline
- The name of the author
- A URL associated with the author
- The date and time the article was most recently modified
- The date and time the article was first published
- A URL to an image that is representative of the article
For best results, you should have three link fields for images with different aspect ratios: 16x9, 4x3, 1x1. You could also add three fields for hosting the actual images that you could then use to grab the URLs to fill the corresponding link fields.
After a proper setup, the structure of your blog post CMS collection should look like the following:
Set Up Your Blog Post Template Page
Now it's time to add a bit of custom code to our blog post CMS template page to actually add structured data to our page. You can add structured data either inside the <head> tag or before the </body> tag. We'll use the JSON-LD format, a lightweight Linked Data format.
Based on the structure of our blog post CMS collection, the code to add to our page should look like the following
Thanks to the structure we chose for our CMS collection, it's very easy to pull all required data directly from the CMS.
Test Your Structured Data
We're almost done. To make sure everything fell into place we now must test our structured data. Structured data testing is easily accomplished through Google Rich Result Test.
Learn More
Google has a comprehensive guide on structured data that lets you dive deeper and deeper into the topic. Simply explore Google Search documentation and make your way to structured data. And if you want to see exactly how I used structured data for this same article, just clone my project.
Have an awesome Webflow journey y'all,
Francesco