Setup dynamic opengraph og:image meta tags with php
Understanding OpenGraph Tags
OpenGraph (OG) tags are special meta tags developed by Facebook in 2010 that allow web developers to control how URLs are displayed when shared on social media platforms. They've since become a standard adopted by most social networks including Twitter, LinkedIn, Pinterest, and messaging apps like WhatsApp, Telegram and more.
There is how site's links preview looks like without opengraph og:image tags.
But many engines like wordpress/shopify/etc have setup tags correctly and set as opengraph image cover photo in case of media article/blogpost or a random photo in case of store product.
There is how site's links preview looks like with default setup opengraph og:image tags.
Article/blogpost preview - with just cover photo
Store product preview - usually cropped because common product photo not fit in recommended landscape format for opengraph previews
There is better than nothing but the next step is to setup rich dynamic opengraph previews. Look how this links previews looks with integrated dynamic opengraph tags.
Article/blogpost preview - with description over image. You can also add your branding/logo to increase brand recognition.
Store product preview - full image with title and price tag, also discount can be shown here. You can also add your branding/logo to increase brand recognition.
Obviously, when a person scrolls through the feed on Facebook, such a post will attract much more attention. Also, with branding elements in the picture, you will greatly increase the recognition of your brand.
Such preview will also works in all messengers and other social media platforms to boost your lead generation.
And the most important thing is that everything works absolutely automatically. You set it up once and the previews will work for both old links and those that will appear in the future.
Create template
At first you need to signup in https://app.previewbuilder.com/signup.html. Registration is simple and there is free trial - no credit card required.
1. On first welcome page just click on "Create first template"
2. On second page you can select template to start with or start with scratch
3. On third page you can polish your template with a powerful editor. You can skip this step by now and return to template editor later so just click on "Test template".
4. On fourth page you can test your template rendering with different images/texts/etc. Click on php instruction tab.
There you will find code example how to build dynamic url to integrate into your php site with necessary params. Code snippet in admin will contain params for your template (like field, secret key, tempalte_id, etc. Example will be below:
<?php
/**
* Function to create a signed URL for PreviewBuilder API
*
* @param string $basePath Base API path
* @param array $params Parameters for the URL
* @param string $secretKey Secret key for signature generation
* @return string Complete URL with signature
*/
function buildRenderUrl($basePath, $params, $secretKey) {
// Step 1: Use the base path
$path = $basePath;
// Steps 2 and 3: Form query parameters
$queryParts = [];
foreach ($params as $key => $value) {
$encodedValue = urlencode($value);
$queryParts[] = $key . '=' . $encodedValue;
}
$query = implode('&', $queryParts);
// Step 4: Calculate signature
$signature = hash_hmac('sha256', $query, $secretKey);
// Step 5: Build the URL together
$url = $path . '?' . $query . '&s=' . $signature;
return $url;
}
/**
* Adds meta tags for social networks with dynamic image URL
*
* @param string $shardingKey The shard identifier for PreviewBuilder
* @param string $templateId The template identifier
* @param string $secretKey Secret key for signature generation
* @param array $editableFields Fields that can be edited in the template
*/
function addMetaTags($shardingKey, $templateId, $secretKey, $editableFields) {
// Construct the base path from parameters
$basePath = "https://{$shardingKey}.previewbuilder.com/api/r/{$templateId}";
// Get the complete URL
$renderUrl = buildRenderUrl($basePath, $editableFields, $secretKey);
// Add meta tags to HTML
echo "<!-- Social media meta tags -->\n";
echo "<meta property=\"og:image\" content=\"{$renderUrl}\" />\n";
echo "<meta property=\"og:image:width\" content=\"1200\" />\n";
echo "<meta property=\"og:image:height\" content=\"628\" />\n";
echo "<meta name=\"twitter:card\" content=\"summary_large_image\" />\n";
echo "<meta name=\"twitter:image\" content=\"{$renderUrl}\" />\n";
}
// Example usage when rendering the page
function renderPage() {
// Configuration parameters
$shardingKey = "w0"; // PreviewBuilder shard identifier
$templateId = "67c045da48d9cc001211ca01"; // Template ID
$secretKey = "7c9cd65c077e99f840280fb3125dda584ef79e44a349c25cf53e06ecfe52769b"; // Secret key
$editableFields = [
'Image1' => 'https://app.previewbuilder.com/forest.jpg',
'Text3' => 'Good template for media and blog. Just put your title here and use article photo as background.',
'Text4' => 'MarsTimes.com'
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your title</title>
<?php addMetaTags($shardingKey, $templateId, $secretKey, $editableFields); ?>
</head>
<body>
<!-- Page content -->
</body>
</html>
<?php
}
// Call the page rendering function
renderPage();
?>
If you have any questions feel free to contact us via support chat widget. We will be happy to help you to integrate our service.