Optimizing your site for Facebook

Published: Wednesday, November 29, 1995

Updated: Tuesday, November 29, 2011 15:11

If you're interested in taking an extra step to better integrate your site with Facebook and other social media site, let us introduce you to Open Graph tags. Facebook created "Open Graph Protocol" - a series of meta tags - to help websites get more distribution and engagement across Facebook. When someone "likes" your website or article on Facebook, certain information is automatically pulled in from your site: Title, thumbnail, URL and a description. Facebook will first look for Open Graph tags to fill in that information, but if it does not find those, it takes its best guess from the content on your site. If you want to cut out more of the guesswork, and customize some of these settings you can do so by adding a few specific meta tags to your site.

College Publisher auto-generates nearly all of the open graph tags for your site and article pages. Meta tags for your site title, content type, URL, language and a description of your content are already produced for your homepage and article pages. This leaves just one optional Open Graph tag to fill in: the thumbnail image.

OG Thumbnail Image
The OG image tag allows you to customize the thumbnail that Facebook pulls in when a user "Likes" your site or article. We recommend creating a square version of your logo (at least 50x50 pixels) to be pulled in as a thumbnail on Facebook. Since Open Graph is a type of meta tag, it should be placed into an HTML element in the "Header" section of your web site. Follow these easy steps to create your site thumbnail:

1. Upload the thumbnail you would like to use
2. Create an HTML element in the Header section of your web site
3. Paste in the OG image tag: <meta property="og:image" content="http://yoursite.com/image.jpg"/>
4. Change the http://yoursite.com/image.jpg to the actual URL of the thumbnail you uploaded
5. Save your HTML element

Facebook may take some time to re-index your page and start pulling in the new thumbnail image for your site, so be patient. If you are not comfortable creating an HTML element or inserting the image tag, please contact our support team.

Recommended: Articles that may interest you