I'm trying to make my meteor app visible to crawlers.
I've added the Spiderable package and installed Phantom.js.
When I to go localhost:3000/?_escaped_fragment_=, it's blank.
When I view the source, it's almost empty, and it ends right before the <script> tag that loads the Google Maps API:
<!DOCTYPE html><html><head>
<link rel="stylesheet" href="/eecc60f7c55db2915697d4beb05274f355ad19e4.css">
<title></title>
<!-- Google Maps -->
</head></html>
I haven't encountered any issues with this before, but it got me thinking that maybe I shouldn't be including custom <scrpit> (or <link>) tags in the app's <head>. If this is true - what is the correct way to load external assets? If it's not related to the issue, I'd appreciate any advice.
Thanks!
In relation to your first question, I am not 100% sure about this being the cause of your problem, but to answer the second, you shouldn't be including scripts/stylesheets in the head of your Meteor application.
Meteor combines all of the client-side js, css, and html for your app, and sends it all together to the client. This means you can just include your stylesheet and scripts in your app's client folder. I would try putting your stylesheets/scripts in the correct place and removing the links in your head and see if that solves your issue.
You can find more detailed descriptions of meteor here.
Related
When installing Google Tag Manager I have to add 2 code snippets into my website: one into the <head> section and the other in the <body> section. The website CMS I'm using (Teachable) doesn't give me access to the <body> section, only the <header>.
Is there a way to install Google Tag Manager properly without access to the <body>?
I tried putting both code snippets in the <head> section.
The <body> part is not needed.
The <body> part is just a <noscript> part of GTM. GTM is a js framework. The only thing <noscript> helps with is loading only pixel type tags when client has js disabled.
But people don't have js disabled. Also, it's likely that your site doesn't work when JS is disabled. Also, at the point when JS is indeed disabled, firing pixels is very likely the least of your concerns. Noscript is the remnant from the past, effectively.
I normally never install the noscript part of GTM.
I have a static only site which is hosted on Google App Engine. Infront of this sits Cloudflare CDN.
I have ran Googles Page insights to give me an idea how my website is performing, it is not performing well according to Google. I want Google to see it is performing well for SEO purposes.
This is the report I get from Google:
2 types of recommendations come:
1) Eliminate render-blocking JavaScript and CSS in above-the-fold content
Show how to fix
2) Leverage browser caching
For problem 1 I have tried many things I have read on Google. I have tried adding 'aync defer' to the link attribute. I have tried to make the media = print so that the browser would first render the html then apply the css later. I have tried moving the links to the stylesheets into different locations around the html document. Essentially I have tried to follow this: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery.
As of right now my html page (my website is just on static html page) structure looks like this:
<html>
<head>
<!-- all links/references to css files and javascript files -->
</head>
<body>
</body>
</html>
My second issue is browser caching which I do not understand why I am getting this error. Google App engine caches the files and then on top of that Cloudflare CDN sets the cache headers (and also gzip) on the documents so that the browser caches it (below is the Cloudflare caching components turned on).
I can see the browser is caching the static files and using those cached files in chrome tools when I run the page:
This is really the first time I have created a production static website so I may be misunderstanding many things, but I am looking how eliminate those 2 issues.
Cheers
I don't know if google is measuring this but it is often advised to load Bootstrap and Jquery from the following addresses as they are used by a lot of website and hence are already in browsers caches even if they never visited your website. (The same can certainly be found for font-awesome).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/YOUR_BOOTSTRAP_VERSION/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/YOUR_BOOTSTRAP_VERSION/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/YOUR_JQUERY_VERSION/jquery.min.js"></script>
I have a bigcommerce store. I tried to use a 3rd party tracking tool that adds some url parameters to the url for tracking. It works well on all pages, except of home page. For example
http://twigpencils.com/cloth-pencils?param=1 and same version without the param (just delete the param=1) bring me to the same page (with the url param on the relevant page).
However, when trying the same on the home page
http://twigpencils.com/?param=1 creates a 404 error vs regular home page without the param (?param=1) that works just fine.
Any idea how to fix?
Thanks
John
John, I want to help you with this but first, I see 3 issues that could be affecting the behavior you describe:
First, a Broken Meta Tag
At around line 8 of your HTMLHead.html file, your meta tag for keywords is broken:
<meta name="keywords"twig pencil,apple pencil,apple pencils,dictionary pencil,graphite,chaparral,colored pencils " />
It's missing the content= attribute. It should look like this:
<meta name="keywords" content="twig pencil,apple pencil,apple pencils,dictionary pencil,graphite,chaparral,colored pencils" />
Second, A Major Syntax Error
This error may be breaking several functions on your page.
Uncaught SyntaxError: Unexpected token < Line: 34
At around line 34 in your HTMLHead.html Panel file, a couple lines above where you placed the Google Webmaster Verification meta tag, one of your javascript tags is incomplete:
<script type="text/javascript" async defer
</script>
<meta name="google-site-verification" content="3TJvxTrq55AqFcwuo2KtEH1uUMBZPyeQ5LBnmVh8OKk" />
The problem is at the end of this line <script type="text/javascript" async defer, as its missing a closing >. The code should at least look like this:
<script type="text/javascript" async defer>
</script>
<meta name="google-site-verification" content="3TJvxTrq55AqFcwuo2KtEH1uUMBZPyeQ5LBnmVh8OKk" />
However, considering it has async defer, it leads me to believe that it was supposed to load an external script, and either someone deleted the srcattribute and also accidentally deleted the >, or some improper BC commenting or something of that nature is breaking the tag. I can help further if I saw the actual code as it is in the BC Design backend.
Third, Non-WWW or WWW
I notice that when I navigate to http://twigpencils.com/?param=1, it takes me to http://www.twigpencils.com/, which would be fine, except that when I navigate to http://twigpencils.com/cloth-pencils?param=1 it takes me to http://twigpencils.com/cloth-pencils?param=1.
This is a fairly major problem, but is fairly easy to solve.
Either you need to forward from WWW to non-WWW on your domain/hosting backend, and/or do the same on your Google Webmaster Panel, or do both.
Before we try to figure out the main problem you mentioned, you should resolve these 3 issues first as they could be affecting the behavior you describe, but are at the very least breaking many things on your site.
Let me know if this helps and if you have nay other questions.
This has to do with a broken .htaccess file, causing PHP to not correctly parse the parameters. Unfortunatly bigcommerce does not allow you to edit the .htaccess file directly.
I'd recommend checking out shopify or another platform. I've been trying to get support from bigcommerce on this for weeks, to no avail. Their support team is not very helpful.
There may be a better forum for this, but here's my problem:
I'm using several different CDN sites for CSS, jQuery, jQuery Mobile, jQuery.validate, etc. Sometime in the very recent past (last few days) the CSS that jQuery validate uses stopped highlighting the affected text boxes in red, and changing the messages to a red font.
I initially thought it was the addition of blockUI.js & css, but then I noticed that all of my fiddles I created to make the bits & pieces of this project had been affected as well, and none of them had ever had blockUI added to them, so that wasn't it.
Then I thought maybe something had changed in Chrome, so I tried in Firefox, same thing. I have a remote server where I upload test code, and it was still working normally, until I reloaded the page, then the same thing. That tells me that the change occurred in one of the CDN based files.
My question is, since I don't have downloaded versions of each of the .js & .css files, how can I determine what the change was? Is it possible to download the previous version (the version numbers in my references hasn't changed, so there's no way to tell from them.
I know I can simply go create my own .css for the highlighting & font issues, but it seems like whoever hosts these various CDN's shouldn't change them underneath you? FWIW, my primary suspect is: http://jquery.bassistance.de/validate/demo/css/screen.css, especially since it hasn't been versioned. I haven't had a chance to try to verify this yet.
For reference I'm using this array of CDN locations for my current project:
<link href="http://malsup.com/jquery/block/block.css?v3" rel="stylesheet">
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript" src="pcbclient.js"></script>
There is no CSS file as part of jQuery Validate. This plugin simply toggles two class names and those have always been .valid and .error.
The root of your problem is right here...
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
That's not a CDN link, nor is that CSS file part of the plugin. It's the CSS file used solely for the online demo page.
Everything broke for you because that URL no longer points to a CSS file. However, you should not have been hot-linking to another website's CSS file in the first place. (If it's not a URL from a CDN, it could be considered as stealing the other website's bandwidth.)
If you liked how that online demo page looked, you could have easily examined and copied its CSS properties into your own CSS file, provided that the copyright license allows it.
You might want to carefully review the rest of your file includes' URL's to make sure those are all part of an official CDN and not just hosted on these developers' websites.
It appears I was correct in surmising that the problem laid with the CSS at: http://jquery.bassistance.de/validate/demo/css/screen.css.
I still don't know what changed, but I downloaded the source from: http://jqueryvalidation.org/ (as I should have after deciding to use it), added it to my ASP.NET project and the problem has been resolved.
I have read How to integrate Facebook's Open Graph in a Meteor application? and followed it closely, however, the og tags are still not registered):
I would just like to set several images to ensure that several thumbnails appear when u type http://bubble.meteor.com in facebook
Here are my codes:
(Updated)
<head>
...
<meta property="og:image" content="http://bubble.meteor.com/img/ogimage1.png">
<meta property="og:url" content="http://bubble.meteor.com">
<meta property="og:title" content="Emory Bubble">
</head>
Am I doing anything wrongly? Thanks!
First of all, an <html> tag does not belong inside the <head>. Meteor always uses the HTML5 doctype definition. Even if you would manage to change it to XHTML, you will probably end up with invalid XHTML, because extension packages that inject HTML assume HTML5.
Second, there is no need to declare any namespace for the OpenGraph tags. Strings like "og:title" are just opaque data inside a property and they do not affect the HTML parser.
UPDATE
I checked it using Facebook's debug page and it does not work indeed:
http://developers.facebook.com/tools/debug
This yielded an "Error parsing input URL, no data was scraped" error.
I also checked the page using the special escaped fragment URL that should trigger the spiderable package:
http://bubble.meteor.com/?_escaped_fragment_=
The resulting page contains no HTML content and the Javascript tags were still present, suggesting that the spiderable package does not work. Did you add that one to your project? (meteor add spiderable).
If you added it, it does not work. The spiderable package returns the normal page if running PhantomJS fails. You should check it on your local development version, use the above URL to trigger spiderable.
I also noticed that you are using 'school' as og:type, which is not a valid type as far as I know. Try 'website' instead.
UPDATE 2
Also checkout this screencast by Chris Mather about the spiderable package:
http://www.eventedmind.com/posts/meteor-the-spiderable-package
In this screencast he mentions a potential problem with subscriptions that are never marked as ready and make the spiderable package fail. Maybe this is causing your issues?