search
Carter Cole LinkedInCarters Twitter PageCarter Cole on Facebook Carter Coles RSS

Monday, December 21, 2009

Optimizing for Facebook Share with Cloaking (but its good cloaking)

Social media sites have made it easy for the everyday user to share content and going viral is now the name of the game... as a SEO guy i was wanting to optimize my CTR for my Facebook links the same way I engineer the text in tweets to increase the likelihood a user will interact... I quickly found Facebook's useful article about what tags they use to generate the links users share and quickly whip something up and give it a test...


heres the code:
<head>
<title>Carter Tomorrow Fund Donations</title>
<meta name="title" content="Help Give to the Carter Tomorrow Fund" /> 
<meta name="description" content="Show your support and help out with a small gift" /> 
<link rel="image_src" href="http://cartercole.com/images/exp.png" />

and get this result:

Notice how i have overridden the default title, description and image Facebook would share for this document... this is very neat in itself :) it can help us get our shared links noticed more and makes sure the user doesn't use wrong image on the page they are sharing. But it does have one disadvantage :( we have to live with these meta titles and descriptions for the rest of our users(not cool) so we employ a trick known as cloaking. Cloaking is usually referring to showing different content to search engines than regular users and is frowned upon but this type of cloaking is good cloaking because it HELPS the user. We will cloak only these special tags in the head to show when the Facebook's UA [facebookexternalhit] requests the page and show our other meta tags(the ones optimized for SEO instead of social media) to everyone else.

Here's both flavors of the code:

ASP

<head>
<%if(instr(Request.ServerVariables("http_user_agent"),"facebookexternalhit") > 0) then
'facebook%>
<meta name="title" content="Custom Facebook title for share link" /> 
<meta name="description" content="Description of link Facebook uses" /> 
<link rel="image_src" href="http://site.com/betterimageforpage.png" />
<%else%>
<meta name="title" content="Different title than Facebook sees" /> 
<meta name="description" content="Whatever description you want search engines to see" /> 
<%end if%>
And the other version:

PHP

<head>
<?if (strrpos($_SERVER['HTTP_USER_AGENT'], "facebookexternalhit") === false){
//not facebook?>
<meta name="title" content="Different title than Facebook sees" /> 
<meta name="description" content="Whatever description you want search engines to see" /> 
<?}else{?>
<meta name="title" content="Custom Facebook title for share link" /> 
<meta name="description" content="Description of link Facebook uses" /> 
<link rel="image_src" href="http://site.com/betterimageforpage.png" />
<?}?>
this code will show the custom social media text to Facebook and give everyone else the correct meta title and description... if you have any questions get me on twitter im @cartercole
Hope it helps and have a great day / night / whenever you happen to be reading this

18 remarks:

Post a Comment

Link to this post if you found it usefull

Optimizing for Facebook Share with Cloaking (but its good cloaking)