Blog

How-To: Optimizing Social Media Images With Image Manager and og:image

September 24, 2019 · by Tim Vereecke ·
Categories:

When your web page is shared on social networks, that can be a valuable opportunity for your organization, and you’ll definitely want the best and most optimal visual elements of your page to come through for maximum impact. With a combination of Akamai Image Manager and the Open Graph og:image meta tag, you can do exactly that.

Introduction

Open Graph is a protocol that lets any web page become a rich, interactive object in social media, including newsfeeds on Facebook and Twitter, or even inside a Slack channel.

If you follow the steps in this blog post, you can create an attractive teaser (see example below) that appears each time your content is shared on social media.

example 1
An example of a social media teaser created with Akamai Image Manager and the Open Graph og:image meta tag

You’ll create these teasers by adding some basic metadata in the <head> section of your page. For example, below are the “og:*” HTML tags on the Akamai for DevOps page:

<meta property="og:title" content="DevOps | Akamai" />

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

<meta property="og:url" content="https://www.akamai.com/us/en/solutions/performance/devops.jsp" />

<meta property="og:description" content="Akamai for DevOps makes it seamless and easy for developers..." />

<meta property="og:image" content="https://www.akamai.com/images/akamai-dev-ops.jpg" />

The visual power of these teaser images can have a significant impact on the effectiveness of social media as a traffic source for your site. 

However, even before you add “og:*” tags, you should first make sure you have the optimal image to achieve the best result. Akamai Image Manager can help you do that in two ways:

  • Automatically optimized image delivery (e.g., auto-converting formats based on device, browser and/or OS)
  • A wide variety of available transformations (e.g., image cropping, grayscale, watermarks, and more)

Here’s how it works, using the image below as an example: Let’s say we want a 1200x628px cropped image which is ideal for both Facebook and Slack, as well as for Twitter cards of type summary_large_image. We also want a watermark logo (in this case, “Scalemates”) positioned at the bottom right and a contextual label with an additional keyword (in this case, it’s “1:24” which is the scale of the model car kit shown) on the bottom left. We'll also add a semi-transparent rectangle along the bottom to increase the contrast between the image and our watermark/text. And of course, all of this should work automatically and result in a high-quality variant in any device/OS/browser.

You can do all that quickly and easily with Image Manager transformations. Once the transformations are published on your site, you can turn the original image into a powerful teaser image by applying the policy: ?impolicy=og-image&label=1:24. Here’s what a teaser image with those transformations would look like when shared on Facebook:

example 2

Now let’s do a step-by-step walkthrough so you can see in more detail how these Image Manager transformations are applied via the Akamai Control Center UI or the Image Manager API to get the result you want.

Step 1: Dynamically optimize the dimensions

This is a straightforward transformation. First, do a resize with the following properties:

  • Width x Height: 1200 x 628px 
  • Aspect: Fill
  • Crop Gravity: Centerdynamically optimize

     

This example uses variables for the key parameters (width and height) and initializes them with good default values:

key parameters

Step 2: Add a watermark

To increase brand awareness, you can add a high-quality logo in the bottom right corner using the watermark transformation in Image Manager. 

Before adding the logo, let’s add a semi-transparent grey rectangle along the bottom of the image, also using the watermark transformation. This rectangle will make sure the contrast between the original image and the logo is high enough.

watermark 1watermark composite

We’ve added the rectangle, so now let’s add the logo as a png image:

watermark composite 2

Step 3: Add contextual label

In the lower-left corner, you’ll see some real estate where you can place a few keywords to emphasize the context of your shared content. These keywords are fetched dynamically from the query string called “label”, and a variety of font settings can be applied to style the text so that it matches your branding.

contextual label example

The query string “&label=Hot+item” controls the text to be added dynamically, and here’s how you specify the font, font size, color, and more:

contextual label screenshot

Step 4: Add the og:image meta tag

The last step to creating your teaser is to add the og:image meta tag in the <head> of your HTML, pointing to the base image, referencing your Image Manager policy, and including the text label of your choice.

<meta property="og:image" content="https://www.scalemates.com/img/631-pristine.jpg?impolicy=og-image&label=1:24">

Step 5 (optional): Customize for different platforms

Until now, we used one generic policy, and we’ve called that policy explicitly in the og:image meta tag. If you want specific designs for different social media platforms, then you’ll simply identify the social network based on their user-agent request header, and then apply your desired policy:

customizing for different platforms

Summary

Creating engaging interactions on social media with the help of Akamai Image Manager and the Open Graph og:image meta tag is a valuable way to drive more traffic to your website, and to make a stronger impression with each visitor. 

If you have further questions, your Akamai account manager is standing by to assist you.

Tim Vereecke is a web performance architect at Akamai Technologies.