For a bit more than a year I worked on a project that crawled the web and indexed articles. Two of our sources of data were articles shared on Facebook and Twitter. After seeing hundreds of article previews on these two social networks, I decided to improve how my own articles were previewed.
I thought figuring out the markup I needed to add would be a painless experience. Unfortunately, when you search for this information you end up at various SEO optimization and other similar sites where you get the pleasure of experiencing full screen pop-overs trying to get you to sign up for mailing lists and other annoying features of the modern web. Probably unsurprisingly, the least annoying source for this information turned out to be the social networks themselves.
Below is what you will want to add to the
<head> section of
your articles' markup. Items in all caps should be values that make
sense for your articles. Most fields are pretty self-evident, but
for more details. The Open Graph documentation has
more details as well.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
If you have control of your site’s markup and want better previews of your articles on the various social networks then you should add this markup to your web site 1. Hopefully this article has saved you from having a full screen pop-over prompt you to join yet another mailing list.
You can actually remove the
twitter:imagelines since Twitter will fallback to the equivalent Open Graph markup if they missing.↩