Facebook Open Graph

 Facebook Open Graph

Meaning :

Open Graph is a technology first introduced by Facebook in 2010 that allows integration between Facebook and its user data and a website. By integrating Open Graph meta tags into your page's content, you can identify which elements of your page you want to show when someone share's your page.

For example, you could use the og:image tag to specify what image you want Facebook to use when your page is shared. By specifying Open Graph information, Facebook doesn't have to guess what information to use when your page is shared.

Example of Open Graph meta tags

If you are familiar with HTML meta tags , you'll immediately notice that the only real difference between meta tags and Open Graph tags is the available property attributes.

Overview of Open Graph meta tags

Below is a listing of the top Open Graph meta tag properties that can be used with a brief description. We've tried to list each of these by the level of importance, and it is important to realize not all of these tags are required, but can help with properly identifying parts of your page.

og:title - The title of the page.

og:image - The image you want to use when the page is shared. Using the og:image property is helpful if your page has several pictures and you want a particular image to be used.

Note: Facebook does not use any image smaller than a width of 300px and height of 200px.

og:description - The description of the page.

og:type - The type of the object or page you are describing. Some of the types that could be used include article, music.album, video.movie, and website.

og:url - The canonical URL of the object or page.

Example of Open Graph meta tags

<meta property="og:type" content="company"/>
<meta property="og:site_name" content="your website name"/>
<meta property="og:title" content="seo title with main focus keyword"/>
<meta property="og:url" content=”webpage address”

<meta property=”og:description”content=”enter your webpage description with main focus keyword”/>

<meta property=”og:image” content=”enter your webpage image address”

Add this html code format to your web page head section

Note : Use this format under head section

After adding upload your web page to server and copy your web page url and post your web page link to facebook

Go tothis url

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

it is facebook debugger tool

facebook debug steps

      search for facebook debug tool

      go to this link- https://developers.facebook.com/tools/debug/

      paste link

      click on debug

It will show results like this

Og: url

Og: type

Og: title

Og:description

Og:image

Og:image:alt