Making a Dynamic Facebook OG in Woocommerce - php

Question

in order to have the right image and the right link everytime I share on Facebook, here's what i've done on my Wordpress/Woocommerce header:
<meta property="og:image" content="<?php the_post_thumbnail_url(); ?>" />
<meta property="og:title" content="<?php echo the_title(); ?> by Pixel Komando" />
<meta property="og:url" content="<?php echo get_permalink(); ?>" />
Everything works fine in my woocommerce products pages, but when i want to share the Shop Page, the FB debugger shows me this :
URL : https://www.pixelkomando.com/shop
Meta tag og:url https://www.pixelkomando.com/shop/CATEGORY/PRODUCT/
It seems it works correctly everywhere except on the Shop Page itself. Instead of retrieving the Shop Page URL, it gives the URL of a random product.
I dont really know what is wrong.
Regards
Fero

Answer 1

As it is an archive page so whenever you call get_permalink() it will pick either the last or the first product URL, so what I'll suggest you to remove your code from header.php and add the following code in your functions.php
function wh_doctype_opengraph($output) {
return $output . '
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'wh_doctype_opengraph');
function wh_fb_opengraph()
{
global $post;
if (is_home() && is_front_page())
{
?>
<meta property="og:type" content="website" />
<meta property="og:title" content="<?= get_bloginfo('name') ?>"/>
<meta property="og:url" content="<?= get_site_url() ?>"/>
<meta property="og:image" content="<?= get_site_url() . '/wp-content/uploads/myhome.jpg' ?>"/> <!-- replace it with your static image-->
<?php
}
//for singles post page
else if (is_single() && !is_product())
{
if (has_post_thumbnail($post->ID))
{
$img_src = wp_get_attachment_url(get_post_thumbnail_id($post->ID), 'medium');
}
//if featured image not present
else
{
$img_src = get_site_url() . '/wp-content/uploads/post.jpg'; //replace it with your static image
}
?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?= get_the_title($post->ID); ?>"/>
<meta property="og:url" content="<?= get_the_permalink($post->ID); ?>"/>
<meta property="og:image" content="<?= $img_src; ?>"/>
<?php
}
//for singles product page only
elseif (is_product())
{
$img_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'woocommerce_single_image_width'); //replace it with your desired size
?>
<meta property="og:type" content="product" />
<meta property="og:title" content="<?= get_the_title($post->ID); ?> by Pixel Komando"/>
<meta property="og:url" content="<?= get_the_permalink($post->ID); ?>" />
<meta property="og:image" content="<?= $img_url[0]; ?>"/>
<?php
}
//for product cat page
else if (is_product_category())
{
$term = get_queried_object();
$img_src = wp_get_attachment_url(get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true));
if (empty($img_src))
{
$img_src = get_site_url() . '/wp-content/uploads/myproductcat.jpg'; //replace it with your static image
}
?>
<meta property="og:type" content="object" />
<meta property="og:title" content="<?= $term->name; ?>" />
<meta property="og:url" content="<?= get_term_link($term->term_id, 'product_cat'); ?>" />
<meta property="og:image" content="<?= $img_src; ?>" />
<?php
}
//for shop page
elseif (is_shop())
{
?>
<meta property="og:title" content="<?= $term->name; ?>" />
<meta property="og:url" content="<?= get_permalink(woocommerce_get_page_id('shop')); ?>" />
<meta property="og:image" content="<?= get_site_url(); ?>/wp-content/uploads/myshop.jpg" /> <!-- replace it with your static image-->
<?php
}
else
{
return;
}
}
add_action('wp_head', 'wh_fb_opengraph', 5);
Code is tested and works.
Hope this helps!

Answer 2

It seems like the issue is with your og:url tag. Each time I re-scrape with the sharing debugger it is different. To me, this suggests the get_permalink() method is not returning a consistent result.
FYI, the og:url meta tag is not required, so an easy fix here is just to leave it off. You only really need it if you have multiple URLs to access the same resource and you want to let FB's crawler which is URL is the canonical one.