Josh's Web Design Tips

Open-Graph

Facebook Open Graph Example

Facebook Open Graph.

LinkedIn Open Graph Example

LinkedIn Open Graph.

Introduced in 2010 by Facebook, the Open Graph Protocol is a powerful tool that can be a huge advantage for you as a developer. The open graph protocol allows you to dictate what is shown when someone shares your page on social media.

Pending on how you are building your site, whether it be by hard code or using a CMS, the open graph is fairly simple to use. There are four lines of code that are required if using the protocol, but pending on your site, you can add more as well.

To use it, simply paste these four lines of code in the head section and adjust to your site. Here's an example of what it looks like for this page:

<meta property="og:title" content="Open Graph | Josh's Web Design Tips" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://joshbaumhardt.com/webdesigntips/open_graph" />
<meta property="og:image" content="images/opengraph1.PNG" />

For more on the Open Graph Protocol, check out these articles. Last stop, file naming!