i have a wordpress based website.
I have a standard wordpress loop that executes at the start in the <body> part of the html. Now, i would like to print out the og tags in the head, but the data needed for those tags (title, description,...) is available to me after the <head> part when i do the loop.
Is there a way to solve this in php without me having to move my code to the beggining of the head tag (or somewhere before)?
If your problem is settiing meta tags, this works for me and is also useful because it checks if you are viewing a post or the website
<?php if (is_single() || is_author()) { ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:title" content="<?php wp_title(); ?>" />
<meta property="og:description" content="<?php echo strip_tags(get_bloginfo('description')); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />
<?php } else { ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:title" content="<?php wp_title(); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:type" content="website" />
<?php } ?>
Install a hook for wp_head action.
function modify_head()
{
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<?php
}
add_action('wp_head', 'modify_head');
Related
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
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!
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.
I understand there there are many questions regarding FB open graphs already asked on the forum. I have looked through pretty much evrything (multiple) times. I just dont get it why I continue to get the above errors when everything seems to be inline with what FB and others are saying.
here is what I have in the header.tpl
<!-- Facebook Meta Tags -->
<meta property="og:url" content="<?php echo $base; ?>/index.php?
route=product/product&product_id=<?php echo $product_id;?>" />
<meta property="og:type" content="website" />
<meta property="og:title" content="<?php echo
$product_heading_title; ?>" />
<meta property="og:description" content="<?php echo
$product_description; ?>" />
<meta property="og:image" content="<?php echo $product_thumb; ?>" />
<meta property="website:section" content="Product share offers" />
<meta property="website:published_time" content="<?php echo
strtotime('now'); ?>" />
<meta property="website:modified_time" content="<?php echo
strtotime('+30min'); ?>" />
<meta property="website:tag" content="Facebook" />
<meta property="website:tag" content="Products" />
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="#publisher_handle">
<meta name="twitter:title" content="<?php echo $product_heading_title; ?
>">
<meta name="twitter:description" content="<?php echo
$product_description; ?>">
<meta name="twitter:creator" content="#author_handle">
<meta name="twitter:image" content="<?php echo $product_thumb; ?>">
<meta property="og:title" content="<?php echo
$product_heading_title; ?>" />
<meta property="og:description" content="<?php echo
$product_description; ?>" />
<meta property="og:image" content="<?php echo $product_thumb; ?>" />
<!-- Google+ Meta Tags -->
<link href="https://plus.google.com/" rel="publisher">
<meta itemprop="name" content="<?php echo $product_heading_title; ?
>">
<meta itemprop="description" content="<?php echo
$product_description; ?>">
<meta itemprop="image" content="<?php echo $product_thumb; ?>">
<?php
}
?>
So, I have this article page which sometimes has post with image of 600x315 dimension and are mostly under 100kb.
Following are the meta I use on the article.php site, but when I share a post on Facebook the image section shows blank. What is that I am missing on these meta?
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="<?php echo $row['keyword']; ?>">
<meta name="description" content="<?php echo metadesc($row['description']); ?>">
<link rel="canonical" href="<?php echo $site_path.$url; ?>" />
<!-- for Facebook -->
<meta property="og:title" content="<?php echo ucletters($row['title']); echo ' | '; echo $site_name;?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php echo $site_path.'uploads/images/'.$row['image']; ?>" />
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
<meta property="og:url" content="<?php echo $site_path.$url; ?>" />
<meta property="og:description" content="<?php echo metadesc($row['description']); ?>" />
<!-- for Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="<?php echo ucletters($row['title']); echo ' | '; echo $site_name;?>" />
<meta name="twitter:description" content="<?php echo metadesc($row['description']); ?>" />
<meta name="twitter:image" content="<?php echo $site_path.'uploads/images/'.$row['image']; ?>" />
Visit
Facebook developer debug tool
to check the issue with your url(s).Read their guidelines and that will surely work.Good luck
I tried different ways to get my value data in a custom field and put it in the meta tags property in header but no luck.
My site is running based on Wordpress. I created a page to show data from my custom fields. I added a facebook share button to share the content on Facebook.
When I clicked on share button, Facebook only catched Wordpress Meta Tags default meta tags.
I edited open-graph.php, added a condition to make Wordpress to use my custom meta tags only on that page.
The issue is, I cannot or I don't know how to get the data from database and put it in the meta tags. Because the header is loaded before the body, so those meta tags in header are always loaded before the function getting data from database returns the value. Even when I create the tag I need, they are still located in the body, which is not a correct position for Meta tags.
I tried to put my data function directly in the open-graph.php, right below my page condition statement, but it still doesn't work.
Is there anyway to get the data loaded from body and put it in meta tags in header? please help.
I've set up the og meta tags recently in my header.php file in this manner:
<?php
$theme = wp_get_theme();
$screenshot_url = esc_url( $theme->get_screenshot() );
?>
<?php if ( is_home() ): ?>
<meta property="og:url" content="<?php echo get_home_url(''); ?>" />
<meta property="og:type" content="website" />
<meta property="og:title" content="<?php echo get_bloginfo('name'); ?>" />
<meta property="og:description" content="<?php echo get_bloginfo('description'); ?>" />
<meta property="og:image" content="<?php echo $screenshot_url; ?>" />
<?php elseif( is_category() ):
$cat_id = get_query_var('cat');
$cat_name = get_cat_name($cat_id);
$cat_desc = (category_description( $cat_id ) != '') ? category_description( $cat_id ) : get_bloginfo('description');
?>
<meta property="og:url" content="<?php echo get_category_link($cat_id); ?>" />
<meta property="og:type" content="website" />
<meta property="og:title" content="<?php echo $cat_name; ?>" />
<meta property="og:description" content="<?php echo $cat_desc; ?>" />
<meta property="og:image" content="<?php echo $screenshot_url; ?>" />
<?php else: ?>
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:type" content="website" />
<meta property="og:title" content="<?php echo get_the_title(); ?>" />
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />
<?php if(has_post_thumbnail()):
$url = wp_get_attachment_url( get_post_thumbnail_id() );
?>
<meta property="og:image" content="<?php echo $url; ?>" />
<?php else: ?>
<meta property="og:image" content="<?php echo $screenshot_url; ?>" />
<?php endif; ?>
<?php endif; ?>
You can add any conditional you need - for instance to check if you're on a single page, or some certain template.
When I use facebook share button I get correct image and info.
Hope this helps :)
I've got a share button that I am trying to modify to my specific needs. Here is the code.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<html>
<meta property="fb:app_id" content="lotsanumbers" />
<meta property="og:title" content="FOR SALE"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://www.website.com.au/php_test.php"/>
<meta property="og:image" content="http://www.website.com.au/ddfut14-1148.jpg"/>
<meta property="og:description" content="http://www.website.com.au/php_test.php<?php echo $title; ?>" />
Everything is working as requires except for the og:description. When I debug in facebook facebook is only seeing
<meta property="og:description" content="http://www.website.com.au/php_test.php
it is not scraping
<?php echo $title; ?>
from the same line what am I missing?
og:description is a tag that should contain text, you should be doing like:
<meta property="og:description" content="<?php echo $title; ?>" />
//where $title should be a defined variable that contains some text
or
<meta property="og:description" content="<?php echo file_get_contents("http://www.website.com.au/php_test.php"); ?>" />
//where your php_test.php file should echo out text