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
Related
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 would like to ask for a help on my problem with url in an angular site.
I added this on my app.js
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
the problem is that when i try to put into my url like
wwww.websitename.com/admin
it will throw an server error page.. but if i will input
www.websitename.com/#admin
it will go to the page then the hashtag will be remove
i want it that it will go the page even without putting # on the url.
thank you guys ! :)
You need to make sure that your server is configured to return the same index.html file for any path specified after your domain. You also need to specify your base href for html5mode.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
Here is a good article explaining how to configure your angular app to use html5mode.
If you want to enable HTML5 mode for your Angularjs app, you will also have to configure your server so that whenever an unknown route is requested, it serves the index.html file.
For example with expressJS server,
After your routes definition, add a catchall route.
// Add a catchall route here
expressApp.get('*', (req, res) => res.status(200).send({
// #TODO serve index.html here
}));
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.
We are working in a project which uses Symfony2 + AngularJS.
Each one in a different domain (api.domain for Symfony2 and www.domain for the Angular project).
Now we are focusing on the SEO part. We use Prerender.io to create static snapshots to serve a good HTML Raw page to crawlers.
But the problem is when serving the "404 Page" on Angular:
$urlRouterProvider
.otherwise('/404');
The thing is, what we do is redirecting a nonexistent page to our "404 Page" with a 200 Header Status Code, which is very bad for SEO purposes...
Since AngularJS is not capable of generating, we have already tried 2 things:
1. Use a redirection with htaccess / Apache:
RedirectMatch 404 "/404"
2. Call to a web service which return us a 404 error:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head>
<title>404 Not Found</title>
</head>
<body>
<h1>Not Found</h1>
<p>The requested URL /do-not-access was not found on this server.</p>
</body>
</html>
And for the AngularJS side we tried to throw the header status code without success:
return $http.get(ENV.apiEndpoint + '/do-not-access');
None of this worked for us...
We also though about using a second "404 Page". The idea was redirecting our first 404 page to this second 404 page via htaccess with a 404 status code, but we think that will not work due to AngularJS internal redirection:
200 -> 301 -> 404
PS: I found: AngularJS html5mode and hard 404 which says "we have to configure our server to make a routing exception for your custom 404 page" but we really have no clue how to do it...
Are we focusing in a bad way?
There is other option?
How we can handle it?
Any ideas?
It seems that prerender.io offers a way to handle http header status.
For example, for a 404 page we just need to add this meta tag into our head tag:
<meta name="prerender-status-code" content="404">
Docs: https://prerender.io/documentation/best-practices