Is it possible to use Video (mp4 or Gif) as Open Graph Image Url on Facebook and Instagram using Webflow?

TL;DR
  • Facebook and Instagram only support static JPG or PNG images for og:image, ignoring MP4 and GIF files.  
  • In Webflow, set a static thumbnail as the OG image and link it to a page with the embedded video for proper social sharing previews.

Facebook and Instagram do not support using video files (MP4 or GIF) as Open Graph (OG) images. Open Graph tags require a static image in JPEG or PNG format for proper sharing previews.

​

1. Social Platforms Only Support Static OG Images

​

  • Facebook and Instagram only use the og:image tag to render a preview, and they require a static image (JPG, PNG, or WEBP).
  • Video files like MP4 or animated GIFs are ignored when assigned to og:image.
  • Animated GIFs may appear static if used, but Facebook often converts or discards animations during scraping.

​

2. Webflow's Limitations with OG Media

​

  • Webflow's Open Graph image URL field accepts only static image URLs.
  • There is no built-in feature in Webflow to set a video as an OG preview.
  • If you input a video or GIF URL in the OG field in Project Settings > SEO > Open Graph Image, Facebook will not render a preview correctly.

​

3. Workaround for Video Experience

​

  • You can upload a cover image (thumbnail frame of the video) as the OG image, which links to a page containing the actual embedded video.
  • This allows the social preview to still grab attention while conforming to platform limitations.
  • Use Facebook’s Sharing Debugger to test how the OG image will render: https://developers.facebook.com/tools/debug/

​

4. Format and Size Recommendations

​

  • Facebook recommends 1200 x 630 px JPG or PNG images.
  • Keep the image under 5MB for best performance.
  • Aspect ratio should be 1.91:1 for optimal rendering across devices.

​

Summary

​

No, you cannot use MP4 or GIF video files as Open Graph images for Facebook or Instagram through Webflow. Only static image formats (JPG, PNG) are supported. Instead, use a video thumbnail as the OG image and embed the actual video content on your page.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What could be causing the scroll issue on my published Webflow website?
Is there a simple script in Webflow to dynamically display the percentage of the page load in a text element?
How can I change the width of a container block in Webflow?
How can I ensure that the checkbox value in my Webflow project is sent as a boolean in the JSON for Mailchimp integration?
Can the aria-haspopup attribute be removed in the responsive menu component in Webflow? My client's hired Accessibility Audit company is requesting its removal, but it seems hardcoded. Is there a way to remove these attributes?
How can I disable the horizontal scroll on my Webflow site while keeping the vertical scroll enabled?
How can I change the value of a checkbox in Webflow to display the label name instead of True?
How do I include a webm video in Webflow with autoplay functionality instead of using an animated GIF?
What can I do to scroll fixed content within a div in Webflow?
How can I move the slider arrows in Webflow to a different position like in the attached picture?
How can I add more Nav Links to my Navbar in Webflow?
How can I resize an image in Webflow?
In Webflow, when setting an Element to "Relative", how do I choose its positioning relative to other elements?
How can I nest additional pages under a parent page in Webflow without using a CMS collection and ensure that the visible HTML page uses the same slug that has already been assigned to the folder method?
Is it possible to have 54 unique items with multiple options in the Webflow CMS for an e-commerce store, or would this exceed the maximum allowed items in any Webflow ecommerce plan?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?