Chow-Bryant
  • Home
  • About
  • Services
    • Digital Marketing Audit
    • Analytics and Tracking
      • Business Intelligence
      • Conversion Rate Optimization
      • Custom Analytics
    • Digital Media and Advertising
      • Media Buying
      • Media Planning
    • Search Marketing
      • Pay Per Click Advertising
    • Social Media Marketing
      • Organic Social Media Marketing
      • Paid Social Media Advertising
      • Live Stream Consulting
  • Case Studies
  • Contact
  • Tools
    • Live Streaming Calculator
    • Mobile Bid Adjustment Calculator
  • Blog
  • Menu Menu
Advertising & Media Articles
You are here: Home1 / Advertising & Media Articles2 / Search Marketing3 / How to Add Open Graph Data to Your Site
Bryant
Search Marketing, Social Media Marketing

How to Add Open Graph Data to Your Site

Open Graph Data

What is The Open Graph Protocol?

The Open Graph Protocol is a lot like Twitter Card Data and Schema markup. Basically, the Open Graph Protocol is a collection of meta tags that allow a website to become a rich object in Facebook’s social graph. As a result, a website with Open Graph data on it has the same functionality as any other object on Facebook like profile links and stream updates.

Resource Description Framework in attributes: RDFa

When Facebook developed its social graph, the company based Open Graph on RDFa or “Resource Description Framework in attributes.” RDFa was developed by W3C and is a set of extension for XHTML that embed subject-predicate-object expressions. This approach is based on Classical Conceptual Modeling, and basically defines objects like this:

  • Subject – the resource, itself. In this case a website.
  • Predicate – the predicates details the relationship between the Subject and Object(s). In the case of a website this would be “has.”
  • Object – the objects are all attributes or aspects about the resource. For a website, these are things like the title, description, and url.

Therefore, in the statement “Chow-Bryant.com has a title and url,” the subject is “Chow-Bryant.com,” the predicate is “has” and the objects are a “title,” and “url.” If you want to learn more about RDFa, check out W3C’s 3rd edition of its RDFa primer.

Why Facebook Open Graph Data is Important?

The benefits of using Open Graph data are similar to those for Twitter Cards. When you, or another follower, share your content on Facebook the post object will automatically have a thumbnail, title, and description. This makes your content more shareable by increasing the likelihood that your audience notices your content in their feeds.

Open Graph Data

This is what Open Graph Data looks like in Facebook’s news feed.

Expanded Character Limits

In addition to making content more shareable, Open Graph data also provides additional space to describe your article, image, or video. If you want to really fine tune your Open Graph data, then you want to make sure your title and description are the right length. For Open Graph, the character limit for the title tag is 40 characters or less. That said, the description varies depending on whether or not the object is shared in the news feed, ticker, or in a comment thread. If you want to play it safe, try to descriptions to 110 characters or less.

Facebook Analytics

Facebook also offers a few analytics services to page owners that go beyond page insights. Page owners can create a Facebook App to track how followers interact with your website and mobile app. In order to utilize these features a site owner must place their Facebook App ID in their Open Graph data.

Will Open Graph Increase my Rankings in Search?

Like Twitter Cards, Open Graph data will not do anything for your rankings in organic search. Open Graph data only helps your social media efforts on Facebook, but the benefits are well worth the time.

How to Create Open Graph Data

Creating Open Graph data is fairly simple, and doesn’t require a lot of formal coding knowledge. For the most part, you can copy/paste the information in the “content” to create your own tags.

Markup Tags

For this article I’m going to put together Open Graph data for the Chow-Bryant homepage. Since this is a website the following four tags are required:

  • og:type – this declares the type of object. In this case the object type is “website.”
  • og:title – this is the title of the object. Try to keep this field down to 40 characters or less so your titles are cutoff on Facebook.
  • og:url – this is the URL for the website object. In this case it will be the homepage.
  • og:image – this is for the object’s thumbnail image. This image can be either square, or a 300 x 400 pixel rectangle.

In addition to the required tags for a website, there are a few optional tags that feed additional information into Facebook’s social graph.

  • og:site_name – this declares the website name for your object. This is typically just the company name.
  • og:description – a one to two sentence description. The character limit varies from between 110 and 300 characters depending on where the object is share.
  • fb:app_id – ID for Facebook App.
  • og:locale – this declares language and location for the object.
  • fb:admins – Facebook admin IDs
  • og:image:secure_url – this field will likely be deprecated soon, but it declares a secure URL for the attached image if the original one is non-secured.
  • og:image:type – declares the file extension for the thumbnail image.
  • og:image:width – sets the width for the thumbnail image.
  • og:image:height – sets the height for the thumbnail image.

Example Open Graph Data

Now that we have the right information and know which tags we need, it’s just a matter of creating the tags. This is like any other meta tag and follows a “name” and “content” convention. For example, here’s what the Open Graph data looks like for Chow-Bryant using all of the optional tags:

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Chow-Bryant | Digital Media & Advertising in Houston, Texas" />
<meta property="og:description" content="Chow-Bryant is a digital media and advertising agency in Houston, TX" />
<meta property="og:url" content="https://www.chow-bryant.com/" />
<meta property="og:site_name" content="Chow-Bryant" />
<meta property="fb:app_id" content="XXXXXXXXXXXXXXXX" />
<meta property="fb:admins" content="XXXXXXXXXX" />
<meta property="og:image" content="https://www.chow-bryant.com/wp-content/uploads/2015/02/chow-bryant-logo-300-300.jpg" />
<meta property="og:image:secure_url" content="https://www.chow-bryant.com/wp-content/uploads/2015/02/chow-bryant-logo-300-300.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />

Note: you may notice that the App ID and Facebook Admin ID contain just X’s. This is because, while anyone could find these IDs by looking at the source code, it’s best not to publish these in a machine readable form.

Where to Place Open Graph Data

With the Open Graph data complete, it’s time to place this snippet on our site. To accomplish this, just copy and paste the snippet in the HEAD section of the page right before the Twitter Card data. That’s it!

Checking Your Work

After you add Open Graph data to your site, make sure you check your work for errors. Try Facebook’s debugger tool to make sure Open Graph data is properly placed on your site and free of errors.

January 3, 2017/by Bryant
Tags: OpenGraph Metadata, social media strategy, Structured Data Markup Tutorials
Share this entry
  • Share on Facebook
  • Share on Twitter
  • Share on WhatsApp
  • Share on LinkedIn
https://www.chow-bryant.com/wp-content/uploads/2017/01/open-graph-data-code-cb.jpg 300 400 Bryant https://www.chow-bryant.com/wp-content/uploads/2016/10/cb-header-logo-3-300x66.png Bryant2017-01-03 21:44:292017-04-18 20:56:06How to Add Open Graph Data to Your Site
You might also like
Equifax LogoEquifax and the Wrath of Forced Opt-Ins
Twitter Card DataHow to Add Twitter Card Data to Your Website
The Digital EstatePlan & Manage Your Digital Estate
Twitch LogoA Beginner’s Technical Guide to Streaming on Twitch
Schema Markup for Chow-BryantAdd Schema Markup to Your Website

Recent Articles

  • COVID-19 Update for March 3, 2021March 3, 2021 - 2:12 pm
  • negative keyword list of covid-19 termsHow Every PPC Manager Can Help in The Coronavirus PandemicMarch 28, 2020 - 12:44 pm
  • To Master Marketing, Play Dungeons & DragonsAugust 15, 2019 - 5:25 pm
  • Use the W5 to Communicate Marketing GoalsApril 25, 2019 - 2:29 pm
  • Eagle Ford Map Overlay With Distribution Network for GeotargetingGeotargeting Ads for Vague LocationsJune 13, 2018 - 9:12 pm

Advertising Services

  • Analytics and Tracking
  • Digital Media and Advertising
  • Search Marketing
  • Pay Per Click Advertising
  • Organic Social Media Marketing
  • Paid Social Media Advertising
  • Live Stream Consulting

Categories

  • Analytics & Tracking
  • Digital Marketing Audit
  • Digital Media & Advertising
  • Display Advertising
  • Local Search Engine Optimization
  • Media Buying
  • Media Planning
  • Native Advertising
  • News
  • Organic Social Media Management
  • Programmatic Advertising
  • Search Engine Marketing (PPC)
  • Search Engine Optimization
  • Search Marketing
  • Social Media Marketing
  • Video & Live Streaming
  • Website Data Analysis
  • Website Security

Latest Articles

  • COVID-19 Update for March 3, 2021
  • How Every PPC Manager Can Help in The Coronavirus Pandemic
  • To Master Marketing, Play Dungeons & Dragons

Services

  • Analytics and Tracking
  • Digital Media and Advertising
  • Pay Per Click Advertising
  • Paid Social Media Advertising
  • Digital Marketing Audit

Contact Us

Chow-Bryant
1104 W Tri Oaks Ln #128
Houston, TX 77043

Tel: (713) 496-2061
Price Range: $$$
Chow-Bryant Logo
Google Maps
© Copyright 2016-2023 | Chow-Bryant
  • Facebook
  • LinkedIn
  • Twitter
  • Instagram
  • Youtube
How to Add Twitter Card Data to Your WebsiteTwitter Card DataA bad diagram of a houseDigital Media Targeting for Beginners
Scroll to top

This site uses cookies. By continuing to browse the site, you are agreeing to our use of cookies.

Learn moreOK

Cookie and Privacy Settings



How we use cookies

We may request cookies to be set on your device. We use cookies to let us know when you visit our websites, how you interact with us, to enrich your user experience, and to customize your relationship with our website.

Click on the different category headings to find out more. You can also change some of your preferences. Note that blocking some types of cookies may impact your experience on our websites and the services we are able to offer.

Essential Website Cookies

These cookies are strictly necessary to provide you with services available through our website and to use some of its features.

Because these cookies are strictly necessary to deliver the website, refusing them will have impact how our site functions. You always can block or delete cookies by changing your browser settings and force blocking all cookies on this website. But this will always prompt you to accept/refuse cookies when revisiting our site.

We fully respect if you want to refuse cookies but to avoid asking you again and again kindly allow us to store a cookie for that. You are free to opt out any time or opt in for other cookies to get a better experience. If you refuse cookies we will remove all set cookies in our domain.

We provide you with a list of stored cookies on your computer in our domain so you can check what we stored. Due to security reasons we are not able to show or modify cookies from other domains. You can check these in your browser security settings.

Other external services

We also use different external services like Google Webfonts, Google Maps, and external Video providers. Since these providers may collect personal data like your IP address we allow you to block them here. Please be aware that this might heavily reduce the functionality and appearance of our site. Changes will take effect once you reload the page.

Google Webfont Settings:

Google Map Settings:

Google reCaptcha Settings:

Vimeo and Youtube video embeds:

Privacy Policy

You can read about our cookies and privacy settings in detail on our Privacy Policy Page.

Privacy Policy
Accept settingsHide notification only
Open Message Bar