Select Page

In the age of Search Engines, websites were optimized for robots. In the age of Social Media your website should be optimized so your visitors and their friends can have a conversation about you.

(Cet article est disponible en version abrégée en français.)

Perhaps you’re already halfway there. If your SEO specialist implemented improvements to leverage your sincere quality content then chances are, it looks halfway decent when shared on Social Media. But some times it can be disastrous.

An example of optimal sharing on Facebook

You should worry about how your sites are shared

How much time do you spend deciding which picture to use in an advertisement? How much time do you make sure your copy conveys the right message about your brand? When a visitor decides to share your content with a friend on Facebook, your content is parsed by a system that determines the title, introduction and picture to display. While it is possible in some instances for the user to adjust these, by changing the text or cycling through potential pictures, most don’t bother. Also, a growing number of applications work in the background and do not let users adjust page information.

The ideal scenario is the one where YOU optimize what is going to be displayed.

In this example, the Facebook parser picked up the first true image in the page, the logo of a funeral home.

In this instance, the Flipboard application on my iPad completely ignored the beautiful in-post picture of awesome modern ceramist Eva Zeisel and instead included the picture of contributing writer Adam Flaherty. In this instance, I had no control over the media that was posted on Facebook. In any case, the MAKE blog staff should have optimized the site so that the right picture is shared removing any confusion or potential for error.

The improvements suggested in this article are also helpful in making sure your content looks attractive in popular visual news aggregators such as Flipboard, Pulse or FLUD on the iPad. The popular Apple tablet is only the first of a slew of more than 30 tablets to come out in 2010 with 50 more already announced for 2011.

Flipboard is only one of many apps who display attractive custom newspapers based on the content of a RSS feed or shared media. In the example above, 33% of the mined media is not SMO optimized. Now is the time to take action because these novel and popular news-mining apps are great for consuming and sharing content on mobile devices such as the iPhone, Android, and now, Windows based phones.

In short, there are more robot agents trying to make sense of your web content today than at any time in Web history!

Optimizing Shared Content Elements

The following tricks are intended for Social Media Optimization (SMO). They are SEO-like improvements that make it easier for parser to understand your page and present it to a human. Improving your site for Social Media is not exactly the same as making it Google-friendly. Non-Google page parsing agents can work in a myriad of ways. My suggestions are meant to minimize disastrous sharing but really bad parsing agents will always exist.

If your sincere quality content is already SEO compliant then you can probably skip to the next step.

The Title Tag: <title>

Your title should be straight forward. It is best to order your title backwards so that readers are drawn to the exact content of your page. – Tips and Tricks – Club Soda and 9 Other Myth About Cleaning Your Carpets

Is not as straight-forward as:

Club Soda and 9 Other Myth About Cleaning Your Carpets – Tips and Tricks from

For a parser, the title is the easiest part of your page to collect. However, you should keep your titles under 100 characters so your prose is not chopped down when Tweeted and, hopefully, re-Tweeted.

The Content Description: <META NAME=”Description”>
You can use the meta description to precisely introduce your content. Most developers and content management system use the same description on all pages. This is not optimal. Implementing a system that changes this content so that it relates precisely to each individual page is a good investment. The effort required depends on which content manager you use so ask your resident technie. If you are not able to change these, your next best option is the subtitle or lead-in of your article. More advanced parsers will look for a big block of text after the <h1> tag and declare that the content of the page. Unfortunately, a lot of sites use the <h1> for the site identification (logo or company name) and an <h2> for the content title. While not optimal, some parsers will be able to pick it up. Your meta description or article lead-in should be less than 255 characters.

The image tag: <IMG>

The most annoying part of social media sharing is when the page parser cannot figure out which picture to use to highlight the content. Facebook will let the user go through potential thumbnails but most won’t change what comes up by default. If most of your design elements are configured as div backgrounds, they won’t be seen and the parser will favor larger images present around the content block. If you have no photo for your article, the results will vary. In any case, your content should ALWAYS have a related picture. Get friendly with the Creative Commons section of Flickr today, and notify and give proper credits when you use an image!

Exercise #1:

At this point you should pick a typical page on your site and copy the entire page URL into your Facebook status. Facebook will parse the page and convert it to a ‘Link’ item. You will immediately see how your site looks once shared and get an inkling of how your content could be parsed by other social media sites. Remember that Twitter now displays parts of the content of a website when Tweets contain a link. And it is important to mention that even if you don’t have a Facebook share button on your site, most Web users know that they simply copy and paste the URL in their Facebook status to share a link.

Pick a Standard and Hope For The Best

Facebook has become the arbitrator of ‘Like’ in the past year with the release of the Open Graph protocol. Basically Facebook released their own set of html meta tags that make ‘LIKE’ implementation easier for web developers. Open Graph metas are good for semantics nerds like myself and closer to a Web 3.0 utopia characterized by standout content mashups. Some people moan about Facebook without understanding how the most obsessively neat website on the Internet actually works but Facebook’s Open Graph data model is both simple and elegant. Implementing Open Graph in your site requires no programming, only copy-pasting and personalizing a set of new metas. Adoption of these newly released standards is gaining momentum.

In Social Media, readers don’t actually ‘read’ content, the ‘see it. That’s why images are so important! In the next part of this post we will implement a strategy to optimize metas in order to fully control the images that are displayed when your content is shared.

Exercise #2:

Whether or not you have implemented Open Graph standards on your page, you can use the handy Facebook URL Linter. This tool will parse the page and pick up and attempt to classify the content it finds. Now you have a way of testing your site after you make improvements.

Being SEO compliant is good, controlling exactly what is harvested by Social Media parsers is awesome.

Implementing The Pretty

In this section I will take you through an ideal Social Sharing strategy. There are many reasons why some marketers might want to be a bit naughty and implement some Facebook foolery, but we’ll keep our white hat on for this post.

For each content type there is an ideal strategy for choosing title, intro and image. Here are three very common content types:

Home Page

It’s your home page so the associated image should represent your company. Facebook will display a 90px reduction of the picture you choose. You could push your logo or brand if it is square-ish. Remember that this is the only instance where including a blatant commercial message is okay. A screen shot of your site might be more appropriate if your company logo is unreadable at 90px wide. Why not include your slogan? Even if the resulting preview is only 90px wide, you should push the largest version you have so that it is not all pixilated on other content aggregators.

Category Page or Subchannels

Offer different services? Have many categories of widgets? If someone shares your category page you can be sure they are talking to friends who might be interested in this specific subset so make the share picture speak to that interest.

Articles, Products and other Specific Content

Product pages, articles and other specific topical content pages are the most likely to be shared by visitors. Configuring this page will be easy, if you simply configure the og:image tag to contain the entire URL of your image.