Video (mp4 or gif) as Open Graph Image Url?

Design help General
1

Hi!

Maybe a strange question, but I want to know: Is it possible to use Video (mp4 or Gif) as Open Graph Image Url for use on Facebook and Instagram?

Thanks in forward for answering,

grtzz Corine

Here is my public share link: LINK
(how to access public share link)

1 Like
2

No and yes.

Webflow allows you to specify an image for the og:image property.

Normally you shouldn’t use GIF images for this because they’re considered animations, not images.

However, sites like Giphy do it so maybe it works and maybe it’s safe to do. The problem is an OG image should be quite large, and if you make a large GIF, it will have an insane weight.

Now for videos, Open Graph has something special: og:video

og:video is an optional metadata that complements the default set of Open Graph properties.

The basic or default Open Graph metadata are:

  • og:title - The title of your object as it should appear within the graph, e.g., “The Rock”.
  • og:type - The type of your object, e.g., “video.movie”. Depending on the type you specify, other properties may also be required.
  • og:image - An image URL which should represent your object within the graph.
  • og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., “The Rock (1996) - IMDb”.

The Optional metadata are:

  • og:audio - A URL to an audio file to accompany this object.
  • og:description - A one to two sentence description of your object.
  • og:determiner - The word that appears before this object’s title in a sentence. An enum of (a, an, the, “”, auto). If auto is chosen, the consumer of your data should chose between “a” or “an”. Default is “” (blank).
  • og:locale - The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
  • og:locale:alternate - An array of other locales this page is available in.
  • og:site_name - If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., “IMDb”.
  • og:video - A URL to a video file that complements this object.

You can add those metadata with custom code.

It’s very unclear to me what site or service make a good use of og:video

Everything about Open Graph on the protocol page: http://ogp.me/

If you want to test multiple og settings on Facebook for example, use this online developer tool to clear the og cache after each try, or you’ll only see the first result again and again.

2 Likes
3

Hi Vincent,

Thanks for your answer, I really have to process this information :-). It’s a lot for a not websitedesigner as me :-).

I give it a try next year :-), first task for 2017 haha,

Thanks again,

Grtzz Corine

4

I’ll help you :slight_smile: I need to try it too.

5

Vincent, that would be very Nice! Great!

Unfortenally I have to stop with working for today. My “skills” are needed at home (I have to clean up the mess from the plasterer, the carpenters and we have to go install our heating this weekend, it’s freezing cold in The Netherlands :frowning: and in our house too

Is there an other moment when you could figure this question out with me?

Thanks again, grtzz Corine