Add Schema Markup to Webflow Website

Add Schema Markup to Webflow Website

Implement Schema.org structured data on your Webflow website to improve SEO and get rich snippets in search results.

Article Schema for Blog Posts

// Add to Page Settings > Custom Code > Head Code
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your Article Title",
  "description": "Brief description of your article",
  "image": "https://uploads-ssl.webflow.com/your-image.jpg",
  "author": {
    "@type": "Person",
    "name": "Author Name"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Your Site Name",
    "logo": {
      "@type": "ImageObject",
      "url": "https://uploads-ssl.webflow.com/logo.png"
    }
  },
  "datePublished": "2025-11-28",
  "dateModified": "2025-11-28"
}
</script>

Dynamic Blog Post Schema with CMS

<!-- Add to Collection Template Page Settings > Head Code -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}",
  "description": "{{wf {&quot;path&quot;:&quot;post-summary&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}",
  "image": "{{wf {&quot;path&quot;:&quot;main-image:url&quot;,&quot;type&quot;:&quot;ImageRef&quot;\} }}",
  "author": {
    "@type": "Person",
    "name": "{{wf {&quot;path&quot;:&quot;author:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Your Site Name",
    "logo": {
      "@type": "ImageObject",
      "url": "https://uploads-ssl.webflow.com/logo.png"
    }
  },
  "datePublished": "{{wf {&quot;path&quot;:&quot;created-on&quot;,&quot;type&quot;:&quot;Date&quot;\} }}",
  "dateModified": "{{wf {&quot;path&quot;:&quot;updated-on&quot;,&quot;type&quot;:&quot;Date&quot;\} }}"
}
</script>

LocalBusiness Schema

// Add to Site Settings > Custom Code > Head Code
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Your Business Name",
  "description": "Brief description of your business",
  "image": "https://uploads-ssl.webflow.com/business.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main Street",
    "addressLocality": "San Francisco",
    "addressRegion": "CA",
    "postalCode": "94102",
    "addressCountry": "US"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": "37.7749",
    "longitude": "-122.4194"
  },
  "telephone": "+1-415-555-0100",
  "email": "info@yourbusiness.com",
  "url": "https://yoursite.webflow.io",
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      "opens": "09:00",
      "closes": "18:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday",
      "opens": "10:00",
      "closes": "16:00"
    }
  ],
  "priceRange": "$$",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "156"
  }
}
</script>

E-commerce Product Schema

// Add to Product Template Page > Custom Code > Head
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Product Name",
  "description": "Detailed product description",
  "image": [
    "https://uploads-ssl.webflow.com/product-1.jpg",
    "https://uploads-ssl.webflow.com/product-2.jpg"
  ],
  "brand": {
    "@type": "Brand",
    "name": "Brand Name"
  },
  "sku": "PROD-123-456",
  "offers": {
    "@type": "Offer",
    "url": "https://yoursite.webflow.io/products/product-name",
    "priceCurrency": "USD",
    "price": "99.99",
    "availability": "https://schema.org/InStock",
    "priceValidUntil": "2026-12-31",
    "seller": {
      "@type": "Organization",
      "name": "Your Store Name"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.7",
    "reviewCount": "89"
  }
}
</script>

Dynamic E-commerce Product with CMS

<!-- Product Collection Template > Custom Code > Head -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}",
  "description": "{{wf {&quot;path&quot;:&quot;description&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}",
  "image": "{{wf {&quot;path&quot;:&quot;main-image:url&quot;,&quot;type&quot;:&quot;ImageRef&quot;\} }}",
  "brand": {
    "@type": "Brand",
    "name": "{{wf {&quot;path&quot;:&quot;brand&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"
  },
  "sku": "{{wf {&quot;path&quot;:&quot;sku&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}",
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "{{wf {&quot;path&quot;:&quot;price&quot;,&quot;type&quot;:&quot;Number&quot;\} }}",
    "availability": "https://schema.org/InStock"
  }
}
</script>

FAQ Schema

// Add to FAQ page > Custom Code > Head
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How do I get started with Webflow?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Getting started with Webflow is easy. Simply sign up for a free account, choose a template or start from scratch, and use the visual designer to build your website."
      }
    },
    {
      "@type": "Question",
      "name": "Does Webflow offer e-commerce features?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, Webflow offers comprehensive e-commerce features including product management, cart functionality, checkout, and payment processing."
      }
    },
    {
      "@type": "Question",
      "name": "Can I use custom code in Webflow?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, Webflow allows you to add custom HTML, CSS, and JavaScript code to enhance your website's functionality."
      }
    }
  ]
}
</script>

Organization Schema (Site-wide)

// Add to Site Settings > Custom Code > Head Code
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Your Company Name",
  "url": "https://yoursite.webflow.io",
  "logo": "https://uploads-ssl.webflow.com/logo.png",
  "description": "Your company description",
  "telephone": "+1-415-555-0100",
  "email": "contact@yourcompany.com",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Market Street",
    "addressLocality": "San Francisco",
    "addressRegion": "CA",
    "postalCode": "94102",
    "addressCountry": "US"
  },
  "sameAs": [
    "https://www.facebook.com/yourcompany",
    "https://www.twitter.com/yourcompany",
    "https://www.instagram.com/yourcompany",
    "https://www.linkedin.com/company/yourcompany"
  ]
}
</script>

How to Add Custom Code in Webflow

For Site-wide Schema:

1. Open Webflow Designer

• Navigate to your project
• Click the gear icon (Settings)

2. Access Custom Code

• Go to "Custom Code" tab
• Locate "Head Code" section

3. Add Schema

• Paste your schema code
• Click "Save Changes"

4. Publish Site

• Click "Publish" to make changes live

For Page-specific Schema:

1. Select Page

• Click "Pages" panel
• Select the page you want to add schema to

2. Page Settings

• Click the gear icon next to the page name
• Go to "Custom Code" section

3. Add to Head

• Paste schema in "Head Code"
• Click "Save"

4. Publish

• Publish the site

For CMS Collection Templates:

1. Open Collection Template

• Navigate to "CMS" panel
• Select your collection
• Open the template page

2. Template Settings

• Click page settings gear icon
• Go to "Custom Code" tab

3. Add Dynamic Fields

• Use CMS field references (see examples above)
• Click "Save"

4. Publish

• Publish to apply to all collection items

Using Webflow CMS Fields in Schema

CMS Field Reference Format:

{{wf {"path":"field-slug","type":"PlainText"} }}

Common Field Types:

• PlainText: For text fields
• Date: For date fields
• Number: For number fields
• ImageRef: For image URLs (use with :url)

Example: Dynamic Author Info

"author": {
  "@type": "Person",
  "name": "{{wf {"path":"author:name","type":"PlainText"\} }}",
  "url": "{{wf {"path":"author:slug","type":"PlainText"\} }}"
}

Advanced: JavaScript Schema Generator

// Add to Page Settings > Custom Code > Before </body> tag
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get page data
  const title = document.querySelector('h1')?.textContent;
  const description = document.querySelector('meta[name="description"]')?.content;
  const image = document.querySelector('meta[property="og:image"]')?.content;

  // Create schema
  const schema = {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": title,
    "description": description,
    "image": image,
    "url": window.location.href
  };

  // Inject schema
  const script = document.createElement('script');
  script.type = 'application/ld+json';
  script.text = JSON.stringify(schema);
  document.head.appendChild(script);
});
</script>

Testing Your Schema

1. Google Rich Results Test

• Visit: https://search.google.com/test/rich-results
• Enter your Webflow page URL
• Fix any errors

2. Schema Validator

• Visit: https://validator.schema.org/
• Validate your markup

3. Webflow Preview

• Use "View Source" to confirm schema appears
• Check in published site, not just preview

Best Practices

• Use CMS fields: Leverage Webflow CMS for dynamic schema
• Absolute URLs: Always use full URLs with https://
• Escape quotes: Use " in CMS field references
• Test thoroughly: Validate before publishing
• Site vs Page: Use site-wide for Organization, page-level for content
• Keep updated: Update schema when content changes
• Rich results: Monitor in Google Search Console

Common Issues & Solutions

Issue: Schema not appearing

• Solution: Ensure code is in Head, not Body
• Check that site is published, not just saved

Issue: CMS fields not working

• Solution: Use correct field slug
• Escape quotes properly: "

Issue: Images not loading

• Solution: Use Webflow CDN URLs
• Format: field-name:url for image fields

Features

• Visual Builder Compatible: Works with Webflow Designer
• CMS Integration: Dynamic schema for collections
• E-commerce Ready: Product schema for Webflow shops
• No Plugins Needed: Pure custom code implementation
• SEO Optimized: Improve search visibility
• Rich Snippets: Enable enhanced search results
• Flexible: Site-wide or page-specific schema