Adding JSON-LD Structured Data

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.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Webflow, Inc.",
  "url": "https://www.webflow.com",
  "logo": "https://example.com/webflow-logo.jpg",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-800-123-4567",
    "contactType": "Customer Service"
  },
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "San Francisco",
    "addressRegion": "CA",
    "postalCode": "94104",
    "streetAddress": "398 11th Street"
  },
  "sameAs": [
    "https://www.facebook.com/webflow",
    "https://www.twitter.com/webflow",
    "https://www.linkedin.com/company/webflow",
    "https://www.instagram.com/webflow"
  ]
}
</script>

‍

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;

<script>
  // Execute this after the page has loaded
  document.addEventListener("DOMContentLoaded", function() {
    
    // Build the schema as an object 
    var schema = {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "My Company",
      "url": "https://www.mycompany.com/",
      "potentialAction": {
        "@type": "SearchAction",
        "target": { 
          "@type": "EntryPoint",
          "urlTemplate": "https://www.mycompany.com/search?query={query}"      
        },      
        "query-input": "required name=query"
      }
    }

    // Generate the JSON-LD script element
    // append before /body
    var script = document.createElement('script');
    script.type = "application/ld+json";
    script.text = JSON.stringify(schema);
    document.querySelector('body').appendChild(script);
</script>

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

‍