Support Forum

SEO – Embedded video thumbnails

EB Emmet Brown
Emmet Brown
Member

I would really love to be able to tweet and facebook a topic and have the thumbnail of the first embedded video in the post show up in the twitter card or the facebook post.

The only way I’ve been able to get this done so far is to manually edit the /forum/ page and put the thumbnail there temporarily while I create the twitter and facebook posts.

Is there a better way to accomplish this?

16 Answers

New Answer

YS Yellow Swordfish
Yellow Swordfish
Member

I probably can’t answer but I can get some information to help someone who can!
So the first question – how do you send this to FB? Are you using our Share This plugin?

EB Emmet Brown
Emmet Brown
Member

Yes.

Actually share this plugin works perfectly if there is an image attached somewhere in the topic.  It picks out the first image and uses that.  If there’s no image, it pulls the featured image that is set for the forum.  This is working as one would expect.

However if the user pastes in a link from vimeo or something, video is automatically embeded as per WP oembed (I think), but no image is pulled by share this.

My workaround is to manually create an image from the video and edit the users post and attach the image to his/her post.  Share this then grabs that attached image.

YS Yellow Swordfish
Yellow Swordfish
Member

At the moment – without advice – I am just speculating, but could this be because a WP embedded video is actually sourced in an iFrame and targets like Facebook are, in all probability, going to deny creating an iFrame simply because of the potential security risk?

EB Emmet Brown
Emmet Brown
Member

Well, my understanding of the way Facebook et al. work is that they go to the provided link and “scrape” the meta data from the page.  In that meta data are a bunch of tags.  Tags are things like og:title=”My web page” where og stands for “open graph” (facebook’s defined standard set of tags).

So we want the tags to be right before facebook scrapes the page and I think simplepress SEO or maybe the Sharethis plugin are the things that set those tags up.

The tag we are mainly concerned with is “og:image”  (open graph image). I can see the og:image tag being set to the first attached image in the topic if one exsists, and failing that it is set to the feature image for the forum – this is working.  But if I put in a vimeo video link as the first post, the og:image tag isn’t affected.  Essentially it is only grabbing attached images, and not doing anything with embedded video.

What I’d like is for the software to set the og:image tag to the video thumbnail. 

This may be more of a feature request than a bug, but I think it would REALLY improve the ability to share posts on social media.

MP Mr Papa
Mr Papa
Member

yes, you have the general idea of how open graph tags works… and how we have implemented what you speak of…

not familiar at all with vimeo other than having heard of it, how would one get a video thumbnail given an embedded url to the video?

and definitely a feature request… which we could always add to our list if we understand the concept…  how would it work with non vimeo videos?  vimeo is far from the most common video and would be best to support the masses vice a single one…

EB Emmet Brown
Emmet Brown
Member

Let me do the research on this.  I will post back here with a method that I think will work.

I think the two most popular video hosts would be youtube and vimeo.  I’ll work on methods for both.

EB Emmet Brown
Emmet Brown
Member

Youtube:

There are a predictable set of urls outlined in the refence link below but generally go something like this:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg

 

Reference:

http://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api

EB Emmet Brown
Emmet Brown
Member

Vimeo:

Similarly, a predictable url:

“http://vimeo.com/api/v2/video/.php”

But you have to either parse the file or just deserialize as outlined in the reference below like this:

 

Reference:

https://arjunphp.com/how-to-get-thumbnail-of-vimeo-video-using-the-video-id/

EB Emmet Brown
Emmet Brown
Member

Emmet Brown said
Vimeo:

Similarly, a predictable url:

“http://vimeo.com/api/v2/video/<video id>.php”

But you have to either parse the file or just deserialize as outlined in the reference below like this:

 

Reference:

https://arjunphp.com/how-to-get-thumbnail-of-vimeo-video-using-the-video-id/

MP Mr Papa
Mr Papa
Member

that’s two of the many 🙂  but we can add it to the list…  if we do it, might be better for a plugin than core since its not used by the majority but still desired by some…

EB Emmet Brown
Emmet Brown
Member

I would say specifically it’d be desired by the people who install the “Share This” plugin.  Its not really fully complete without being able to share posts with videos to facebook and twitter properly.

Anyways, thanks for thinking about it.

MP Mr Papa
Mr Papa
Member

as mentioned, the problem is the sheer number that could be supported… wp oembed is constantly tweaking, adding and removing supported video sites… support nightmare…  but we will consider perhaps some of the prime players..

EB Emmet Brown
Emmet Brown
Member

So apparently you can piggyback on the work of oembed.  The oembed protocol returns a thumbnail in the meta-data if it’s available.  I’ll look into it and see if I can find the exact method.

MP Mr Papa
Mr Papa
Member

only question would be if the oembed stuff was done before forum content 🙂  but we are all ears… can add what you find to the consideration ticket we have…