0

If I go to giphy.com and share a gif to my timeline on Facebook, it plays inline and has an overlay that says "GIPHY". How does it decide what text should show up on the overlay here? This has been a subtle mystery to me. Here's why:

Let's look at this gif for example. If you click the facebook share button, it opens the sharer to the same URL you're looking at: https://giphy.com/gifs/dog-dachshund-doxie-xT8qB5qHdt8odL797i. This page has an og:site_name meta tag with content GIPHY. Case closed, right?

However, if you paste that URL into the Open Graph Debugger, you learn that it's not even seeing that meta tag because the og:url tag points it to https://media.giphy.com/media/xT8qB5qHdt8odL797i/giphy.gif. However, if you right-click on the image preview there, open your web inspector and delete the <div class="unclickableMask"/> that's obscuring it, it will reveal the site name, GIPHY, which is the same as how it will be once you post it to your timeline. Where is it getting this from if it isn't seeing the og tags?

That url has a secret, btw. It supports content negotiation.

$ curl --head https://media.giphy.com/media/xT8qB5qHdt8odL797i/giphy.gif
...
content-type: image/gif

$ curl --head -H 'Accept: text/html' https://media.giphy.com/media/xT8qB5qHdt8odL797i/giphy.gif
...
content-type: text/html

It does content negotiation. As a result, to the Open Graph Debugger and Facebook sharing in general it appears to be a direct link to a gif, which seems to be necessary in order to get Facebook to play it inline. TenorGifs does the same thing. However, if you open it in your web browser it renders an HTML page instead. I thought perhaps it was this dual nature that allowed the site name to be read. However, I created my own page that implements this sort of content negotiation but Facebook did not display my site name over the gif. It showed my full domain name instead. What's going on here?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.