We have a catalog that loads an AngularJS application dynamically according to the defined subdomain. For example: http://subdomain.billiving.biz
We need to support dynamic title that will be set by AngularJS. I saw in Google documentation that we need to add this link:
<meta name="fragment" content="!">
Anything else we should do to set this correctly?
Thanks
You have to follow HashBang URL standard or HTML5 URL
Something like
angular.module('app', []).config(['$locationProvider', function($location) {
$location.hashPrefix('!');
}]);
Here is the good guide to follow Angular SEO
I eventually ended up using Push-State. This includes two changes:
Enabling Html5Mode:
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode({enabled: true});
}]);
Providing a base href from your app (when working local need full localhost path)
<base href="/">
That's it.
Related
I want defined robots.txt as you can see below to block robots from login url:
user-agent: *
disallow: /#!/login
Sitemap: http://mysite.ir/sitemap.xml
but google does not recognize # sign and ignore whole the site. how can i fix that problem.
As per i know angularJS is not good for SEO but yet you can do some basic SEO.
Anyway, this post may help you to create robots.txt Robot.txt in angularJS
I resolved this problem with $locationProvider.html5Mode(true); as you can see below:
(function() {
'use strict';
angular.module('myapp').config(stateConfig);
function stateConfig($locationProvider) {
$locationProvider.html5Mode(true);
}
})();
and set this in head section of index.html:
<base href="/">
with this changes angularjs removes # from urls in the, keep in mind that you should make some changes in server side.
I used html5mode in my application.
$locationProvider.html5Mode(true);
and when I use $window.location.href in my application it reloads the entire page.
If I remove $window and I use $state.go the page won't reload entirely like that.
Does anyone know why this is happening? Is there any solution to not reload the entire page when using $window?
The reload is indeed due to $window.location.href use.
You can use the $location.path method to change the URL without reloading the entire page.
$location.path('/newUrlValue');
You can also add a base tag in your headers for relative links:
<html>
<head>
<base href="/">
</head>
</html>
For browsers which can't handle HTML5 History API, a hashbang prefix will automatically used ('!' by default) and can be changed using the hashPrefix provider's method.
You can use this code below:
// enable html5Mode for pushstate ('#'-less URLs)
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
And add:
<base href="/" />
to your <head />.
I have a question and I don't know if it's possible.
I'm trying to remove the '#' in my jhipster website urls AND I saw that's difficult to do in my code.
exemple:
http://www.exemple.com/#/test -> http://www.exemple.com/test
So, is it possible to do that with an other way ? Like .htaccess or something else ?
I just want to precise, I'm working with an old version of jhipster and it's an angularJS application.
I'm generating the .war and i'm deploying it on a dedicated server with apache2 and my application is using the port 8000 so I made conf for virtual hosts. Maybe I can add something here ?.
Yes you can do that in AngularJs -
Basically you need # for non-html browsers or else without that they will make a http call.(So it is used for old browsers).
You can tell angular to use HTML5 mode-
In route config add html5Mode(true); at the end.
eg-
app.config(function($routeProvider,$locationProvider) {
$routeProvider.when('/home', {
templateUrl:'/views/home.html'
});
$locationProvider.html5Mode(true);
});
In Html head tag add base tag -
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
I am trying to get my AngularJS with html5mode enabled indexed by google.
In my app.js I have the following snippet:
$locationProvider.html5Mode(true);
In my index.html head I have the following:
<base href="/"/>
<meta name="fragment" content="!"/>
I expected to get requests on urls of the format /?_escaped_fragment_=support. Instead I'm getting requests on /support?_escaped_fragment_=.
Is there something wrong with my config or did I expect something weird?
according to the yearofmoo SEO article you should get this:
http://yourwebsite.com/?_escaped_fragment_=/some/page/with/ajax/content
YearofMoo - SEO
I'm having trouble getting path lookup to work with a AngularJS v1.2.0 and PhoneGap/Cordova Android application. I've come pretty far with html5mode(true) by setting <base href="."/> in index.html and then changing $routeProvider.when('/') to $routeProvider.when('/android_asset/www/index.html'). After that I am able to get redirectTo('login') to reach $routeProvider.when('/login') and there render templateUrl: 'static/partials/login.html' as expected.
The problem I have is that if I instead try to redirect to the login page from my Javascript code with $location.path('/login');, the route is found but templateUrl loading fails with an insecurl exception.
I've tried whitelisting access to file:// by using the new angular-sanitize module, but that does not help.
How can I make $location.path() do the same things as redirectTo so that the partial is loaded? Or is there some other way to solve this problem?
UPDATE: I got a bit forward by adding a call to replace() after the path function, e.g.:
$location.path('/login').replace();
but that seems like a hack, and it still causes the templateUrl in the otherwise route to fail with the same exception.
Any ideas on what might be wrong? Is it that html5mode(true) just does not work at this moment with Phonegap and the only way to fix this is to set it to false and add hashtags to every path (like is done in the angular phonegap seed project)?
For future reference, this is how I managed to solve the problem:
AngularJS currently does not seem to support html5mode(true) inside a Cordova application because of the insecurl problem I reported. What I had to do is add
var h5m = (typeof html5Mode !== 'undefined') ? html5Mode : true;
$locationProvider.html5Mode(h5m);
which gives me the possibility to explicitly set html5Mode in the PhoneGap index.html with a global variable:
<script>
var html5Mode = false;
</script>
So now $location.path('/login') as well as redirectTo: 'login' works, but links in html files, don't. To get those working in PhoneGap, with html5Mode disabled, I had to add #/ in front of every link, e.g. login.
That makes PhoneGap work, but breaks the web page which uses History API with html5Mode(true). The last piece of the puzzle was to add <base href="/"/> to the web page's index.html (and leave it out of the index.html of the PhoneGap project.) So now even though I have a link that says #/login in the web page, I get to the url http://example.com/login and don't see any hashes in the address bar.
**
So in the end I have History API working in my web page and History API disabled in the PhoneGap project (where there really is no need for History API as there is no address bar). The only downside is the extra #/ I have to put in each template html file, but that is a minor annoyance compared to the ability to use all of the same html and javascript files for both web and mobile.
I had this same problem as well. I managed to fix it by skipping the leading slash in the route config:
$routeProvider
// route for the foo page
.when('/foo', {
templateUrl: 'foo.html', //previously: '/foo.html'
controller: 'fooController'
}) //etc.