Facebook Open Graph Tags
This page is about how to write open graph tags for customizing the display on Facebook when the page's URL is posted. Notice that there is no image on this page about Facebook nor an aluminium garage door - but yet when you post this URL in a Facebook comment, you will see an image of an aluminum garage door appear. This is because I have defined an image to be displayed on Facebook using the "og tag" - aka Open Graph Tag.
Web Developers: The image should be at least 600px wide! It's best to use a square image in any of the usually supported image forms (JPG, PNG, etc.)Properties to add to your head tag:
<meta property="fb:app_id" content="1928075000815081" /> <meta property="og:url" content="http://www.campsitecoders.com/FacebookopenGraphTags.html" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="Campsite Coders" /> <meta property="og:title" content="Working with Facebook Open Graph META Tags" /> <meta property="og:image" content="og/aluminum-garage-door-fb.jpg" /> <meta property="og:description" content="Learn how to easily write code for customization and meta tagging Facebook posts" />
Below is an image on this web page that was created with a regular html img tag. What you will notice is that if you copy/paste this web page's URL in a Facebook comment, this large chalkboard image will not be displayed. Instead the image that I have defined in the head tag for the og:image tag is what will be posted on Facebook. Give it a try.
Step 1: TEST YOUR CODE HERE:
Step 2: SHARE on Facebook to see the image, title and description that appear when you post the url in your newsfeed.