Wednesday, December 04, 2013

Getting Your Site to Display Properly on Facebook

Facebook has special tags that you can add to the HTML of your website that will let you control how it looks when somebody shares your site on Facebook.  These are called "Open Graph" tags.  If you don't have Open Graph tags, Facebook will just pull a random picture from your website, or let you choose between several on your page (not always the one you want).

Here are some Open Graph Meta Tags you can use to make sure your site gets displayed properly.  Add these somewhere between HEAD and /HEAD section of your page's HTML code:

Click to enlarge.  Sorry you can't copy and paste... it wouldn't let me add the code to the blog post.

***NOTE***  Your image has to be at least 200x200 pixels or Facebook won't pick it up and will revert to a default image from your page.

Add these to your Meta Tags and then type your link into your status update box, and see if it displays properly.  Facebook will cache everything, which means if you change those OG tags above, it won't recognize it.

If you need Facebook to update your site's Open Graph information, go to this link and type in your URL:

https://developers.facebook.com/tools/debug


It will update their info and you can keep doing that until you've got it just like you want it.

~*Cheers*~

No comments: