Getting the full picture with Open Graph

As a social media manager, some of my responsibilities include creating, scheduling and posting content for our clients, however, posting something isn’t always as straightforward as it could be.

It sounds simple, right? You find the link that you want to share, you copy it and paste it in the “write something…” section on Facebook. The site will automatically pull through the image that appears in the article or news story you want to share, along with its title and the first paragraph, meaning you just need to write something to accompany your post.

Well… it’s often not that easy! If the link you want to share does not come from a web page that includes Open Graph or Twitter Card tags, then it might not display correctly when you try to post it even if you use Facebook debugger. Why is this?

I spoke to Caroline, digital designer and developer at Harris, and she introduced me to Open Graph tags. She explained that meta tags live in the HTML head of a webpage and basically give Facebook, LinkedIn and other social media platforms the information needed to produce a rich object. Twitter also has its own set of tags to generate a Twitter Card. If a website does not support them, then the link won’t work properly when shared in other platforms.

Example of Open Graph tags:

<meta property="og:site_name" content="HARRIS" />
<meta property="og:type" content="article" />
<meta property="og:title" content="The page/post title" />
<meta property="og:description" content="The page/post description" />
<meta property="og:url" content="page URL" />
<meta property="og:image" content="URL of image to use" />

 

Example of Twitter card tags:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="The page/post description" />
<meta name="twitter:title" content="The page/post title" />
<meta name="twitter:site" content="@harris_creative" />
<meta name="twitter:image" content="URL of image to use" />
<meta name="twitter:creator" content="@harris_creative" />

 

Control the content social media posts show

To control the content that is used as a rich object when sharing on social media, it’s important to have the above meta tags on the web page that is being linked to. If these tags aren’t there, you run the risk of a random, unrelated image from elsewhere on the page being used which might not work as well, or a text description that isn’t as punchy.

It’s just another example of how social media and web development need to work together to ensure that the information flow is as simple and effective as possible.