meta-description for "tag" and "categories" pages - metadata

For HEXO blog... I know that meta-description is written in config file and works across all pages.
For blogposts I can create individual meta-descriptions and that works for the search engines.
However, my "tag" and "categories" pages get indexed now and with meta-description of home-page.
This is not good.
So I am asking if it is possible to create a custom meta-description for "tag" and "categories" pages?
Something like...
description: this is a page about {{tag}}
and
description: this is a page about {{category}}
This is the code in my head.ejs.
The site main config file has description: main config meta-description text.
<%if(metaDescription){%>
<meta name="description" content="<%= config.description %>">
<% } else if (page.description){ %>
<meta name="description" content="<%= page.description %>">
<% } else if (page.excerpt){ %>
<meta name="description" content="<%= strip_html(page.excerpt).replace(/^\s*/, '').replace(/\s*$/, '').replace(/[\n,\r]/g,'') %>">
<% } else if (page.content){ %>
<meta name="description" content="<%= strip_html(page.content).replace(/^\s*/, '').replace(/\s*$/, '').substring(0, 150).replace(/[\n,\r]/g,'') %>">
<% } else if (config.description){ %>
<meta name="description" content="<%= config.description %>">
<% }
<% if (page.keywords){ %>
<meta name="keywords" content="<%= page.keywords %>">
<% } else if (page.tags){ %>
<%
var thistags=[];
page.tags.each(function(k){
thistags.push(k.name);
}) %>
<meta name="keywords" content="<%= thistags %>">
<% } %>

This is all handled by your theme so you need to add the logic there.
You need to check if your page is a tag or category index and generate a custom description there:
let description = page.description; // Normal case when your desc comes from meta data
else if (page.tag) {
description = 'This is a page about ' + page.tag;
} else if (page.category) {
description = 'This is a page about ' + page.category;
}
// Use your description variable as you are currently doing
EDIT: based on post update (added head.ejs)
else if (page.tag) {
<meta name="description" content="<%= 'This is a page about ' + page.tag %>">
} else if (page.category) {
<meta name="description" content="<%= 'This is a page about ' + page.category %>">
}

Related

this pixel's microdata is incomplete or incorrectly formated schema.org

I have created Facebook pixels, which connected well. When I run a debug tool, it selects sample items and lists them but once I try connecting the catalog to the pixel, it shows that the pixel is not ready. Below is the code:
<?php
$current_url = base64_encode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$results = $mysqli->query("SELECT products.id,products.image,products.name,products.description, product_variant.discounted_price, product_variant.price FROM products LEFT JOIN product_variant ON products.id = product_variant.product_id where subcategory_id = 41 ORDER BY id ASC LIMIT 12");
if ($results) {
//fetch results set as object and output HTML
while($obj = $results->fetch_object()) {
$a = $obj->price;
$b = $obj->discounted_price;
$epsilon = 0;
if(!$b == $epsilon) {
$price = number_format($b,0);
} else {
$price = number_format($a,0);
}
//Microdata Tags
echo '<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="brand" content="'.$obj->made_in.'">
<meta itemprop="name" content="'.$obj->name.'">
<meta itemprop="description" content="'.$obj->description.'">
<meta itemprop="productID" content="'.$obj->id.'">
<meta itemprop="url" content="https://mgcmax.com/single.php?id='.$obj->id.'">
<meta itemprop="image" content="https://www.vendor.mgcmax.com/'.$obj->image.'">
<div itemprop="value" itemscope itemtype="http://schema.org/PropertyValue">
<span itemprop="propertyID" content="item_group_id"></span>
<meta itemprop="value" content="Electroics"></meta>
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<link itemprop="availability" href="http://schema.org/InStock">
<link itemprop="itemCondition" href="http://schema.org/NewCondition">
<meta itemprop="product:category" content="888">
<meta itemprop="price" content="'.$price.'">
<meta itemprop="priceCurrency" content="UGX">
</div>
</div>';
}
}
?>
What could be missing for the pixels not to connect, though the debug is working?
Results of debug tool
google_product_category warning
Have the same issue here, both pixel helper tool and microdata debugger show that everything is proper, as well as several diagnostic tools in the FB business suite.
For some reason, however, the Catalog won't connect, and gives the "not ready" error.
I can also confirm it is not related to the google_product_category warning.
You can get rid of that warning by adding:
<meta itemprop="category" content="xxxx" />
The item with "item_group_id" is the facebook category, as you clearly know already.

Post swf with parameters to facebook via application

I have a facebook application where the user choose 4 of his friends and then it creates a video (swf) with the pictures of your friends in it (loaded via xml). So I need to share this video on the user timeline. Everything works fine but the video is not embedded in the post on his timeline, there is only a post with the link to the page in it.
The weird thing is, if I post the url directly on my timeline, the video is embedded, but not if the same link is posted via the application.
here is my code called by the share button in js :
function postToFeed() {
var obj = {
method: 'feed',
link: 'https://mysite.com/flash/share-page.php?id=22',
picture: 'https://mysite.com/images/video-preview.jpg',
name: 'Name',
caption: 'Caption',
description: 'Description'
};
function callback(response) {
//some code here
}
FB.ui(obj, callback);
}
and the code in my share-page.php
<?php
$id_inscription = $_GET['id'];
$video_url = 'https://mysite.com/flash/share-page.php?id=22';
$video_preview_image = 'https://mysite.com/images/video-preview.jpg';
?>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta property="og:video" content="<?php echo $video_url; ?>"/>
<!-- Open grah tags for Facebook -->
<meta property="og:title" content="Test video player" />
<meta property="og:description" content="A video player interface experiment." />
<meta property="og:type" content="video" />
<meta property="og:url" content="<?php echo $video_url; ?>"/>
<meta property="og:image" content="<?php echo $video_preview_image; ?>"/>
<meta property="og:site_name" content="Site name"/>
<!-- Video specific open graph tags -->
<meta property="og:video" content="<?php echo $video_url; ?>" />
<meta property="og:video:secure_url" content="<?php echo $video_url; ?>" /> <!-- Required for people on Facebook who have secure browsing enabled! -->
<meta property="og:video:width" content="325" />
<meta property="og:video:height" content="180" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<script src="js/swfobject.js"></script>
<script>
var flashvars = {
xmlUrl:"xml/data-<?php echo $id_inscription; ?>.xml",
policyFileUrl:"http://profile.ak.fbcdn.net/crossdomain.xml"
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "",
wmode: "opaque"
//wmode: "direct" // can cause issues with FP settings & webcam
};
var attributes = {
id:"content"
};
swfobject.embedSWF(
"app.swf",
"altContent", "480", "270", "10.0.0",
"expressInstall.swf",
flashvars, params, attributes);
</script>
</head>
<body>
<div id="altContent">
<p>Get Adobe Flash player</p>
</div>
</body>
</html>
Found it, in the javascript you have to add
source: 'https://mysite.com/flash/app.swf'
DOesnt work for me .
Also facebook says ,It is NOT supposed to work By Design .
https://developers.facebook.com/bugs/589975484398226?browse=external_tasks_search_results_526fc388b99e18881434478
Please share here your code snippet if you could make it work . I have the meta tags taking care for the secure video Url as well .

Update og:title

i used this tutorial https://developers.facebook.com/docs/opengraph/tutorial/ to make my first App but i want to use php variable for my og:title like this <meta property="og:title" content="<?php echo $title; ?>" /> . This php variable is changing constantly every time the page loads but when I post my action in the facebook appears with the old title!
Here's the code:
<?php
$title = ' Hello world';
// <---- This php variable is changing every time
the page loads but the title is not being recognised
?>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# fitnessgod: http://ogp.me/ns/fb/fitnessgod#">
<meta property="og:locale" content="en_US" />
<meta property="fb:app_id" content="My app Id" />
<meta property="og:type" content="fitnessgod:news" />
<meta property="og:url" content="https://www.fitness-god.com/share-facebook.php" />
<meta property="og:title" content="<?php echo $title; ?>" />
<meta property="og:description" content="let's do sport" />
<meta property="og:image" content="https://www.fitness-god.com/images/sport dinamic.png" />
<script type="text/javascript">
function postCook()
{
FB.api('/me/fitnessgod:share' +
'?news=https://www.fitness-god.com/share-facebook.php','post',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'My App id', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>
<font size="30" face="verdana" color="grey">
Stuffed Cookies
</font>
</h3>
<p>
<img title="Sports News"
src="https://www.fitness-god.com/images/sport dinamic.png"
width="550"/><br />
</p>
<form>
<input type="button" value="Share news" onClick="postCook()" />
</form>
<fb:activity actions="fitnessgod:share"></fb:activity>
</body>
</html>
You need to correct the meta tags definition. Use attribute name, not property:
E.g.:
<meta name="og:title" content="<?php echo $title; ?>" />
You can use the debugger to test your code:
http://developers.facebook.com/tools/debug
Also note that when you click share, the content of your page might be cached. But, the debugger, always gets the latest content.
It appears you are experiencing "freezing" of og:title that Facebook performs after a number of actions – 50 likes, shares and/or comments – were performed with that link.
One of the main reasons why Facebook does this, is to prevent many people sharing a seemingly safe link and then having the site owner replace the title with offensive content and have it display on people's timelines.
For additional information, see this link.

any ideas why facebook like button do not display non-English letters on a wordpress blog?

All non-English (Lithuanian) elements like š,ė,ž,č and more are displayed as code which doesnt look nice. I added a facebook like button to my wordpress blog, which looks like this:
<iframe src="http://www.facebook.com/plugins/like.php?locale=lt_LT&href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; position: relative; top: -150px; padding: 0 0 20px 0; overflow:hidden; width:450px; height:60px"></iframe>
You can see that I added locale=lt_LT (I'm from Lithuania)
DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Im using this:
<?php
$thumb = get_post_meta($post->ID,'_thumbnail_id',false);
$thumb = wp_get_attachment_image_src($thumb[0], false);
$thumb = $thumb[0];
$default_img = get_bloginfo('stylesheet_directory').'/images/default_icon.jpg';
?>
<?php if(is_single() || is_page()) { ?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description" content="<?php
while(have_posts()):the_post();
$out_excerpt = str_replace(array("\r\n", "\r", "\n"), "", get_the_excerpt());
echo apply_filters('the_excerpt_rss', $out_excerpt);
endwhile; ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php } else { ?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:url" content="<?php bloginfo('url'); ?>"/>
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php } ?>
Can it be a problem with DOCTYPE or something else?
The language of the button sets when you order a button from http://developers.facebook.com/docs/reference/plugins/like/
the button should have the language according to the user. example
js.src = "/ / connect.facebook.net / es_LA / all.js # xfbml = 1 & appId = 250867014982684";
that line where it says you can modify for your code es_LA language. This is html 5.
ok, for like button, try using fb developer page and get the code for htlm5; instead of iframe. i made like button in spanish some time ago, let me check my code. i'll get baack to you.

Facebook, Google+ and twitter like button on website

how to add Facebook, Google+ and twitter like/share button on my website, to sharing details of my website. because, i tried the following code in my website for google+. But, it's only sharing my website pic not the description and title of my website
<meta itemprop="name" content="MySMSBuddy">
<meta itemprop="description" content="Description of my webpage">
<meta itemprop="image" content="http://eravikant.com/images/image.png">
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Any help and idea will be appreciated !!!
Those sites use the title tag for page title, and meta name="description" for description (not itemprop="description".
<title>Title of your page</tile>
<meta name="description" content="Description of your page" />
For Facebook, you can also use open graph meta tags:
<meta property="og:title" content="Title"/>
<meta property="og:description" content="Description"/>