Saturday, August 11, 2012

More SEO and Social META tags for Twitter and Google

Here are some more HTML META tags I just discovered:

Twitter Cards

Twitter Cards (announced in June 2012) are extended tweets that can show more than just 140 characters. Here are META tags to add to your page HEAD section to help Twitter pick the right parts your site's content.

The twitter:card tag can be summary (for a news article, blog post, or text-based page), photo (for an image or picture), or player (for video).

<meta name="twitter:card" content="summary" />

The twitter:site and twitter:site:id tags let you identify your own Twitter username, and official Twitter user ID. Most people won't know their Twitter user ID. If you don't, you can omit that META tag.

<meta name="twitter:site" content="@YourTwiterScreenName">
<meta name="twitter:site:id" content="1234567890" />

The twitter:url tag is for a link to your page.

<meta name="twitter:url" content="http://www.YourSite.com/path/pagename.html" />

Other tags are pretty self-explanatory:

<meta name="twitter:title" content="Your Page Title" />

<meta name="twitter:description" content="Your page description." />

<meta name="twitter:image" content="http://www.YourSite.com/image.jpg" />

Google+ OpenGraph

OpenGraph (og) META tags help Google Plus pull the right information from your page, in case anyone ever shares it on Google+. These are pretty self-explanatory.

<meta property="og:title" content="Your Page Title" />

<meta property="og:image" content="http://www.YourSite.com/image.jpg" />

<meta property="og:description" content="Your page description." />

<meta property="og:site_name" content="Name of Your Site"/>

Google Search Thumbnails

Google also uses a thumbnail META tag to present small images next to its search results from your site.

<meta name="thumbnail" content="http://www.YourSite.com/image.jpg" />

Sunday, February 26, 2012

How to add a Pinterest button to your web site

Pinterest is all the rage right now, and of course they have their own sharing button!

If you don't want to use their preferred code (or if you don't want to put their JavaScript on your site), you can also create a simple link using this format:

http://pinterest.com/pin/create/button/?url=PageURL&media=ImageURL&description=Optional+Description

  • url is your HMTL page's link (not the image, but the page it's on)
  • media is the URL of the image you want people to share
  • description is optional text you can include so people don't have to write their own

If you want to put that in a pop-up, just use this link to let people click a little Pinterest icon:

<a href="" onclick="window.open('http://pinterest.com/pin/create/button/?url=PageURL&media=ImageURL&description=Optional+Description', 'pinterest', 'toolbar=0, resizable=1, status=0, width=626, height=430');return(false);"><img src="http://passets-cdn.pinterest.com/images/about/small-p-button.png" width="16" height="16"></a>