Webflow sync, pageviews & more.
NEW

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 images (JPG, PNG, non-animated GIF) for Open Graph previews and do not play videos or GIFs.
  • In Webflow, set static OG images via Project or Page Settings, and use external hosting with custom code for video embeds, though Instagram will ignore video tags.

Facebook and Instagram do not support videos or GIFs as Open Graph (OG) images. Webflow, like all platforms that use OG metadata, must follow this limitation.

1. Open Graph Image Requirements

  • Facebook and Instagram only accept static image files (JPG, PNG, or GIF-as-still-image).
  • Even if you specify a video (e.g., MP4 or animated GIF) in the og:image tag, only the first frame may render, and there's no playback functionality.
  • GIFs do not animate in OG previews on Facebook and Instagram; they are treated like static images.

2. What You Can Do in Webflow

  • Go to Project Settings → SEO tab to set a default OG Image URL using a static image (recommended: 1200x630px, under 5MB).
  • Use the Page Settings for individual pages to configure unique OG metadata, again with static images only.
  • Host the image in your Webflow assets, then copy its public link as the OG image URL.
  • Facebook allows embedding videos via OG tags like og:video, but:
  • This requires hosting the video externally (e.g., on your own server or supported video platforms).
  • Webflow does not give direct access to <meta property="og:video"> unless using custom code in Page Settings → Custom Code.
  • Even then, Instagram still won’t render the video – it ignores og:video.
  • Result: Most consistent experience comes from using a static thumbnail as the OG image, and embedding your video in the linked page itself.

Summary

No, you cannot use MP4 or animated GIFs as Open Graph images on Facebook or Instagram via Webflow. These platforms only recognize static images for previews, so use JPG or PNG files to control how your content appears when shared.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What could be causing the issue with the broken URL in Webflow that includes "www.www." and what steps can be taken to fix it?
Does Webflow have a code editor for editing pages with HTML, CSS, and JS?
Is there a way to delete unused assets in Webflow's library?
What are some alternative options for reinitializing Webflow interactions in ix2, similar to the functions Webflow.ready() and Webflow.destroy() in ix1?
Where is the HTML code for the background video located in Webflow if I don't use Webflow hosting and there is no 'documents' folder in my site?
How can I fix the issue with my Webflow site's footer floating above the bottom of the page on the third page, even though it has the same settings as the other pages?
How can I resolve issues with my Webflow project when adding Locomotive Scroll to achieve smooth scrolling, causing my previously created GSAP animation for navbar color change on scroll to stop working?
How can I create a dynamic schema in Webflow?
Why doesn't my website/page link show an image when I copy/paste it into my Facebook status? Can someone assist me with this issue?
How can I add a sticky top banner above the Nav Bar Menu in Webflow, while ensuring it doesn't break the navigation bar?
Does Webflow integrate with any payment providers to receive cryptocurrencies as well?
Can a Webflow website be used to create a full ecommerce site with user registration and support for multiple vendors, similar to Amazon? What are the next steps for exporting code if needed?
How can I embed an MP4 video into my Webflow project without using external video hosting and loading it from my local device, since I won't have internet access?
How can I display the copyright symbol © in a Webflow text block on Windows?
How can I update the thumbnail that appears when sharing my Webflow site link on SMS or social media messengers to be a thumbnail of my site?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
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?