How to add Video Schema in Framer

Want your videos to stand out in Google search with eye-catching thumbnails, runtime information, and interactive timestamps? This comprehensive guide walks you through implementing Video Schema on your Framer website. You'll discover two distinct approaches: one optimized for standard pages and another designed for CMS Collection Pages.

Properly configured Video Schema can help improve your click-through rates by transforming plain search listings into visually rich results. When implemented correctly, this structured data enhances how your video content appears across Google's search ecosystem.

Why Video Schema matters for Framer sites

Grasping the strategic importance of Video Schema empowers you to deploy this capability effectively across various content formats:

Enhanced search visibility: Videos appear in search results with preview images, runtime details, and clickable chapter markers, creating a more engaging presentation that outperforms basic text-only listings from competitors lacking structured markup.

Improved semantic understanding: Structured markup enables Google to grasp your content's context with exceptional accuracy, resulting in more precise keyword associations and enhanced discoverability among your intended audience.

Superior user engagement: Rich search listings featuring preview thumbnails and detailed metadata empower users to make educated clicking decisions, generating higher-quality traffic from visitors who understand exactly what content awaits them.

Implementation benefits: Research indicates that only a small percentage of websites implement structured data properly, despite its frequent appearance in top search positions. Implementing Schema early can provide visibility advantages in search results.

Understanding VideoObject Schema structure in Framer

VideoObject represents the primary Schema type from Schema.org's taxonomy that delivers comprehensive video metadata to search engines. Google strongly recommends the JSON-LD format, which keeps structured data separate from HTML markup and streamlines deployment, particularly for database-driven content.

This markup lives within script elements in your page's head or body area, transmitting vital details through standardized property names.

Required properties that form the foundation

Important note: Only three properties are mandatory for your Video Schema to be valid:

1. name - Video title
2. thumbnailUrl - Preview image URL
3. uploadDate - Publication timestamp in ISO 8601 format

Missing any of these three elements disqualifies your video from rich search results. All remaining properties enhance results but remain optional.

name: Holds your video's title and must align precisely with the displayed heading. Position your primary keyword toward the start while maintaining total character count under 60-70 for optimal search result display.

thumbnailUrl: References your preview image, which requires minimum dimensions of 112×112 pixels (though 1280x720 pixels in 16:9 ratio is highly recommended for premium appearance) and must be accessible to Googlebot. A minimum of 80% of image pixels must contain minimal or zero transparency.

Important note: thumbnailUrl accepts either a single URL string or an array of URLs. Both structures are valid:

// Single URL format
"thumbnailUrl": "https://example.com/preview.jpg"

// Array format - multiple preview images (preferred)
"thumbnailUrl": [
  "https://example.com/preview-square.jpg",
  "https://example.com/preview-standard.jpg",
  "https://example.com/preview-widescreen.jpg"
]

Supplying multiple preview images in various aspect ratios (1:1, 4:3, 16:9) enables Google to select the optimal thumbnail based on display context.

uploadDate: Employ ISO 8601 format (2024-08-22T14:30:00+00:00) to indicate when the video first went live.

Recommended properties that can improve your results

description: Though not mandatory, this field is strongly recommended. Include distinctive, keyword-rich text of 200+ words that explains your video's subject matter. Naturally incorporate your target keyword 2-3 times throughout this description.

duration: Utilize ISO 8601 format (PT3M27S for 3 minutes 27 seconds) to show video length in search displays, helping potential viewers assess whether they have sufficient time to watch.

contentUrl: Links directly to your actual video file (.mp4, .webm, etc.) enabling Google to access the raw video content.

embedUrl: References your video player URL where visitors can view the video on your website.

interactionStatistic: View counts demonstrate content popularity to search algorithms and may influence ranking factors.

Premium features enable advanced search presentations: the hasPart property combined with nested Clip objects generates clickable chapter navigation, the publication property paired with BroadcastEvent activates LIVE indicators for streaming media, and the potentialAction property with SeekToAction permits Google to automatically identify and surface key video moments.

Automatic Video Schema generator for Framer

To eliminate manual JSON-LD editing complexity, we've built a specialized tool that produces Video Schema automatically. Simply populate fields with your video details, and the generator outputs optimized JSON-LD code ready for immediate integration into Framer.

The tool delivers multiple capabilities to accelerate deployment:

• Toggle between standard implementation or dynamic CMS templates
• Choose from various schema configurations including Standard Video, Live Broadcast, Educational Video, or Video Series
• Insert multiple preview image URLs for different dimensions with single-click functionality
• Automatic runtime conversion to ISO 8601 format (PT#M#S) from hours, minutes, and seconds
• Platform recognition that automatically identifies YouTube or Vimeo URLs
• Collapsible advanced settings for sophisticated features like chapters, streaming metadata, and content limitations
• Single-click copy function for quick transfer into Framer

1. Implementation for static pages in Framer

After generating your static code using the complimentary tool, deployment requires less than 5 minutes.

Where to implement static Video Schema in Framer

Integrating Video Schema JSON-LD into your Framer website occurs in Page Settings for individual pages, not in universal site configuration:

1. Open your Framer project and navigate to the page where you want to add the schema
2. Click the Settings icon (gear icon) in the top toolbar to open Page Settings
3. Scroll down to the Custom Code section (it is the last section after Page Settings and Page Images)
4. Click "Show Advanced" to reveal all custom code options
5. Paste your generated JSON-LD markup in the Start of <head> tag field
6. Click Save to preserve your changes
7. Publish your site to make the schema active

Important: Schema markup must be added to individual Page Settings, never to global Site Settings. Adding schema to Site Settings will cause it to appear on all pages, creating validation errors.

Following publication, your page will contain structured data that Google can interpret and potentially display in search results.

Complete JSON-LD code example for Video Schema in Framer

Here's a comprehensive example of fundamental implementation:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Premium wireless headphones unboxing review",
  "description": "Comprehensive hands-on review exploring design quality, sound performance, battery longevity, and real-world usage scenarios for TechPro's latest wireless headphones",
  "thumbnailUrl": "https://yourdomain.com/headphones-preview.jpg",
  "uploadDate": "2024-08-22T14:30:00+00:00",
  "duration": "PT12M18S",
  "contentUrl": "https://yourdomain.com/headphones-review.mp4",
  "embedUrl": "https://yourdomain.com/player/headphones-456"
}
</script>

Best practices for static Video Schema in Framer

When deploying static Schema, maintain these core principles:

Perfect alignment: Schema must correspond precisely with your displayed content, character for character. Titles in markup that diverge from visible titles create confusion for search engines and may block rich result eligibility.

Full URL paths: Consistently use complete URLs including https://, avoiding relative paths. Broken URLs returning 404 errors, URLs requiring authentication, or resources restricted by robots.txt silently block Google from accessing content.

Proper runtime format: Employing "2:45:00" or "165 minutes" rather than ISO 8601 format "PT2H45M" or "PT165M" triggers validation failures. The proper pattern uses PT followed by hours with H, minutes with M, and seconds with S (PT4M18S for 4 minutes 18 seconds).

Current page inclusion: The final element should reference the current page containing the code, ensuring accurate attribution in search displays.

2. Dynamic implementation for CMS pages in Framer

Critical limitation for CMS dates: Framer's native date fields cannot be formatted within Custom Code for Schema markup. You'll need plain text fields and manual ISO 8601 format date entry (YYYY-MM-DD) for each collection item. This represents a Framer platform constraint, not a Schema limitation.

For Framer CMS work, the dynamic approach provides enhanced flexibility and scalability. You can blend static and dynamic components based on your requirements.

Preparing CMS for dynamic Video Schema in Framer

The dynamic approach enables you to merge fixed data elements (information that remains constant) with variable content from your CMS. This proves particularly valuable for blog articles, product showcases, or any Collection items.

Typical deployment patterns for video content:

• Tutorial videos: Series name (static) > Individual lesson title (dynamic from CMS)
• Product demonstrations: Product category (static) > Specific demo title (dynamic)
• Training videos: Training program name (static) > Module title and video metadata (dynamic)
• Event recordings: Event series (static) > Individual session title and details (dynamic)

For dynamic sections, you'll need these CMS fields:

1. Access your Collection (e.g., "Blog Articles" or "Video Library")
2. Create only the fields required for variable content:

Standard fields for videos:

• video-name (Plain Text) - Video title
• video-summary (Plain Text) - Video description
• preview-image-url (Image or Link) - Preview image URL
• publish-date-iso (Plain Text) - Publication date in ISO 8601 format (e.g., 2024-08-22)
• runtime-iso (Plain Text) - Runtime in PT#M#S format
• source-video-url (Link) - Video file URL
• player-url (Link) - Embedded player URL

Critical reminder: Only establish CMS fields for elements that actually vary. Static components like @type: "VideoObject" can remain hardcoded in the JSON-LD, minimizing complexity and preventing empty field issues.

Implementing dynamic code in Framer CMS Collection Pages

Configuring Video Schema in your CMS Collection Page enables automatic Schema creation for all collection items.

In your CMS Collection Page, execute these steps:

1. Open your Framer project and go to the Pages panel
2. Locate your CMS Collection Page (e.g., Blog Articles, Video Library, etc.)
3. Click the three dots next to the Collection Page name
4. Select "Settings" from the dropdown menu
5. Scroll down to the Custom Code section (it is the last section)
6. Click "Show Advanced" to reveal all custom code options
7. Paste your JSON-LD code in the Start of <head> tag field

For a standard blog configuration where article title and summary are variable:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": {{video-name | json}},
  "description": {{video-summary | json}},
  "thumbnailUrl": {{preview-image-url | json}},
  "uploadDate": {{publish-date-iso | json}},
  "duration": {{runtime-iso | json}},
  "contentUrl": {{source-video-url | json}},
  "embedUrl": {{player-url | json}}
}
</script>

Important about Framer CMS syntax:

• Use {{field-name | json}} syntax for CMS variables in JSON-LD
• The | json filter ensures proper JSON formatting and escapes special characters
• Never use quotes around CMS variables with the json filter - Framer handles this automatically

Note: The publish-date-iso field should be a plain text field in your CMS where you manually enter dates in ISO 8601 format (e.g., 2024-08-22). Framer's native date fields cannot be properly formatted in Custom Code without JavaScript. The runtime-iso field should also be plain text where you manually enter runtime in ISO 8601 format (e.g., PT4M18S).

4. Link the variable fields:

• Position your cursor where the field reference appears
• Framer will automatically recognize CMS field syntax when you type {{field-name}}
• Add the | json filter after each field name for proper JSON formatting: {{field-name | json}}
• Do not add quotes around variables with the json filter
• Repeat for each variable field

5. Click Save to preserve your modifications

Technical note: Framer uses {{field-name | json}} syntax for CMS variables in JSON-LD. The json filter automatically handles proper escaping and formatting, ensuring your Schema remains valid even with special characters in your content.

Important date format considerations in Framer

Framer's native date fields cannot be properly formatted for Schema markup in Custom Code. The most straightforward solution: establish a plain text field in your CMS named publish-date-iso and manually input dates in ISO 8601 format (YYYY-MM-DD) for each collection item. For example: 2024-08-22. Google accepts this date-only format without requiring time or timezone specification.

The identical approach applies to video runtime—create a plain text field called runtime-iso and enter values like PT4M18S (4 minutes 18 seconds) or PT2H15M (2 hours 15 minutes).

Duration field in CMS mode

The ISO 8601 runtime format follows this structure:

• PT = Period of Time (mandatory prefix)
• #H = hours (e.g., 3H for 3 hours)
• #M = minutes (e.g., 45M for 45 minutes)
• #S = seconds (e.g., 30S for 30 seconds)

Examples:

• 7 minutes 15 seconds = PT7M15S
• 2 hours 30 minutes = PT2H30M
• 90 seconds = PT1M30S

Important limitations of the dynamic CMS method in Framer

The principal consideration with dynamic Schema involves ensuring all referenced fields contain values:

• Empty fields trigger validation errors
• Strategically combine static and dynamic content to prevent this problem
• Employ static values for consistent structural elements
• Reserve dynamic fields exclusively for content that genuinely varies

Pro tip: Maintain straightforward Schema structure. Most websites function perfectly with core fields where only video-specific content varies, reducing complexity and potential issues.

Specific CMS field requirements:

• Publication Date: Must be stored as plain text in ISO 8601 format (YYYY-MM-DD or complete datetime). Create a field named publish-date-iso and manually input dates for each item. Framer's native date fields cannot be correctly formatted in Page Settings Custom Code.
• Runtime: Must be stored as plain text in ISO 8601 format (PT#H#M#S) in your CMS. Example: PT4M18S for 4 minutes 18 seconds.
• Preview images: Should be image fields or link fields pointing to accessible image URLs.
• Numeric fields: View count, like count, and comment count should be number fields in your CMS.

Important: Both publication date and runtime require manual entry in the proper format for each collection item. This ensures complete reliability without JavaScript complications.

For sophisticated features like chapters, key moments, or live broadcast events, consider the static implementation approach, as these demand more intricate data structures that prove challenging to manage through CMS fields alone.

Validating your Video Schema with Google in Framer

After deploying your Video Schema using the generator, validation is essential to ensure Google processes it accurately.

Essential validation tools for Framer

Google recommends utilizing its official tool to validate rich results qualification:

Google Rich Results Test

1. Navigate to https://search.google.com/test/rich-results
2. Enter your published site URL (Schema doesn't function in Framer preview mode)
3. Wait for analysis completion
4. Review findings:

• Green checkmarks signify successful deployment
• Red errors demand immediate correction
• Yellow warnings suggest optional enhancements

This tool reveals precisely how Google interprets your Video Schema and whether it satisfies all requirements to potentially appear in search results.

Important about expectations and timeframes:

• Google can require anywhere from several days to several weeks to process and index your Video Schema
• Proper Schema deployment does NOT guarantee appearance in rich results
• Google ultimately determines when and how to display rich snippets based on multiple factors
• Maintain patience and regularly monitor Google Search Console
• Even with perfectly valid Schema, rich results may take time to surface or not appear at all

Post-implementation monitoring in Framer

Wait 24-48 hours after publishing for Google to crawl and process your Schema markup. Use the URL Inspection tool in Google Search Console to verify indexing status of specific pages.

Google Search Console's Video Indexing Report provides comprehensive monitoring available only after Google detects videos on your site. The report appears at Index → Video indexing and shows total indexed pages with videos, successfully indexed videos, and pages with detected but not indexed videos.

Common Video Indexing Report errors include:

• "Video outside viewport": Not visible on page load
• "Video too small": Under 140 pixels or less than one-third of page width
• "Video too tall": Over 1080 pixels in height
• "Page not indexed": Host page isn't in Google's index
• "Thumbnail not retrievable": Cannot retrieve preview image

Configure email notifications in Search Console to receive alerts when new video indexing issues emerge.

Troubleshooting common Video Schema issues in Framer

Schema doesn't appear in Google Rich Results Test: Confirm you've published your site. Custom code doesn't execute in Framer preview mode.

"Invalid JSON-LD" error: Check for unescaped quotes in your CMS content. Use Plain Text instead of Rich Text to avoid formatting complications.

Empty fields in dynamic code: Verify all CMS fields referenced in your code contain values. Consider combining static and dynamic content to avoid empty field problems.

URLs without protocol: All URLs must include https:// at the beginning. The generator validates this automatically.

Required properties are missing: The most frequent error is omitting mandatory fields—name, thumbnailUrl, or uploadDate. Without all three properties, videos cannot appear as rich snippets.

Duration format is incorrect: Remember that T separates "Period" from "Time" components and is always required. PT4M18S for 4 minutes 18 seconds.

Videos positioned outside viewport: Google requires videos to be visible in the renderable area on initial page load without scrolling. Position videos at the page top or after brief introductions.

Frequently asked questions about Video Schema in Framer

How to add Video Schema to Framer without knowing code?

Utilize our automatic Video Schema generator included above. Specify whether it's for a standard page or CMS, identify video type (YouTube, Vimeo, or self-hosted), populate fields with your URLs and data, and copy the generated code. Insert it in Framer by clicking the Settings icon in the top toolbar, scrolling to Custom Code section, clicking "Show Advanced", and pasting in the **Start of tag** field. The generator manages all proper syntax automatically—no manual code editing required.

Why doesn't my Video Schema appear in Google results in Framer?

Google can require several weeks to process and index your Schema. After deployment, confirm you've published your site (doesn't function in Framer preview), Schema matches your visible content, and you're using Page Settings (not global Site Settings). Processing can take several days or weeks. Monitor for errors in Google Search Console > Enhancements. Remember Google ultimately decides when to show rich results even with valid Schema.

How to implement dynamic Video Schema with Framer CMS for blog posts?

For a standard blog with videos, maintain elements like context static in your JSON-LD, then only make video name, summary, and specific URLs dynamic. In your Blog Articles Collection, ensure you have fields like video-name, video-summary, preview-image-url, etc. In CMS Collection Page Settings > Custom Code, add JSON-LD with static values for fixed properties, then use Framer's field binding to insert dynamic fields. This combined approach avoids empty field errors.

Where to put Video Schema code in Framer: Page Settings or Site Settings?

ALWAYS use Page Settings > Custom Code > **Start of tag** for standard pages, NEVER global **Site Settings**. If you place it in Framer Site Settings, identical Schema appears on all pages causing massive errors. Each page needs its own unique code. For CMS Collections, use **CMS Collection Page Settings** which applies only to those specific pages.

How many properties should I include in my Framer Video Schema?

At minimum, the 3 required properties: name, thumbnailUrl, and uploadDate. For optimal results, add recommended properties: description, duration, contentUrl, and embedUrl. These additional properties substantially improve rich results quality and maximize visibility. If you want navigable key moments, consider adding hasPart with Clip objects or potentialAction with SeekToAction.

Is Video Schema still important for SEO in Framer in 2025?

Yes, it remains valuable. Video Schema helps Google understand your Framer site structure, improves internal linking signals, and optimizes for voice search. Pages with Schema markup can receive significantly more clicks than those without it, according to industry reports. As AI-powered search features like Google AI Overview become dominant, structured data serves as the language these systems understand, making early implementation critical for future visibility.

How to validate and fix Video Schema errors in Framer?

Publish your site first (Schema doesn't work in Framer preview). Validate with Google Rich Results Test by entering your published URL. Common errors: URLs without https://, unescaped quotes, empty CMS fields, incorrect runtime format. To fix errors use our automatic generator that handles validation. Review Search Console regularly to catch issues in your Framer implementation.

Can I use Video Schema without having a visible video on my Framer page?

No. Google strongly recommends that Video Schema matches visible content on your page. Implementing Schema without a visible video can be seen as misleading and Google likely won't show rich results. Always add a visible, accessible video to your Framer pages before implementing Schema markup for best results and compliance with Google's guidelines.

Does Video Schema work with multi-language Framer sites?

Yes, Video Schema works with Framer Localization. Create separate Schema for each language version using correct URLs and translated video names. Implement appropriate code in each localized page's settings. Ensure URLs include language subdirectory (e.g., /es/, /fr/) and names match the page language for proper international SEO.

Should I update my Video Schema when I change video content in Framer?

Yes, absolutely. When you change the video, update the description, or modify the preview image, your Schema must reflect these changes immediately. For static implementation, you'll need to manually update the JSON-LD code. For dynamic implementation with CMS, update your Collection fields and Schema updates automatically. Consistency between your visible content and Schema is critical for maintaining Google's trust and rich results eligibility.

Conclusion

Deploying Video Schema in Framer requires custom code but produces substantial SEO advantages that justify the technical investment. The combination of VideoObject markup with quality video content and strategic optimization creates powerful competitive advantages in search results.

Rich snippets featuring preview images, runtime details, and chapter navigation attract significantly more clicks than plain text links, while proper structured data ensures Google can discover, understand, and prominently display your video content. Success requires completeness across multiple dimensions: technical implementation must follow exact specifications with all required properties in correct formats, content quality matters as much as markup, and platform-specific considerations for YouTube, Vimeo, or self-hosted videos affect implementation details.

If you need assistance with more complex implementations or advanced Schema markup strategies, our team at BRIX Templates can help with your Framer project. We specialize in creating custom solutions that enhance your site functionality while maintaining clean, professional designs.