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
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?