OGP Basics

Open Graph Protocol (OGP) is a set of instructions intended for highlighting the title, description, URL and the image of a website you are sharing via Facebook.

OGP was created in 2010 by Facebook engineers and has been used since solely and exclusively to control the connection of content and its sharing on this social network.

Main purpose of Open Graph protocol

The main purpose of OGP is to integrate the highlighted content and show it on Facebook, as well as to control its appearance, that is, how the highlighted content will be shown.

With the help of OGP, Facebook downloads titles (og:title), descriptions (og:description), URL address (og:rl), images (og:image) and image dimensions (og:image:width, og:image:height), languages (og:locale), object types (og:type), website’s names (og:site_name), Facebook profile’s administrator’s numbers (og:admin), and the number of Facebook application created by the administrator (fb:app_id) of the website, webpage, blog or blog article that is to be downloaded during that sharing process (URL share) or liking of the page (Page like).

How to integrate OGP into a webpage

You can integrate OGP into a webpage by adding meta element into its <head>. In order to integrate OGP, you need to insert the prefix and define attribute by following this simple 9-step tutorial:

  1. First, you must highlight and add prefix into meta element’s <head> and highlight that OGP is present in page code:
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">


  2. Then, you need to add website or webpage title:
    <meta property="og:title" content="Website title" />


  3. Add the description of the website (optimally, up to 156 characters including spaces)
    <meta property="og:description" content="Website description" />


  4. Insert the tag with URL address of the page:
    <meta property="og:url" content="Website URL address" />


  5. We need to highlight and determine URL of the image which is to be used while sharing and liking the Facebook page:
    <meta property="og:image" content="Website image URL" />


  6. Write dimensions of the image from the fifth step:
    <meta property="og:image:width" content="Website image width" />
    <meta property="og:image:height" content="Website image height" />


  7. Write the name of the website, blog, natural person, or company:
    <meta property="og:site_name" content="Website name" />


  8. Add and determine object type by choosing the tag which best describes whether it is a website, personal portfolio, author, book, restaurant, blog or blog article, etc:
    <meta property="og:type" content="Website type" />

    Currently available objects are the following: (website, article, book, books.author, books.genre, business.business, fitness.course, music.album, music.musician, music.playlist, music.radio_station, music.song, object, place, product, product.group, product.item, profile, quick_election.election, restaurant, restaurant.menu, restaurant.menu_item, restaurant.menu_section, video.episode, video.movie, video.tv_show, video.other).
    *There may be some changes in the existing or adding new object attributes due to constant development of the Open Graph Protocol.



  9. The last, but not the least, is adding the ID of a private Facebook profile’s administrator number from which the Facebook page of the company was created:
    <meta property="fb:admins" content="Facebook admin Id number" />

    or adding the ID number of the Facebook application which was created from the administrator’s Facebook account:
    <meta property="fb:app_id" content="Facebook application Id number" />

Facebook website snippets

Here is an example of how a page shared via Facebook looks like:


Connecting the website with Facebook profile via #OpenGraph Protocol

Posted by PopArt STUDIO on Friday, September 11, 2015



Here is an example of how Open Graph Protocol looks like in the code of the page you are currently looking at:

<head lang="en" prefix="og: http://ogp.me/ns#">
<meta property="og:title" content="What Is Open Graph Protocol (OGP)?" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.popwebdesign.net/what-is-ogp.html" />
<meta property="og:image" content="https://www.popwebdesign.net/img/open-graph-protocol.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="PopArt Studio" />
<meta property="fb:admins" content="100000505383935" />
<meta property="og:description" content="Open Graph Protocol (OGP) is a set of instructions
intended for highlighting the title, description, URL and the image of a website you are sharing via Facebook." />




Read more:

External links and sources:

  • The official OGP page where you can find detailed instruction for the Open Graph Protocol
PopZnak

Good day. How we can help you?

back btn

Order our service

This field is required
Web design Web development Web application Internet marketing Copywriting Graphic design This field is required
This field is required

back btn

Join us!

This field is required
UI/UX designer Community Manager Front-end Developer Back-end Developer Graphic Designer Copywriter SEO This field is required
Upload CV/Portfolio
This field is required

back btn

We are here for you.

This field is required
This field is required