Fun With OpenGraph
· 4 Minute Read
The most visible invisible boring web standard.
Here's a quickie: I had to add Open Graph tags to my website, because that's something you just need to do if you don't want links to your posts to be flat and boring.
What's Open Graph?
If you're not a technical person, Open Graph is a technology that Facebook created and promoted back in 2010 when their reputation as a scrappy startup was still in people's minds. I recall their sales pitch at the time being that they wanted to make the Internet richer and more interconnected by adding a system on top of it that would define what they call a "social graph". The idea is that you define a set of data fields in the pages of your website, sort of like the rows in a spreadsheet, where you would define all the interesting facts about either yourself, or the media hosted on your website (images, videos, etc...), and then Facebook would be able to incorporate all that information into its platform where it would make all the different corners of the web more accessible. This was framed as being Facebook's way of using their platform to make the Internet better and easier to navigate.
Keep in mind that this was back in 2010, and Facebook hadn't yet achieved the vice-grip on online content it shares with all the other big-tech websites, so this wasn't something that was really controversial at the time. I think if they tried to do something like Open Graph these days, you'd probably hear a lot more about it as a socio-cultural issue -- especially since lots of different special interest groups on all sides of the political spectrum see the profit-motivated actions of big tech companies as being a slight to their specific causes.
In practice, Open Graph is really just a way to make it so that when you or someone else posts a link to your
website on a website like Facebook, that link will have the correct title, a nice headline image, a quippy description,
or whatever else rich media Facebook wants to show to people. You make sure Facebook can do all of this by including
a bunch of invisible <meta> tags in your webpage. Facebook will use these tags to display whatever you want
in an attractive little card.
To their credit, Facebook's system seems to be the most common way to do this, and they don't impose some kind of
"embed this javascript in your page" restriction on you to benefit from it. Pretty much everyone else with a website
that displays links just uses og:whatever Open Graph tags (unless you're Twitter! grrrr). The effect of this is
that if you happen to run a social media website, you can easily paste links in your web app
and get nice looking media cards for those links, as long as your software supports the Open Graph protocol.
A Simple Example
For example, I pulled up some random New York Times article about Joe Biden today. If you open the HTML document (and ignore NYT's annoying paywall), you can see that they embed all the standard Open Graph metadata tags:
<meta data-rh="true" property="og:url"
content="https://www.nytimes.com/2024/10/17/world/europe/biden-germany-visit-rescheduled.html">
<meta data-rh="true" property="og:type"
content="article">
<meta data-rh="true" property="og:title"
content="Biden Prepares Quick, Rescheduled Visit to Germany, a Key Ally">
<meta data-rh="true" property="og:image"
content="https://static01.nyt.com/images/2024/10/17/multimedia/17germany-biden-gkhw/17germany-biden-gkhw-facebookJumbo.jpg">
<meta data-rh="true" property="og:image:alt"
content="President Biden preparing to board Air Force One, en route to Berlin, at Joint Base Andrews in Maryland on Thursday.">
<meta data-rh="true" property="og:description"
content="The president’s hastily rescheduled trip to Berlin will last less than a day. The German government has trimmed back its celebrations accordingly.">
The presence of these tags can be seen in my post on my Mastodon server here (I'm not rendering OpenGraph data on this website yet, so you'll need to follow the link):
Pretty neat! Now that I've implemented Open Graph on my own website, the link you followed to this page will have had the Facebook version of this media card.