How to Manually Make Blog Cover Images Work as Facebook OG Images

 ** If you find this helpful?  You can send a $5.00 donation to $vibeforge on Cash App. ** 

If you want Facebook to use the cover image from each blog post when someone shares a blog link, you need to update three files: 

🚨 MAKE BACKUPS OF YOUR ORIGINAL FILES FIRST! 🚨

The reason for this is simple: the blog page needs to set its Open Graph image before the page header is rendered, and the header must be told to use that blog-specific image instead of the site-wide default image.

1. Edit blogs.php

Open blogs.php (in root folder) and find the section that starts with:

case 'blog':

In your current file, it should look something like this:

case 'blog':

  // get blog

  $blog = $user->get_post($_GET['post_id']);

  if (!$blog) {

    _error(404);

  }

  /* assign variables */

  $smarty->assign('blog', $blog);

if (file_exists(ABSPATH . 'hooks/load_blog_plugins.php')) {

  require_once(ABSPATH . 'hooks/load_blog_plugins.php');

}



  // page header

  page_header($blog['og_title'] . ' | ' . __($system['system_title']), $blog['og_description'], $blog['og_image']);

Replace that section with this:

case 'blog':

  // get blog

  $blog = $user->get_post($_GET['post_id']);

  if (!$blog) {

    _error(404);

  }



  // build Open Graph data from the blog cover so shares use the article image

  $og_title = !empty($blog['og_title']) ? $blog['og_title'] : $blog['blog']['title'];

  $og_description = !empty($blog['og_description']) ? $blog['og_description'] : mb_substr(trim(strip_tags(html_entity_decode($blog['blog']['text'], ENT_QUOTES, 'UTF-8'))), 0, 200);

  $og_image = '';



  if (!empty($blog['blog']['parsed_cover'])) {

    $og_image = $blog['blog']['parsed_cover'];

  } elseif (!empty($blog['blog']['cover'])) {

    $og_image = (preg_match('/^https?:\/\//i', $blog['blog']['cover'])) ? $blog['blog']['cover'] : $system['system_url'] . '/' . ltrim($blog['blog']['cover'], '/');

  } elseif (!empty($blog['og_image'])) {

    $og_image = $blog['og_image'];

  }



  $og_url = $system['system_url'] . '/blogs/' . $blog['post_id'] . '/' . $blog['blog']['title_url'];



  // keep the post payload and smarty vars aligned for head/meta templates

  $blog['og_title'] = $og_title;

  $blog['og_description'] = $og_description;

  $blog['og_image'] = $og_image;

  $blog['og_url'] = $og_url;



  /* assign variables */

  $smarty->assign('blog', $blog);

  $smarty->assign('og_title', $og_title);

  $smarty->assign('og_description', $og_description);

  $smarty->assign('og_image', $og_image);

  $smarty->assign('twitter_image', $og_image);

  $smarty->assign('og_url', $og_url);

  $smarty->assign('og_type', 'article');



if (file_exists(ABSPATH . 'hooks/load_blog_plugins.php')) {

  require_once(ABSPATH . 'hooks/load_blog_plugins.php');

}



  // page header

  page_header($og_title . ' | ' . __($system['system_title']), $og_description, $og_image);

2. Edit blogs.tpl

Open blogs.tpl. At the very top of the file, you should currently see:

{include file='_head.tpl'}

{include file='_header.tpl'}

Replace those lines with this:

{if $view == "blog" && !empty($blog)}

  {assign var="_blog_og_title" value=$blog['og_title']|default:$blog['blog']['title']}

  {assign var="_blog_og_description" value=$blog['og_description']|default:$blog['blog']['text']|strip_tags|truncate:200}

  {assign var="_blog_og_url" value="`$system['system_url']`/blogs/`$blog['post_id']`/`$blog['blog']['title_url']`"}

  {if !empty($blog['blog']['parsed_cover'])}

    {assign var="og_image" value=$blog['blog']['parsed_cover']}

    {assign var="twitter_image" value=$blog['blog']['parsed_cover']}

  {elseif !empty($blog['og_image'])}

    {assign var="og_image" value=$blog['og_image']}

    {assign var="twitter_image" value=$blog['og_image']}

  {/if}

  {assign var="og_title" value=$_blog_og_title}

  {assign var="og_description" value=$_blog_og_description}

  {assign var="og_url" value=$_blog_og_url}

  {assign var="og_type" value="article"}

{/if}

{include file='_head.tpl'}

{include file='_header.tpl'}

3. Edit _head.tpl

Open _head.tpl and find the section that outputs the Open Graph and Twitter meta tags.

Replace this block:

<!-- OG-Meta -->

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

<meta property="og:title" content="{$page_title|truncate:70}" />

<meta property="og:description" content="{$page_description|truncate:300}" />

<meta property="og:site_name" content="{$system['system_title']}" />

<meta property="og:url" content="{$system['system_url']}{$system['page_url']}" />



{if $page_image}

<meta property="og:image" content="{$page_image}" />

<meta property="og:image:secure_url" content="{$page_image}" />

{else}

<meta property="og:image" content="{$system['system_url']}/images/og-default.jpg" />

<meta property="og:image:secure_url" content="{$system['system_url']}/images/og-default.jpg" />

{/if}



<meta property="og:image:width" content="1200" />

<meta property="og:image:height" content="630" />

<meta property="og:image:type" content="image/jpeg" />

<!-- OG-Meta -->



<!-- Twitter-Meta -->

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:title" content="{$page_title|truncate:70}" />

<meta name="twitter:description" content="{$page_description|truncate:300}" />

<meta name="twitter:image" content="{$page_image}" />

<!-- Twitter-Meta -->

Replace it with this:

<!-- OG-Meta -->

{assign var="meta_og_type" value=$og_type|default:'website'}

{assign var="meta_og_title" value=$og_title|default:$page_title}

{assign var="meta_og_description" value=$og_description|default:$page_description}

{assign var="meta_og_url" value=$og_url|default:"`$system['system_url']``$system['page_url']`"}

{assign var="meta_og_image" value=$og_image|default:$page_image}

{assign var="meta_twitter_image" value=$twitter_image|default:$meta_og_image}



<meta property="og:type" content="{$meta_og_type|escape:'html'}" />

<meta property="og:title" content="{$meta_og_title|truncate:70|escape:'html'}" />

<meta property="og:description" content="{$meta_og_description|truncate:300|escape:'html'}" />

<meta property="og:site_name" content="{$system['system_title']|escape:'html'}" />

<meta property="og:url" content="{$meta_og_url|escape:'html'}" />



{if $meta_og_image}

<meta property="og:image" content="{$meta_og_image|escape:'html'}" />

<meta property="og:image:secure_url" content="{$meta_og_image|escape:'html'}" />

{else}

<meta property="og:image" content="{$system['system_url']}/images/og-default.jpg" />

<meta property="og:image:secure_url" content="{$system['system_url']}/images/og-default.jpg" />

{/if}



<meta property="og:image:width" content="1200" />

<meta property="og:image:height" content="630" />

<meta property="og:image:type" content="image/jpeg" />

<!-- OG-Meta -->



<!-- Twitter-Meta -->

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:title" content="{$meta_og_title|truncate:70|escape:'html'}" />

<meta name="twitter:description" content="{$meta_og_description|truncate:300|escape:'html'}" />

{if $meta_twitter_image}

<meta name="twitter:image" content="{$meta_twitter_image|escape:'html'}" />

{else}

<meta name="twitter:image" content="{$system['system_url']}/images/og-default.jpg" />

{/if}

<!-- Twitter-Meta -->

4. Clear cache after saving

After saving the files, clear any cache that might still serve the old page output:

• Smarty or template cache
• site cache
• server cache
• Cloudflare cache, if you use it

5. Force Facebook to refresh the preview

Facebook caches previews, so even after the code is fixed, the old image may still show until you re-scrape the URL in Facebook Sharing Debugger.

What success looks like

Once everything is working, the page source for a single blog post should contain an Open Graph image tag pointing directly to that article’s cover image, like this:

<meta property="og:image" content="https://yourdomain.xx/path-to-blog-cover-image.jpg">

That is the image Facebook will use when the link is shared.

If it still does not work

• Make sure the blog post actually has a cover image.
• Make sure parsed_cover contains a full valid image URL.
• Make sure the image is public and can be loaded directly.
• Make sure you edited the live theme files, not backup copies.
• Make sure all caches were cleared.
• Make sure Facebook was forced to scrape the page again.
  
  

   ** Did you find this helpful?  Send a $5.00 donation to $vibeforge on Cash App. **