Meta tags implementation on MeteorJS - meteor

I am maintaining a MeteorJS web app and I need to add some specific meta tags into homepage.
I see that there is a head.html in the project that has all information, including
the existing og meta tags, I tried to add the specific meta tag there and restarted the server.
If I right click view source on the homepage, I can see the newly added meta tag.
However, if I try to use Facebook debugger to see what the FB Crawler sees, the newly added meta tag is not seen by the bot. In fact the bot sees some additional twitter meta tags that does not exist anywhere in the project.
Investigating further, I noticed the project uses a library called
manuelschoebel:ms-seo: https://github.com/DerMambo/ms-seo
This library is initialised in the Meteor.startup like this:
Meteor.startup(function() {
if(Meteor.isServer){
if(Meteor.DEBUG){
robots.addLine('Disallow: /');
}
robots.addLine('Disallow: /admin');
}
if(Meteor.isClient){
// default SEO
return SEO.config({
title: '...',
meta: {
"description": "..."
},
og: {
'image': '....'
}
});
}
Now I am guessing this SEO library is the reason why the bot does not see the newly added meta tag in the head.html.
What is the right way to add the newly meta tag in a clean way? why is this SEO library not respecting the head.html in the project?

Related

Accessing Wordpress Divi theme shortcodes in GraphQL layer as part of headless Wordpress build

I am working on an existing Wordpress site that uses a Divi child theme with the editor creating layouts with the Visual Editor. The client wants to develop a Gatsby site with data from a GraphQL layer provided by the wp-graphql plugin.
When I access the REST API response for the pages that use these Divi layouts I get pure HTML for content and excerpts etc. However, when I access the GraphQL editor and make the same request using a GraphQL statement the content comes back with the Raw Divi shortcodes surrounded by one div tag.
My Graphql query is
query MyQuery {
posts {
nodes {
content(format: RENDERED)
}
}
}
And it returns
{
"data": {
"posts": {
"nodes": [
{
"content": "<div class=\"et-l et-l--post\">\n\t\t\t<div class=\"et_builder_inner_content et_pb_gutters3\">\n\t\t[et_pb_sectionfb_built=”1″ fullwidth=”on” _builder_version=”4.6.6″ background_enable_image=”off”][et_pb_fullwidth_image.......
Where is should be returning just html as the api does:
<div class=\"et-l et-l--post\">\n\t\t\t<div class=\"et_builder_inner_content et_pb_gutters3\">\n\t\t<div class=\"et_pb_section et_pb_section_0 et_pb_fullwidth_section et_section_regular\" >\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t<div class=\"et_pb_module et_pb_fullwidth_image et_pb_fullwidth_image_0\">
I have enabled the shortcodes to be rendered with the solution Why Divi shortcodes don't render in wp-json?. Any idea how I enable the shortcodes to be rendered in Graphql? Or if there is a setting or code I am missing in Divi?

Google Maps Embed Api In Wordpress: Server Rejected Your Request

I've been up half the night on this issue . I've embedded a google map API via iframe into a Wordpress site and I get the error: The Google Maps API server rejected your request. The provided API key is invalid.
Nothing is wrong with my key. I put it in a vanilla html document outside of wordpress and it works great.
Then I've tried setting the sensor to true in the header.php.
No difference except more errors from my console:
Failed to load resource:
https://www.google.com/maps/embed/v1/place?q=place_id:myplacekey=mykey?wmode=transparent Failed to load resource: the server responded with a status of 403 ()
**Can't post the rest because I need more reputation
I believe the issue is with the ?wmode=transparent being appended to the end of the key. What might be adding that and how can I remove it?
The problem is in your theme.
When you look at the page with the map in browser inspector (Elements tab), you can see that link is ended by ?wmode=transparent
Code of the page does not contain ?wmode=transparent, you can see it on Sources tab of inspector:
This means that code of the page is modified by some js script. Browsing scripts in Sources tab, I had found the following:
At line 13 you can see source of your problem. This is some action for Youtube video, which was done by developers with a rough mistake. They add ?wmode=transparent to src of ANY iframe, including Google maps.
I have checked the latest version of theme. Same bug.
What you have to do: just comment line #13 in the file /wp-content/themes/crescent-theme/js/jquery.custom.js and make it like this:
( function( $ ) {
function modifyPosts() {
/* Fit Vids ---------------------*/
$('.feature-vid, .postarea').fitVids();
}
//Fix z-index youtube video embedding
$(document).ready(function (){
$('iframe').each(function(){
var url = $(this).attr("src");
// $(this).attr("src",url+"?wmode=transparent");
});
});
$( document )
.ready( modifyPosts )
.on( 'post-load', modifyPosts );
})( jQuery );
If you will update theme, you have to comment similar line in the same js file.

In Meteor : How to apply OpenGraph Dynamically for search engines (google+ or Facebook)

Actually what I want to do is make my pages link to be shown on the google+ or Facebook post with the OpenGraph tags.
I made my post page changes the
I tried these way,
first of all, I declared the meta tag inside first.
then tried to change the tags in the template helpers dynamically like this.
title: ->
$("meta[property='og:title']").attr "content", #title
#title
used manuelschoebel:ms-seo package from atmosphere
onAfterAction: ->
unless Meteor.isClient then return
data = #data()
SEO.set
title: data.title
meta:
description: 'changedBySEO'
og:
title: data.title
description: 'changedBySEO'
But the result alway shows go title in head.
I think google+ or Facebook just grab the meta tags only so the page rendering is not actually working.
Did I miss something or I should apply spiderable packages or something to do this functionality?
Thanks all-
you need the spiderable package, otherwise facebook can't see the tags created by the ms-seo package (remember they're dynamically created in js)

Wordpress + angularJS route + SEO

I'm currently on a project where I want to have :
Wordpress for easy content managment.
AngularJS for some UX (the goal is to have no page reload + nice animation between pages loading) + further functionalities.
And care about the SEO.
In that purpose, I'm using Angular's Route module to get the user a smoother experience, and using the Angular HTML5 "pretty urls" mode to "hook" the page switching (No hashbang -> natural links).
I don't want to generate hashbangs because it's more difficult to maintain (HTML snapshots with phantom.js server etc...) than just leaving Wordpress generate the content as he does it well.
So my intention was to let angularJS controls the user's navigation, and wordpress to generate the content when user will F5 & for the SEO bots(No JS).
But I can't find a clean & clear solution to this problem because either the Angular way will work, either the "PHP" way will work.
Any ideas will be welcome ! :)
Wordpress already provides you with wp_ajax_ hook for AJAX requests. ( link)
Example:
mysite.com/my-test-page
Wordpress
In this simple case we need our wp_ajax_ hook to retrieve a page by it's slug.
One easy way is to use get_page_by_path($page_path, $output, $post_type), to get the page we want where $page_path is the slug.
Then return the page data as JSON, return json_encode($pageArray);
AngularJS
Route: Do a simple GET:
.when('/:page_slug', {
templateUrl: 'views/page.html',
controller: 'PageController',
resolve: {
page : function($route) {
return $http.get(wp_ajax_url,
{
'action': 'the_ajax_hook',
'data': $route.current.params.page_slug
}
);
}
}
})
SEO
Google recently announced they are updating the Webmaster Tools to show you how a Javascript generated site renders and provide you with tips on how to make your site crawl-able.
http://googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html
Apart from that you can use other services to make your site SEO-friendly today:
getseojs.com
brombone.com
prerender.io

inserting google 'onclick' tracking link attribute in wordpress

I am looking for a way to modify the links on my Wordpress site so it tracks all my 3rd party links.
I was able to find some help with the, how to create the correct tracking code in Google Analytics, but the second part of the process is to add some specific link attributes.
Here is the example which they suggest I replicate:
<'a href="www.blog-hosting-service.com/myBlog" onclick="_gaq.push(['_link', 'www.blog-hosting-service.com/myBlog']); return false;">View My Blog
Does anyone know where I can insert this code link attributes so I can collect the external clicks via Google Analytics?
JQuery would be the best way in my opinion.
// start by getting the current page path (the one you are sending to tracker)
var pathname = window.location.pathname;
// ready handler to change the links on hosts not equal to location host
$(document).ready(function() {
$('a[href^="http://"]').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).click(function(e) {
_gaq.push(['_link', pathname]);
});
});

Resources