Social Media: How To Customize Preview Images and Descriptions For Your Website

Social media has become an essential marketing channel for companies, especially when 100 billion+ messages are shared every day on Facebook. When you share a website link on Facebook, it appears with an image and brief description. The image and description can be customized, and becomes an opportunity for you to optimize your content for social sharing.

What is an Open Graph Tag Markup?

Open Graph tags allows the content creator to manage and optimize how the content appears on Facebook.

The Facebook Crawler uses internal heuristics to make a best guess about the title, description, and preview image for your content. Designate this info explicitly with Open Graph tags to ensure the highest quality posts on Facebook.

More details on Open Graph Markup can be found on Facebook’s Developer Documentation.

How to Check My Open Graph Tags?

A free tool called “Sharing Debugger” is available to logged-in users to enter in their URL to see the information that is used when its shared on Facebook.

facebook sharing debugger
(Facebook Sharing Debugger)

The Sharing Debugger allows you to see the information to make sure there are no errors when crawling your page. If you see an error, you can quickly update any incorrect tags on your website page, and click “scrape again” to review the changes in real time.

Adding Open Graph Tags

Here are examples of Open Graph tags to insert into the <head> section of your website page. This requires basic knowledge of HTML coding. Using Open Graph tags, you can define the image, title, description, and other details to your page when sharing your website.

title

The title of your article without any branding such as your site name.

<meta property="og:title" content="Your article title that is 50-60 characters in length."/>

description

A brief description of the content, usually between 2 and 4 sentences. This will displayed below the title of the post on Facebook.

<meta property="og:description" content="Description of URL that is about 200-300 characters in length."/>

image

The URL of the image that appears when someone shares the content to Facebook.

<meta property="og:image" content="image url here">

url

The URL of your website page.

<meta property="og:url" content="http://yourwebsite.com/">

type

The type of media of your content. This tag impacts how your content shows up in News Feed. If you don’t specify a type, the default is website. Each URL should be a single object, so multiple og:type values are not possible.

<meta property="og:type" content="blog"/>

WordPress Plug-In for Open Graph Tags

If your website is built with WordPress, you can use a free SEO plug-in like Yoast to help you quickly add/update your tags without the need to dive into modifying the code.

Note: Yoast’s premium version has a feature allows you to preview the image, title, and description of the tag. If you don’t want to pay, Facebook’s free Sharing Debugger is the way to go (and provides for details too).

The Benefits of Open Graph Tags

By using Open Graph tags, you gain the ability to control how your website URLs appear on social platforms. Taking the time to invest in optimizing these tags allows you to share links and customize images and descriptions as part of your marketing strategy to increase social engagement and website visits.

Leave a Comment