Full Control of Tweeted (and Facebooked I Guess) Links aka OpenGraph

Posted on by Alan Levine

The Trick, Said Quick

Fine tune and craft the way your shared WordPress posts appear as Twitter Cards (and in Facebook)… fully manage the Open Graph tags.

The Trick, In Intricate

The OpenGraph protocol defines how links from your site appear in social media platforms. You can use plugins to manage what content is added to your posts (as metadata, stuff you don’t see unless you view the HTML source of your pages) that can be more specific then what the platforms do on their own.

If you look up Twitter Cards you will get some information surrounded by a lot of marketing and SEO verbiage. Managing them in your site can give you more control over the image or media used, and the additional text that is shown when a link you tweet is published in twitter.

You can check any web address on your site with the Twitter Card validator… does it represent your content well?

Perhaps the easiest way is to deploy them on your WordPress site is with the JetPack plugin — it’s Publicize module will generate a basic set of Open Graph tags. It will use a Featured Image to share; if one is not present, it will use the first image in the Post. And it will grab the first few sentences for a description.

But what if you want it to use a specific image? And what if you want to customize the text, rather than rely on a first X words grab? And what if you don’t want all the bloat of a big plugin?

This is what I faced on this presentation site. I love the dog tricks photos used on these pages, but they don’t tell much when tweeted. And the first bits of text on these pages include a tweet and a heading.

I put to use on this site (and a few others I manage) the Open Graph for Facebook, Google+ and Twitter Card Tags plugin. Since I don’t do or care much about Facebook, I focused more on the Twitter features. But I would guess it offers good support for Facebook.

What I really like is it ads a post specific setting to each page, below the editing area (it works too in Gutenberg).

Here is an example, right in this presentation, the trick for Dynamic, Automatic Indices of Pages. With just the plugin installed, what I get is okay, but not great.

The basic card using featured image and first chunk of content

But I’d rather have a more useful image (nothing against the cute dog) and to refine the text that appears (it has a twitter URL and a bit of heading text).

Customizing the image with an uploaded version of a screenshot usd in the post, and writing the text I want to see on the twitter card

I instead have uploaded an image of the exact dimensions suggested and re-wrote the text that will appear below it, so it’s a bit more relevant when tweeted. Checking with the validator:

This card has a screenshot from the post, combined with a second one to better explain the post, plus a more concise description.

This amount of finessing may not always be needed, but you may have a future use to further customize how your WordPress content is displayed in social media. And you get more control over what you get as defaults.

You can see below how it works for this post!

Note, with some effort I was able to get JetPack to update their plugin to include the image’s alt description as metadata for the og protocol called for use of the of:image:alt metadata. I am checking the output for the plugin described here, and not seeing the image:alt in the open graph data. Time to let them know…

The Trick, Give it a Kick

Tweet back a reply with an example you tried and/or how might you use this?

Featured dog trick image by Karl Allen Lugmayer from Pixabay