{"id":42316,"date":"2016-11-24T12:23:33","date_gmt":"2016-11-24T06:53:33","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=42316"},"modified":"2016-11-24T12:44:20","modified_gmt":"2016-11-24T07:14:20","slug":"how-to-use-open-graph-meta-tags-for-facebook-sharing","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/how-to-use-open-graph-meta-tags-for-facebook-sharing\/","title":{"rendered":"How to Use Open Graph Meta Tags for Facebook Sharing"},"content":{"rendered":"

Open Graph<\/b> is a technology introduced by Facebook in <\/span>2010<\/b>\u00a0that enables integration between Facebook, user data and website. Facebook \u2018scrapes\u2019 the URL you are sharing and gets the information it displays from meta tags within the <head> section of the page.<\/span><\/p>\n

With an amalgamation of Open Graph Meta tags in your page\u2019s content, you can determine what parts of your page you want to show when someone shares your page. <\/span>The tags will have an effect on conversions and click through rates massively.<\/b><\/p>\n

MOST IMPORTANT META TAGS:<\/b><\/span><\/p>\n

1. og:title <\/b>The title of the content you are sharing.<\/span><\/p>\n

Example<\/b>: \u00a0<\/span><meta property=\u201dog:title\u201d content=\u201dProduct Engineering | Digital Transformation | TO THE NEW \u201d \/><\/i><\/b><\/p>\n

NOTE: <\/strong>There is no limit on the number of characters, but it\u2019s best to remain between 60 and 90. Also, if your title is longer than a hundred characters then Facebook will truncate it to 88 i.e only 88 characters are visible in open graph and on click a person can see the whole title<\/strong>.\u00a0<\/strong><\/p>\n

2. og:description<\/b>\u00a0It is few\u00a0lines of description of the content that usually\u00a0appears below the link title on Facebook.<\/span><\/p>\n

Example: <\/b><meta property=\u201dog:description\u201d content=\u201dA digital technology company that drives digital transformation and builds disruptive products by leveraging UX, cutting edge technologies and cloud \u201d \/><\/i><\/b><\/p>\n

NOTE: \u00a0<\/b>There is no restriction on the number of characters, however, it\u2019s best to use around 200 characters.<\/span><\/p>\n

3. og:image <\/b>\u00a0It is the image that represents your content within the graph when it gets shared.<\/span><\/p>\n

Example: \u00a0<\/b>\u00a0<\/span><meta name=\u201dog:image\u201d content=\u201dhttp:\/\/tothenew.com \/image-name.jpg\u201d \/><\/i><\/b><\/p>\n

Note: <\/b><\/p>\n

    \n
  1. og:image property is useful if your page has several images and you want a specific image with your content. <\/b><\/li>\n
  2. The image should not be smaller than 300px *200px and also the recommended resolution for an og:image is 1200px * 627px.<\/span><\/li>\n
  3. If og:image is not set then\u00a0Facebook will show anything stupid like unwanted content or ad banner scraped from the page, or nothing. We positively don\u2019t need that!<\/li>\n
  4. You can also change image attributes by adding below meta tagsog:image:typeog:image:widthog:image:height<\/li>\n
  5. <\/b>The image which is employed \u00a0in og:image can be totally different what you\u2019ve got on your page.<\/span><\/li>\n<\/ol>\n

    4. og:type <\/b>This is the type of object or page which you are sharing such as video, blog post, website etc. Also, depending on the type you specify, you may have to add more properties.<\/span><\/p>\n

    Example:<\/b> \u00a0<\/span><meta property=\u201dog:type\u201d content=\u201dwebsite\u201d \/><\/i><\/b><\/p>\n

    Note: <\/b>This tag is very important when your page has a ‘Like’ button and represents a true life object (like a book ). If you don\u2019t outline\u00a0any type, Facebook will browse it as \u201cwebsite\u201d by default.<\/span><\/p>\n

    For Example\u00a0<\/strong>If you define <\/span><meta property=\u201dog:type\u201d content=\u201dbusiness\u201d \/><\/i><\/b> then alternate properties like business type , name etc. are also required.<\/span><\/p>\n

    5. og:url <\/b>\u00a0The canonical URL of the content or page you are sharing.<\/span><\/p>\n

    Example: \u00a0<\/b><meta property=\u201dog:url\u201d content=\u201dhttp:\/\/www.yourdomain.com\u201d \/><\/i><\/b><\/p>\n

    Note:\u00a0<\/b>This tag is useful when you have more than one URL for the same content.<\/span><\/p>\n

    6. og:locale <\/b>This defines\u00a0the language of the content. It is in the format <\/span>language_TERRITORY.<\/b><\/p>\n

    Example: <\/b><meta property=\u201dog:url\u201d content=\u201den_US\u201d \/><\/i><\/b><\/p>\n

    Note: <\/b>By default it is <\/span>en_US <\/b>and it is not needed unless the language is not English or it is outside the United States.<\/span><\/p>\n

    ADDITIONAL META TAGS:<\/b><\/span><\/p>\n

      \n
    1. \u00a0og:site_name <\/b>If the content is an element of a large website, then the name should be displayed for the website.<\/span><\/li>\n<\/ol>\n

      Example: \u00a0<\/b><meta property=\u201dog:site_name\u201d content=\u201d<\/i><\/b> allmovie\u201d<\/i><\/b> \/><\/i><\/b><\/p>\n

        \n
      1. \u00a0og:video <\/b>It is\u00a0the URL of a video file that enhances the content.<\/span><\/li>\n<\/ol>\n

        Example: <\/b><meta property=\u201dog:video\u201d content=\u201d<\/i><\/b>https:\/\/www.youtube.com\/watch?v=3UMTtLlpaus\u201d<\/i><\/b> \/><\/i><\/b><\/p>\n

          \n
        1. \u00a0og:audio <\/b>It is the\u00a0URL of an audio file to accompany with your content.<\/span><\/li>\n<\/ol>\n

          Example:\u00a0<\/b><meta property=\u201dog:audio\u201d content=\u201d<\/i><\/b> http:\/\/your_audio.mp3\u201d<\/i><\/b> \/><\/i><\/b><\/p>\n

            \n
          1. \u00a0og:locale:alternate<\/b> It is an array of alternative locale where this page or content is available.<\/span><\/li>\n<\/ol>\n

            Example: <\/b><meta property=\u201dog:audio\u201d content=\u201d<\/i><\/b> http:\/\/your_audio.mp3\u201d<\/i><\/b> <\/i><\/b><\/p>\n

            SAMPLE SCENARIO GIVEN BELOW :<\/strong><\/span><\/p>\n

            og:title \u00a0<\/strong><meta property=\u201dog:title\u201d content=\u201dProduct Engineering | Digital Transformation | TO THE NEW \u201d \/><\/i><\/p>\n

            og:description<\/strong> <meta property=\u201dog:description\u201d content=\u201dA digital technology company that drives digital transformation and builds disruptive products by leveraging UX,cutting edge technologies and cloud \u201d \/><\/i><\/p>\n

            og:image<\/strong> \u00a0Not set<\/i><\/p>\n

            og:type<\/strong> \u00a0Not set<\/i><\/p>\n

            og:locale<\/strong> \u00a0<meta property=\u201dog:url\u201d content=\u201den_US\u201d \/><\/i><\/p>\n

            \"Screenshot<\/p>\n

            As og:image is not set for the http:\/\/www.tothenew.com<\/a>\u00a0 page that’s why it contains arrow (Refer highlighted section in above image) in the open graph with multiple images scraped from the page.<\/p>\n

            FACEBOOK DEBUGGER:<\/span><\/b><\/p>\n

            An Open graph debugger named <\/span>Facebook Debugger <\/b>https:\/\/developers.facebook.com\/tools\/debug\/<\/b><\/a> \u00a0<\/b>offered by Facebook enables developers to check their page and verify how it will look once shared on Facebook. By using this tool you can verify if your Open Graph is correctly detected or not and it also gives you suggestions and warning to repair what went wrong.<\/span><\/p>\n

            So from next time, to share your content or your website page on Facebook, add open graph meta tags\u00a0<\/strong>in your page’s HTML.<\/p>\n

            I hope you find this blog useful.<\/p>\n","protected":false},"excerpt":{"rendered":"

            Open Graph is a technology introduced by Facebook in 2010\u00a0that enables integration between Facebook, user data and website. Facebook \u2018scrapes\u2019 the URL you are sharing and gets the information it displays from meta tags within the <head> section of the page. With an amalgamation of Open Graph Meta tags in your page\u2019s content, you can […]<\/p>\n","protected":false},"author":1023,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":5},"categories":[3429,1],"tags":[258,4229,703,4196,4197,4198],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/42316"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1023"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=42316"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/42316\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=42316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=42316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=42316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}