Socially-Semantic Markup – Link Facebook and Google Plus (+1) to Your Website

A primary objective of work in designing and deploying websites is to enable an evolved online user experience, for human users of the website. For many websites and their owners, the core website is also a source of information, marketing messages and social dialogue that lives elsewhere. “Elsewhere” can mean any Internet-enabled channel, from social media like Facebook, Google+ and Twitter, to Search Engines, RSS feed networks, Directories, eCommerce platforms, Mobile Apps and content syndication engines.

In short, a website deployment should, as standard practice, assume the web content to be mobile and accessible (in part or in whole) from many other places – and therefore should be as accurate, optimized and standards-based as possible. A website should not only be a destination, but a source of content fragments and descriptors that “carry the flag” around the Internet, to search engines and social media networks, while working hard to escort users back.

This is especially important for an eCommerce portal or website, when selling discrete product or services (for which there are already common vocabularies). It’s especially important if the eCommerce website is designed to deliver a great User Experience (UX) as well, incorporating a lot of helpful content, tools and sometimes off-topic content as well as the core product data.

It’s well known that the actual website content should be optimized to find exactly what a user needs, convince them to engage or buy, as well as convince the search engines to rank highly for target products. This optimization is driven by a mix of “usability”, “accessibility”, “performance optimization” and “SEO” techniques. Achieving this mix isn’t horribly difficult, but does require professional experience and a healthy understanding of the site’s business objectives, underlying technology and online “neighborhood” (i.e. its competitors, partners, detractors).

Semantics For Search Engines

Focusing on search engines, it’s imperative to make every content fragment or page on a website, whether it lives only on the site or is copied/syndicated elsewhere, as semantically accurate as possible. By “semantically-accurate”, I mean the topics and focused intent of the content are crystal clear (i.e. “machine-readable”) and aligned with standardized vocabularies. This includes any intentions related to “persuasion” or “marketing”. Note that ALL search engines are interested in as much semantically-accurate information as can be provided; this includes Google, Bing, Facebook, Twitter, YouTube, Blekko – many search engines out there.

To be semantically-accurate for search engines, it boils down to the visible, unstructured web content plus the non-visible structured web content – one supporting the other.

For the visible content, this is generally a straightforward Search Engine Optimization and Marketing (SEO/SEM) exercise; determining the right keywords and their optimal use on the web page and offsite content that links back, including “alt” and “text” tags, coding good HTML markup (i.e. “header” tags, bolding and other decorations), using text instead of graphics for keywords, making sure scripts and other code are well-programmed and perform well, and taking advantage of descriptors like “Meta Tags” (i.e. “Title” and “Description”) that show up in search engine results of the website.

The non-visible structured web content to be concerned with focuses these days on the new Schema.org semantic markup standards. While many standards have been evolving around adding semantic descriptors to web programming languages, like Microdata, Microformats and RDFa, “Schema.org” is a search-engine driven attempt to “normalize” (aggregate and standardize) the most useful vocabularies (useful by the search engine vendor standards). Basically, standard words and categories are embedded as non-visible HTML code within the existing HTML tags, to help search engines understand (and convey accurately to searchers, for example using “Snippets” in the search results) precisely the focus and intent of the surrounding web copy. Note that as more web projects move to using HTML5, using structured semantic markup will become easier.

Take a web page that speaks to a particular product, with pricing information. The page may include several indicators of price (specials, coupons, 2 for 1, etc.), but the search engine would like to display for shoppers what the true price really is (helping with apples-to-apples comparison shopping). The HTML code may be:

< p >Price: $499< /p >

Adding some markup around this (and only this, on this particular page), will tell the search engines that $499 is the real, for sure price:

< p >Price: < span itemprop=”price” >$499< /span >< /p >

There’s a bit more detail to learn about using this kind of markup, and the “Google Webmaster Rich Snippets Testing Tool” can parse your page and show what the search results focus will be, using this semantic markup.

Semantics For Social Media

To many website owners, participating in social media frequently means not much more than the “AddThis” button, highlighting a litany of chicklets with logos of many social networks. While this may encourage or enable users to actually share the webpage information into their other communities, it doesn’t enable any communities to “reach into” and interpret the website (and their members’ opinions of it) for themselves. Enter the “Like” and Google “+1” buttons.

Placing these visible buttons on your site certainly enables users to “fave” it, plus show them how popular it might be to their other friends and co-workers. Adding some additional non-visible semantic markup to your site will help the Facebook and Google+ tools understand precisely what your site is about, when exposed in these communities.

For Facebook, the additional markup is in their own “Open Graph” format, which is a semantic vocabulary with descriptors that establish a website or page as a “Social Object”. Basically, Facebook can tell its community about your site (through search results, “likes”, sharing), in a way that’s very useful and friendly to its community. A set of core tags are (space added for rendering):

• < meta property=”og:title” content=”Title of your webpage or site”/>
• < meta property=”og:site_name” content=”Name of the website”/>
• < meta property=”og:type” content=”Type of thing or topic the website is about”/>
• < meta property=”og:email” content=”Contact email”/>
• < meta property=”og:phone_number” content=” Contact phone”/>
• < meta property=”og:locality” content=” Contact town/city/neighborhood”/> (note, lots of “address” descriptors available)
• < meta property=”og:image” content=”Image about your site you want people to see”/>
• < meta property=”fb:admins” content=”The primary Facebook contact for this site”/>

For Google, the additional markup is in Schema.org format, and amounts to some Header Meta tags in addition to the “Plus 1” javascript code (to actually see and use the +1 button). The Meta tags reinforce the focus of a user’s intention of using the +1 button, telling Google precisely what you want the +1 community to know about the page from their friends’ recommendation (Google calls this “+Snippets”). This may be a little different than the core marketing messages supported by SEO, and therefore a little different than the content in the traditional Metatags. The basic tags are:

• < meta itemprop=”name” content=”Name of your site or webpage”>
• < meta itemprop=”description” content=”What’s on your site or webpage”>
• < meta itemprop=”image” content=”a nice image to socialize about your site or webpage”>

Note that Google’s +Snippets will actually use Facebook OpenGraph markup if it’s already available, i.e. “og:title,image,description”.

To Do’s

So, if you’re building a new website or upgrading an old one (especially for eCommerce or B2C sites), be sure to consider the following to maximize BOTH search engine results for your product AND exposure within online social communities:

2. SEO your site, plus your external content and social media profiles – visible AND non-visible elements.
3. Determine what you’d like to really highlight, perhaps just your business, perhaps products or services….generate the Schema.org-compatible markup for these – try http://schema-creator.org/ to help.
4. Work with your Website Programmer and Information Architect to determine how best to insert this “structured markup language”, in a way that enhances and supports the parallel SEO techniques, yet complies with the site’s design and technology. Test it. Note that many Web Content Management (WCM) providers haven’t yet made this easy to do – so check with the vendor.
5. Find a way to use the “Like” and “G+” buttons, and insert them on your site – especially for products or information you feel would benefit from widespread, public socialization; sometimes it’s best to use these where the site’s personality really shows through, like on the “About Us” or “Contact Us” page.

Navigation Arts can help with your website content optimization and interactive marketing strategies, for search engine, social media and other digital channel exposure. Contact me for more information.

Original post