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 and Video 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.
An example of a social media teaser created with Akamai Image and Video 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 and Video 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)
Implementation Steps
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 and Video 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:
Now let’s do a step-by-step walkthrough so you can see in more detail how these Image and Video Manager transformations are applied via the Akamai Control Center UI or the Image and Video 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: Center
This example uses variables for the key parameters (width and height) and initializes them with sensible default values:
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 and Video 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.
We’ve added the rectangle, so now let’s add the logo as a png image:
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.
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:
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 and Video 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:
Summary
Creating engaging interactions on social media with the help of Akamai Image and Video 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.