Open Graph Support
The Open Graph protocol offers an opportunity for your web presence to be reflected in the best light on social media. By adding a few lines of Meta tags to your webpages, you can control your image and bring out your best.
Websites and Social Media
A web presence can be a complete array of textual content, user interactions, images, videos, database information, and other forms of communication, but along with the most powerful websites, there is also the usefulness of social media. The interaction between the website and social media can be a little rough if left to chance, but the open graph protocol can bridge the gap.
What Is Open Graph?
Open graph is a set of meta tags developed to provide social media platforms with some guidelines when accessing your website for information. By utilizing the open graph tags, a web designer can offer the social media site the specific title, image, type of site, and more, directing the site to the exact information to use. This generates a specific look to your presence on the social media platform, instead of a randomly generated one that may not represent you well.
Basic Syntax and Usage
The four basic parameters that are presented in the meta tags are the title to use, the type of webpage that it is, an image to display, and the URL of the page. As an example:
<meta property="og:title" content="page title here" />
<meta property="og:type" content="website" />
<meta property="og:image" content="/pathtopicture/picturename.jpg" />
<meta property="og:url" content="https://www.mydomainname.com" />
This declares the current page URL, the title of the page to use, that it is a standard website, and an image to present with the data.
Additional Controls
There are other open graph controls that can help shape your presence on the social media platform.
The page description tag allows you to specify the text to use to describe your page:
<meta property="og:description" content="The description of your page goes here." />
You can also provide the general name of the website:
<meta property="og:site_name" content="The overall name of your website." />
If you prefer that the social media platform post a video rather than an image, use the following tag:
<meta property="og:video" content="The URL link to the video you would like displayed." />
By customizing these open graph meta tags, a web designer can control the information that social media sites post when accessing your webpage for information. They say that image is everything, and your online presence is no exception.
Platform Specifics
Although the open graph protocol is widely accepted, there are some unique differences on various social media platforms. By learning those differences, a web developer can more effectively harness the power of social media to create a compelling, powerful presentation of your website to the world.
1221 Brickell Avenue, Suite 900
Miami, FL 33131