What is Open Graph and Why is it Important to your Web Pages?
Social media is how many people share content on the Internet. Sites like Facebook, Twitter, and Instagram are ideal ways to share content from various websites to a broader audience. Brands and businesses may share content themselves, or they can benefit from social media users organically linking to their pages. However, social media posts won’t get as much attention if they are just raw hyperlinks. To present content properly, you need to implement Open Graph on your pages.
What is Open Graph?
Open Graph is a protocol developed by Facebook to improve how outside content is presented on social media. When a URL is shared on Facebook or other social media platforms, by default it would just be a clickable link. But since social media is visually-driven, that is less appealing, and modern web technologies are capable of automatically displaying a better representation of what’s on the page. This saves the work of designing each post to best reflect what the page will show.
A Facebook post that uses OpenGraph will give more information than just the URL. It will turn the page into an object that contains a title, description, and image formatted like other social media posts.
What is the benefit of Open Graph?
As established, social media thrives on visually appealing posts. Engagement with the audience is what leads to more social media shares and clicks. In contrast, unappealing posts that are just text and links may make social media viewers wary. They may not be immediately interested, and social media users may not want to go to another site, especially if they are browsing on a mobile app. If a social media post contains all the information already and is in an attractive format, then not only are viewers more likely to click, but brands can get their message out even if viewers don’t click.
For SEO purposes, social media shares are valuable even if they don’t directly lead to increased search rank. Getting your page title and description visible on social media is a similar success to getting them displayed effectively in search results with featured snippets.
Setting up Open Graph
Needless to say, you want to enable Open Graph on every page that you want to be shared on social media. This includes landing pages, blog posts, features pages, and more. Open Graph is enabled by putting special HTML meta tags. In the <meta property> tags of your headers, you can add properties including the following essential ones:
- “og:url” for the canonical URL of the page
- “og:title” for the title that will appear on social media
- “og:description” for the text description of between 2 and 4 sentences that appears on social media below the title.
- “og:image” for the image that appears. It should be the main image from the page or a representation of the page content. Follow Facebook’s best practices and remember that the Open Graph images appear as squares.
- “og:app_id” is vital for displaying analytics of all your linked pages on social media through Facebook Insights and other tools.
Other properties can be added to define the specifics of the image and graph. The “og:type” property is important for identifying what type of content is on the linked page, such as an article, movie, book, or audio content. You can include a secure HTTPS URL for video and audio content to be loaded through the post.
When implementing Open Graph for Facebook, you should create a Facebook page or Facebook application that is associated with your domain for analytics purposes. You can then apply your ID to the header of your pages. You can also test pages by putting the URL into the Sharing Debugger. Remember to add a Facebook Like button on the page as well for the best results.
There are several ways to quickly parse and add Open Graph data without needing to do so manually, such as the Facebook plugin for all WordPress sites, OpenGraph Ruby, and PyOpenGraph.
If you want your content to be shareable on social media, then you need to support Open Graph. Social media promotion and organic sharing work best when they integrate with the platform seamlessly. Check that your website supports Open Graph for all pages.