How to Set up Schema Structured Data Markup on Webflow for Blog Posts and FAQs
TL;DR:
- Structured data helps search engines understand the content on your website and can improve your Google rankings.
- To add structured data to your Webflow blog posts, create dedicated fields in your CMS collection and add code to your Blog Post Template page.
- Test your structured data using the Google Rich Result Test tool and consider using Letterdrop's SEO tools to further optimize your Webflow site.
Are you a Webflow developer struggling to set up structured data for your blog posts? If so, you're not alone. Many developers find themselves in the same predicament, unsure of how to effectively implement structured data in Webflow.
Google is really smart with AI and can understand most pages, but structured data markup helps you provide additional information in a machine-readable format for Google to understand what your page is about and turn them into rich dynamic results on the SERP. This might be what you need to get a boost in Google rankings.
 |
What is Structured Data?
Structured data is a standard format to give search engines like Google information about a page and classify content. It helps search engines better understand the context and meaning of the content on your website.
Here is an example of what structured data looks like for an article:
 |
So in the above example, if you're publishing blog posts to your site to drive traffic with SEO, you can use structured data to improve your ranking in rich results. You can specify the headline of a blog post, link to a cover image, specify the publication date, and add additional information about the author. By adding structured data to your blog posts, you can potentially have your content displayed in rich features in search results.
 |
How to Add Article Structured Data In Webflow Blog Posts?
To add structured data to your blog posts in Webflow, you need to:
- have dedicated fields setup for the structured data markup
- add some code with variables to the
<head>of your Blog Post Template page
Create Fields for Article Structured Data in Your CMS Collection
Go to the Blog Post CMS Collection → Open Settings → Scroll down to Collection Fields.
You probably already have fields for most of these for your blog post. In the Webflow Designer, go to your Blog Post CMS collection and add these fields:
- Title: Title of your blog post. This probably already exists.
- Author Name: Name of the author of the blog post
- Author URL: A URL to the author's bio if available. You can always use a LinkedIn link here too
- First Published Date: Date when the blog post was first published. You don't need to creat this since Webflow has it built-in.
- Last Modified Date: Date when the blog post was last modified. You don't need to creat this since Webflow has it built-in.
- 3 Cover Images: Either thumbnail image or the image that appears on top of articles. Create three Image fields. Google expects an image for three different aspect ratios:
- 16x9
- 4x3
- 1x1
 |
Set up Article Structured Data in <head> of Blog Post Template Page
Once your CMS collection is set up, you can add custom code to your Blog Posts template page using the JSON-LD format. This code will pull the required data directly from the CMS and add structured data to your page.
Go to the Blog Post Template Page → Open Settings → Scroll down to Custom Code.
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Article",
"headline": "{{Title}}",
"image": [
"{{16x9 Cover Image}}",
"{{4x3 Cover Image}}",
"{{1x1 Cover Image}}",
],
"author": [{
"@type": "Person",
"name": "{{Author Name}}",
"url": "{{Author URL}}"
}],
"datePublished": "{{First Published Date}}",
"dateModified": "{{Last Modified Date}}",
}
</script>Replace all the variables in {{ }} with the custom fields using the +Add Field button in the top right. Here's a demonstration:
Publish Your Site and Test the Structured Data
After implementing structured data on your blog post page, publish your Webflow site to see if it works. You can paste a blog post URL in the Google Rich Result Test tool, which allows you to preview how your structured data will appear in search results. If you don't see your desired result, double-check to make sure you didn't make any mistakes. You can also inspect your page with Chrome Developers Tools and look at the contents of the <head> tag on the page to see if the structured data is present and formatted correctly.
How to Add FAQ Structured Data In Webflow?
Sometimes, you might have an FAQ section in your blog posts or landing pages.
For large trusted sites, Google will display this FAQ information in a rich result.
 |
The process to add FAQs is similar to the process outlined above for Article structured data with blog posts.
Create Fields for FAQ Structured Data in Your CMS Collection
Go to the CMS Collection → Open Settings → Scroll down to Collection Fields.
You will need to decide the maximum number of questions and create the following collections fields for each question:
- Question: Question in the FAQ. Make this a Plain Text field
- Answer: Answer in the FAQ. Make this a Rich Text field
If you wanted to handle up to 3 FAQ questions, you could call these fields Question 1, Answer 1, Question 2, Answer 2, Question 3, and Answer 3, for example.
Set up FAQ Structured Data in <head> of the Template Page
Once your CMS collection is set up, you can add custom code to your template page using the JSON-LD format.
Go to the relevant Template Page → Open Settings → Scroll down to Custom Code. Once again, replace all the variables in {{ }} with the custom fields using the +Add Field button in the top right.
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": {{Question 1}},
"acceptedAnswer": {
"@type": "Answer",
"text": {{Answer 1}}
}
}, {
"@type": "Question",
"name": {{Question 2}},
"acceptedAnswer": {
"@type": "Answer",
"text": {{Answer 2}}
}
}, ...
]
}
</script>And finally, test it, as we did with the article structured data.
Adding structured data to your blog posts can improve your ranking and get your content in Google's rich text results. If you're trying to drive more traffic to your Webflow site and improve your SEO, check out Letterdrop's suite of SEO tools, including it's SEO optimizer, automatic internal link builder, and SEO monitoring.
Subscribe to newsletter
No-BS growth strategies and content marketing tactics in your inbox twice a month.
Related Reading
Some other posts you might find helpful
