My application uses AngularJS for frontend and .NET for the backend.
In my application I have a list view. On clicking each list item, It will fetch a pre rendered HTML page from S3.
I am using angular state.
app.js
...
state('staticpage', {
url: "/staticpage",
templateUrl: function (){
return 'http://xxxxxxx.cloudfront.net/staticpage/staticpage1.html';
},
controller: 'StaticPageCtrl',
title: 'Static Page'
})
StaticPage1.html
<div>
Hello static world 1!
<div>
How do I do SEO here?
Do I really need to do HTML snapshot using PanthomJS or so.
Yes PhantomJS would do the trick or you can use prerender.io with that service you can just use their open source renderer and have your own server.
Another way is to use _escaped_fragment_ meta tag
I hope this helps, if you have any questions add comments and I will update my answer.
Do you know that google renders html pages and executes javascript code in the page and does not need any pre-rendering anymore?
https://webmasters.googleblog.com/2014/05/understanding-web-pages-better.html
And take a look at these :
http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
http://wijmo.com/blog/how-to-improve-seo-in-angularjs-applications/
My project front-end also has biult on top of Angular and I decieded to solve SEO issue like this:
I've created an endpiont for all search engines (SE) where all the requests go with _escaped_fragment_ parameter;
I parse a HTTP Request for _escaped_fragment_ GET parameter;
I make cURL request with parsed category and article parameters and get the article content;
Then I render a simpliest (and seo friendly) template for SE with the article content or throw a 404 Not Found Exception if article does not exists;
In total: I do not need to prerender some html pages or use prrender.io, have a nice user interface for my users and Search Engines index my pages very well.
P.S. Do not forget to generate sitemap.xml and include there all urls (with _escaped_fragment_) wich you want to be indexed.
P.P.S. Unfortunately my project's back-end has built on top of php and can not show you suitable example for you. But if you want more explanations do not hesitate to ask.
Firstly you can not assume anything.
Google does say that there bots can very well understand javascript application but that is not true for all scenarios.
Start from using crawl as google feature from the webmaster for your link and see if page is rendered properly. If yes, then you need not read further.
In case, you see just your skeleton HTML, this is because google bot assumes page load complete before it actually completes. To fix this you need an environment where you can recognize that a request is from a bot and you need to return it a prerendered page.
To create such environment, you need to make some changes in code.
Follow the instructions Setting up SEO with Angularjs and Phantomjs
or alternatively just write code in any server side language like PHP to generate prerendered HTML pages of your application.
(Phantomjs is not mandatory)
Create a redirect rule in your server config which detects the bot and redirects the bot to prerendered plain html files (Only thing you need to make sure is that the content of the page you return should match with the actual page content else bots might not consider the content authentic).
It is to be noted that you also need to consider how will you make entries to sitemap.xml dynamically when you have to add pages to your application in future.
In case you are not looking for such overhead and you are lacking time, you can surely follow a managed service like prerender.
Eventually bots will get matured and they would understand your application and you will say goodbye to your SEO proxy infrastructure. This is just for time being.
At this point in time, the question really becomes somewhat subjective, at least with Google -- it really depends on your specific site, like how quickly your pages render, how much content renders after the DOM loads, etc. Certainly (as #birju-shaw mentions) if Google can't read your page at all, you know you need to do something else.
Google has officially deprecated the _escaped_fragment_ approach as of October 14, 2015, but that doesn't mean you might not want to still pre-render.
YMMV on trusting Google (and other crawlers) for reasons stated here, so the only definitive way to find out which is best in your scenario would be to test it out. There could be other reasons you may want to pre-render, but since you mentioned SEO specifically, I'll leave it at that.
If you have a server-side templating system (php, python, etc.) you can implement a solution like prerender.io
If you only have AngularJS-only files hosted on a static server (e.g. amazon s3) => Have a look at the answer in the following post : AngularJS SEO for static webpages (S3 CDN)
yes you need to prerender the page for the bots, prrender.io
can be used and your page must have the
meta tag
<meta name="fragment" content="!">
I'm building an uploader into my web page and trying to use flow.js as my uploading tool. On the server-side I have a WCF service with a generic handler as the target for my uploader. I do get the uploader to send a request to the handler, and when I inspect the contents, I get just the query string, but not the actual file content. Or at least I don't know where it is.
Looking at Fiddler I can see that the server call was a GET with a query string of parameters. I don't see the file content there either. What am I missing?
I was trying to use ng-flow which is based off of flow.js. A quick trip to flow.js github (https://github.com/flowjs/flow.js) and I realized that the GET is a test to get chunks for your files initialized, then the POST with the file chunks is sent. If you don't care for chunking, then set option 'testChunks' to false when doing your flow-init. Like this:
<html flow-init="{target:'SomeFileHandler.ashx',testChunks:false}">
Doing this you will only receive the POST with the file. Hope this helps someone in the future! I may edit this later when I decided to handle chunks. Also, I did find an ASP.NET MVC implementation that may be an interesting read here:
https://github.com/DmitryEfimenko/FlowJs-MVC
I'm adding a page to a complex Pyramid-based app that uses Handlebar templates.
I need a file download URL that doesn't need a template, but the system is giving me a 404
code for missing template anyway.
How do I tell a view at configuration time "do not use a handlebar template with this one?"
This was a red herring; the URL was wrong but the log file mentioned a missing template so I was focused in the wrong direction.
I had to get a custom redirection piece of code from one of the developers on this project and I have it working now.
Hello I am developing app on angular and I use angular translate plugin with static file loader. Everything works fine but I have question is there a way to set a defaul language? I know that you can set a fallbackLanguage but it doesn't work for me or maybe it doesn't work with static file loader? I mean that in my app language is loaded via user setting in system (by sysytem here I mean our database holds what user culture type is) so there can be a user that has some strange locale set and app doesn't have translations for it than I would like to show it in English by default, same thing would come when there is missing translation for users language. Here is way I set up whole translateProvider:
$translateProvider.useStaticFilesLoader({
prefix: '/languages/',
suffix: '.json'
});
$translateProvider.fallbackLanguage('en_US');
$translateProvider.preferredLanguage('pl_PL');
And way I think of it is: if I don't have pl_PL.json file en_US.json should be loaded but instead in template the key isn't translated but just printed. Maybe I need to do dometing more?
$translateProvider.preferredLanguage('en_US');
You don't know that the user wants pl_PL during app initialisation; you have to wait until you've checked your database and then call $translate.uses('pl_PL'); to override the preferred language.
I hope the following isn't too tricky.
I have a simple html button. Now I want to open a filechooser as soon as a user clicks on this button.
I do this like the following:
$('.button').click(function()
{
$('<input type="file"/>').attr('value');
});
This opens a filechooser, but I want this file-chooser to only show files on the server, not on the client. I've searched the net but couldn't find an adequate solution so far.
Any proposals are welcome :)
Impossible, sorry. You'd need to use server side code to make a tool that allows the end user to browse the server's files.
The file input is used for the end user to choose file(s) on their machine. It has no knowledge of the server's files.
It's not tricky, but you can't use Input tag for it. The steps are:
Create a module to traverse the directory on your server and output is a JSON format in whatever server implementation that you choose
Create a REST endpoint to give the browser the JSON output from step #1
Use AJAX to call this REST webservice and get the directory listings
Use Tree Widget to basically build the file structure based on JSON (I am sure if you look, one is probably there already for you to use)
There's no simple way to do it. If you use jQuery UI you can use a plugin like this:
http://gusc.lv/jquery/gcmedia.html
With a server-side scripts that outputs a list of the files you want to make browseable.