2.5 Personalising Open Graph Tags

Personalising Open Graph Tags

Written by AshLast update 3 years ago

What are open graph tags?

Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media. They're part of Facebook's Open Graph protocol and are also used by other social media sites, including LinkedIn and Twitter.

What that means is that when you share a personalised web link in a message in either LinkedIn, Twitter, or Facebook, if you manipulate the OG tags, then the preview will be totally personalised to the recipient.

Facebook Messenger Link example:

LinkedIn Message Example:

Slack Message Link example:

To achieve this, you need to update the OG tags that are present in the header of the website page being shared.

As the OG tags existing within the <head> </head> section of your web page, you need to update this server side, before the page is loaded.

If your using Wordpress - we've created a plugin that enables page by page OG tag manipulation, defining the image, title and description to be personalised. Read more here about our Wordpress plugin.

PHP which is a server-side scripting language enables you to do this, to you web pages, using a simple addition.

<?php

$url="https://....com";
$parameter = $_SERVER['QUERY_STRING'];
$url=$url."?".$parameter;
$img="https://img.hyperi.se/i/0foKt3kb3.png?".$parameter;
 
?>
<html>
<head>
    <title>...</title>
    <meta name="description" content="...">
    <!-- Shared social media -->
    <meta property="og:url" content="<?=$url?>">
    <meta property="og:type" content="website">
    <meta property="og:image" content="<?=$img?>">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:title" content="...">
    <meta property="og:description" content="...">

...
</head>
<body>
...

The above example will perform a personalisation, using the image. You can go further and personalise the accompanying title and description, by calling the Hyperise API to retrieve enriched personalisation data from an email.

So in this code example below we could call the URL like:

https://example.com/your-landing-page?utm_hyperef=bill@microsoft.com

<?php

$url="https://example.com/your-landing-page";
$parameter = $_SERVER['QUERY_STRING'];
$url=$url."?".$parameter;
$img="https://img.hyperise.io/i/YOUR-IMAGE-HASH.png?".$parameter;  

$pattern = '/[a-z0-9_\-\+\.]+@[a-z0-9\-]+\.([a-z]{2,4})(?:\.[a-z]{2})?/i';
preg_match_all($pattern, $parameter, $email);
$dataArray = array("api_token"=>"YOUR-TOKEN","image_hash"=>"YOUR-IMAGE-HASH","email"=>$email[0][0]); 
$data = http_build_query($dataArray);
$APIurl="https://app.hyperise.io/api/v1/regular/data-enrichment";
$getUrl = $APIurl."?".$data;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$getUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$server_output = curl_exec($ch);
curl_close ($ch);
$json=json_decode($server_output);

$title=$json->business_name." your title...";
$desc=$json->first_name." from ".$json->business_name." your description...";

?>
<html>
<head>
    <title><?=$title?></title>
    <meta name="description" content="<?=$desc?>">
    <!-- Shared social media -->
    <meta property="og:url" content="<?=$url?>">
    <meta property="og:type" content="website">
    <meta property="og:image" content="<?=$img?>">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:title" content="<?=$title?>">
    <meta property="og:description" content="<?=$desc?>">
</head>
<body>
 <h1><?=$title?></h1>
 <img src="<?=$img?>" alt="<?=$title?>">

 ...

</body>
</html>

Or you could pass data via the URL and push that to be used for name and business name personalisation and bypass the API, for when the email is not known.

So in this code example below we could call the URL like:

https://example.com/your-landing-page?first_name=Bill&business_name=Microsoft

<?php

$url="https://example.com/your-landing-page";
$parameter = $_SERVER['QUERY_STRING'];
$url=$url."?".$parameter;
$img="https://img.hyperise.io/i/YOUR-IMAGE-HASH.png?".$parameter;  

$title = $_REQUEST['first_name'] . " your title...";
$desc =  $_REQUEST['first_name'] . " from " . $_REQUEST['business_name'] . " your description...";

?>
<html>
<head>
    <title><?=$title?></title>
    <meta name="description" content="<?=$desc?>">
    <!-- Shared social media -->
    <meta property="og:url" content="<?=$url?>">
    <meta property="og:type" content="website">
    <meta property="og:image" content="<?=$img?>">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:title" content="<?=$title?>">
    <meta property="og:description" content="<?=$desc?>">
</head>
<body>
 <h1><?=$title?></h1>
 <img src="<?=$img?>" alt="<?=$title?>">

 ...

</body>
</html>

Did this answer your question?