When specifying images for twitter cards and facebook shares, which one should I use:
<meta property="og:image" content="http://example.com/logo.png" />
<meta name="twitter:image" content="http://example.com/logo.png" />
or
<meta property="og:image" content="https://example.com/logo.png" />
<meta name="twitter:image" content="https://example.com/logo.png" />
?
I tried using schemaless approach:
<meta property="og:image" content="//example.com/logo.png" />
<meta name="twitter:image" content="//example.com/logo.png" />
and they both failed to fetch the picture.
Related
I am trying to get an S3 video to play in line on Facebook. My site is https://sigtwo.com/vlog/14/.
S3 Video: https://s3.amazonaws.com/spsttestbucket/20190220_142312_NF_2000k.mp4
I believe I used the proper tags as other parts of the post seem to work fine.
Meta tags are as follows:
<meta property="og:title" content="SigTwo Mapping & Imagery Solutions" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://sigtwo.com/vlog/14/" />
<meta property="og:description" content="Too many potholes on Storrow Drive after this winter. Someone needs to fix it." />
<meta property="og:image" content="http://sigtwo.com/static/img/OrangeMaskHeight500.png" />
<meta property="fb:app_id" content="571517186592163" />
<meta property="og:video:url" content="https://s3.amazonaws.com/spsttestbucket/20190220_142312_NF_2000k.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:height" content="720" />
<meta property="og:video:width" content="1280" />
Here are results of debugger where everything seems fine:
https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fsigtwo.com%2Fvlog%2F14%2F
I have a web page that shows video and people can share it to facebook.
here are the open graph meta tags im using:
<meta property="fb:app_id" content="app_id" />
<meta property="og:url" content="https://www.domain.com/show/245" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Website tile" />
<meta property="og:description" content="Website description" />
<meta property="og:video" content="https://www.domain.com/uploads/09250522_18.mp4" />
<meta property="og:video:url" content="https://www.domain.com/uploads/09250522_18.mp4" />
<meta property="og:video:secure_url" content="https://www.domain.com/uploads/09250522_18.mp4" />
<meta property="og:image" content="https://www.domain.com/uploads/thumbnail.png" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />
*not actual domain name and app id, for privacy purpose
When i check the page using sharing debugger, it works okay, no error whatsoever.
The shared video also looks okay, just like normal video. But when i try to play it, it shows "download file" link to the video file instead.
Any idea why this is happening? i tried using different video, using 3rd party tools like addThis to generate the share button, but the result is the same.
Just figured it out!
You need to call "og:video:type" before you set video source.
I know it's weird, but this prevents api to set video source to "flash".
So your meta tag should look like this:
<meta property="og:url" content="someurl" />
<meta property="og:type" content="video.other" />
<meta property="og:title" content="yourtitle" />
<meta property="og:image" content="https://url.com/img.png">
<meta property="og:video:type" content="video/mp4"/>
<meta property="og:video" content="https://url.com/video.mp4" />
<meta property="og:video:url" content="https://url.com/video.mp4" />
<meta property="og:video:secure_url" content="https://url.com/video.mp4" />
<meta property="og:video:width" content="videoWidth"/>
<meta property="og:video:height" content="videoHeight"/>
<meta property="fb:app_id" content="id" />
I shared my site in fb and in place where the image should be it says just "index of /". ??
I have these in my head:
<head prefix="og: http://ogp.me/ns#">
<meta name="viewport" content="width=device-width, initial scale=1.0"/>
<meta property="og:description" content="Graphic design etc other stuff..." />
<meta property="og:title" content="Audiovisual" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="/images/ogimage.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<link rel="canonical" href="http://audiovisuaalinen.work/english.html" />
<meta property="og:url" content="http://audiovisuaalinen.work/english.html" />
<meta property="og:type" content="product" />
<meta property="fb:admins" content="1385587538423284" />
If you want to control more of what Facebook uses in their snippets, you can add open graph tags to your site. Then Facebook will use those tags to populate the title, description, thumbnail, etc. when shared on Facebook.
You have to use an absolute URL for the Open Graph image:
<meta property="og:image" content="http://audiovisuaalinen.work/images/ogimage.png" />
I am hosting videos on a website, and have created Open Graph video tags so that when a page like example.com/video/my-new-video is shared on Facebook that video can be played in the Facebook newsfeed, but there's no link back to example.com/video/my-new-video.
The Open Graph tags in this case look like this:
<meta property="og:title" content="My New Video" />
<meta property="og:description" content="This is my new video about sharing videos" />
<meta property="fb:app_id" content="xxxxxxxxxxxxx" />
<meta property="og:image" content="http://example.com/video/my-new-video/poster-image.jpg" />
<meta property="og:url" content="http://example.com/video/my-new-video/" />
<meta property="og:type" content="video" />
<meta property="og:video" content="http://example.com/video/my-new-video/video-file.swf" />
<meta property="og:video:secure_url" content="https://example.com/video/my-new-video/video-file.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />
If I remove the og:video URL that points to the SWF to play the video I get the video's image and description with a link to example.com/video/my-new-video but it's not possible to play the video in the Facebook newsfeed.
The Open Graph tags in this case look like this:
<meta property="og:title" content="My New Video" />
<meta property="og:description" content="This is my new video about sharing videos" />
<meta property="fb:app_id" content="xxxxxxxxxxxxx" />
<meta property="og:image" content="http://example.com/video/my-new-video/poster-image.jpg" />
<meta property="og:url" content="http://example.com/video/my-new-video/" />
<meta property="og:type" content="video" />
<meta property="og:video" content="http://example.com/video/my-new-video/iframe-embed.php" />
<meta property="og:video:secure_url" content="https://example.com/video/my-new-video/iframe-embed.php" />
<meta property="og:video:type" content="text/html" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />
Is there a way to both let the video play in the Facebook feed and link back to the page it's on?
I'm trying to post a SWF file on my Facebook profile.
The problem is that when the user clicks on the link he is getting transferred to the website where the SWF is hosted.
What I want is for the Flash to open inside Facebook like it does with videos.
The metatags I'm using are as follow:
<meta property="fb:app_id" content="" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="" />
<meta property="og:title" content="Title" />
<meta property="og:image" content="ImgUrl" />
<meta property="og:description" content="Mini Description" />
<meta property="og:site_name" content="Sitename" />
<meta property="og:video:height" content="476" />
<meta property="og:video:width" content="600" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video" content="Flash Url http" />
<meta property="og:video:secure_url" content="Flash Url https" />
After using https protocol the thumbnail on Facebook has the PLAY icon on it like it does with videos but when user clicks it, he is prompt to download the file.
You should add handler=fbplayer as a querystring in your https-secure url meta tag
eg flash.swf?handler=fbplayer