Advanced SEO Techniques

Adding JSON-LD Structured Data

Overview
Structured Data
Structured Data Overview
10:18
501
Adding JSON-LD Structured Data
16:29
502
Site Name JSON-LD
503
Articles, News & Blog Post JSON-LD
504
Site Search JSON-LD
506
Client Reviews JSON-LD
506
Breadcrumbs JSON-LD
508
FAQ Page JSON-LD
509
Q&A Page JSON-LD
510
Twitter Cards
601
Embedding Rich Text in JSON
702
Validating & Debugging JSON-LD
703
Technical SEO
Controlling the Robots
801
Sitemap.xml
802
robots.txt
803
Removing Pages from Google
804
Removing Your WEBFLOW.IO Staged Site from Google
805
More Advanced SEO Techniques
810
Voice Search
810
Partially-Dynamic Headings
3:35
811
Full Site SEO Text Search
3:35
812
Influencing Google Search Appearance
Influencing Google's Search Appearance
901
No items found.
Published
Updated
December 21, 2022
in lightbox

Adding Structured Data to Static Pages

You can simply add the data into your page-level custom code area, either the /head or /body areas, or within a Custom HTML Embed. Any of these is suitable.

You'll enter the raw JSON-LD so make certain to format and validate it properly.


Adding Structured Data to CMS Template Pages

In CMS Template pages, you likely want your JSON-LD to contain data from the CMS item itself.

There are three options here;

Static JSON structure, with embedded fields

Use the JSON structure you want with Webflow's CMS field embed feature in any custom code area.

  • + Easy to do
  • - Does not support all CMS Item field types, including Richtext embeds
  • - Does not perform any JSON encoding, so simple characters like a double-quote can invalidate your JSON
  • - No support for if-then constructions, where certain sections will appear only when certain data exists

Script-generated JSON-LD

Write custom code to generate your JSON-LD content.

  • + Can be very dynamic
  • - Requires custom coding
  • - Seems unreliable, Google does not always pick up the results

This approach seems to work best when the script is inline with the page, and not referenced via an external library.

Here's an example, with static content;

In this, you can embed CMS fields as the values.

For example, the "My Company" string could be replaced with a Webflow CMS embed field.

Be aware that Webflow's CMS embed fields are HTML-encoded which may create unexpected situations ( e.g. & becomes & ) and may even break your JSON validity. Double quotes and line breaks are examples of characters that will break the JS, so it's important to consider your content here. Javascript's template string literals can help with this, changing the double-quotes to back-ticks.

Richtext-embedded JSON-LD

Create a rich text field in your CMS collection called JSON-LD. Within it, create the exact JSON-LD you want for each item, and embed them inside of HTML Embed sub-elements within your rich text content.

Place a rich text element on your page and bind it to the field. You can mark the element as hidden if you want.

  • + Very easy to do
  • + 100% flexibility in the JSON you render
  • + Can store any number of JSON-LD chunks in the same field, of any kind
  • - Extremely manual process. No protection against typos. A bit inconvenient to access and update.

Notes

Forum discussion

https://discourse.webflow.com/t/schema-org-structured-data-in-webflow/56925/32

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.