SEO - Inform Social Networks

Improve your website's visibility in social networks

Open Graph is a vocabulary created by Facebook to support rich previews within social media posts. Rich previews encourage more sharing, which is usually one of the goals of posting.

The scope of Open Graph is very narrow by design. It defines core 10 properties that can be added to a web page's metadata (e.g., title, url, image, description, video, etc.) along with a bunch of optional structured properties (e.g., width, height).

These properties are recognized on Facebook, LinkedIn, Twitter and other social networks. When present, they allow the network to nicely display an image, title, description and URL within a post linking to your web page.

Some examples of rich previews are included below.

Copy files from a sample

The easiest way to get started is to reuse some sample files. Tag has an Open Graph sample that has what you need.

Copy the files into a working folder using the big arrow tool.

Samples app with the Open Graph sample selected
Form containing Open Graph properties for a web page

Enter data

The sample files include a demo data file that you can open right away.

The automatically generated form includes all Open Graph properties for a single web page.

Generate metadata

On the Generate page an export menu provides options for exporting Open Graph metadata.

Selecting this menu item will open a file save dialog so you can save a stub HTML document. This document has no content, but does have the Open Graph metadata which can be copied to a real web page.

Export menu for demo data file that supports Open Graph
Open Graph HTML metadata viewed in a text editor

View HTML metadata

If you open the saved HTML file using a text editor, you can see the metadata tags within the html/head element.

This file should be sufficient for whichever tool or team member is responsible for publishing your website.

You can then repeat this process for every web page on your website that you want to link to from social media.

The goal of adding Open Graph metadata to your website is to make links to your web pages look great in social media posts.

You don't have any control over format and layout. That is up to the host platform and is subject to change over time. All you can do is provide as much metadata as you can, and know that you will get the same result as anyone.

Twitter posts

This is a Tweet (May 2021) that linked to a page which included Open Graph metadata.

Example of a rich Twitter post

LinkedIn posts

This is a LinkedIn post (June 2021) that linked to a page which included Open Graph metadata.

Example of a rich LinkedIn post

Facebook posts

This is a Facebook post (August 2021) that linked to a page which included Open Graph metadata.

Example of a rich Facebook post