Multiple Share Cards For Your Web Page

The first — and hopefully last — experience your user has with your news story is on social networks. I’ll describe a neat trick for sharing a single web page on social networks in several ways or at several times.

Primer: the share card

Social networks display share cards by fetching the web page and rendering its HTML <meta> tags. Each web page has one share card.

What if I want to share my page in several ways?

Consider this news quiz. The reader’s goal is to guess what a chart looks like. What image should readers share on social networks?

An interactive news piece with no easy share card

A stock photo would seem convoluted, since the page itself is visually striking. The correct answer — a striking chart — would defeat the purpose of the page, because readers will see it before they take the quiz.

Hrm … what’s a visual piece of information that compels readers on social networks to take the quiz and learn from it?

Here’s one answer: some great visuals further down the page. The story includes small-multiple charts. Each exposes enticing facts without giving away the answer to the quiz.

We’d like ten share cards, please

We’d like to make ten share cards: one per chart. We’d like all those share cards to link to the quiz page.

Here’s the secret.

The solution: “social-redirect pages”

First, the reader clicks a share card on his or her social network of choice:

That takes the reader to your “social-redirect page.” It’s a spartan page that leads readers to the story:

Readers click the link and enjoy the quiz.

How social-redirect pages can help tell your story

Perhaps even more exciting: share cards can be timely. In this example, ten music festivals happen at ten different times. That makes the story relevant at ten times — hence ten share cards.

And the drawbacks?

First of all, a social-redirect page hassles the reader. In this example, it costs the reader an extra click.

One can publish meta-refresh or JavaScript code on the social-redirect page to automate the click on the reader’s behalf. To the reader, it will seem like the share card went straight to the final page (with a fraction-of-a-second delay).

That raises a second issue: readers should know what they’re sharing.

Here’s an advanced example that shows the subtleties. We The Tweeple, a news story, has hundreds of thousands of social-redirect pages that automatically send the reader to the main page. A reader may see a chart like this:

This Venn diagram is a great visual. Let’s share it.

When the reader clicks to share on Facebook, the chart pops up:

Readers have a what-you-see-is-what-you-post experience with Facebook.

Unfortunately, that’s not what happens on Twitter:

Readers won’t see the share card until after they tweet with Twitter.

When the user clicks “Tweet”, the share card will be attached to the tweet. Otherwise, the user has no way of knowing what graphic will appear.

It’s a challenge to clarify what readers will share when they post to social media.

Next steps in news

Many news sites publish stories that change every day: tracker polls, sports-league standings and incident counters spring to mind. They’re visual, but news agencies don’t tend to publish factual graphics on their share cards because the facts change over time. (The trend today is for share cards to use ambiguous illustrations.)

Social-redirect pages let news sites publish one social-redirect page per (timestamped) graphic. Bingo: readers on social media become more informed and engaged.



Journalist, ex software engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store