AngularJS SEO for 404 Status for Document Similar to This Website

0 votes

 trying to figure out how to get 404 document status error for Page Not Found on my AngularJS App to maintain good SEO. I would like to do something similar to how the Red Bull Sound Select website does it, but I'm not sure how are they doing it?

example 404 URL

https://www.redbullsoundselect.com/no-page-here enter image description here

As you can see in the above example, the URL changes to /404 and you get a 404 document status error for the original path in the URL i.e no-page-here



On my AngularJS app I just have:

.otherwise({
    class: 'page-not-found',
    title: '404 Page Not Found',
    description: '404 Page Not Found',
    templateUrl: '/app/static/404.html',
    controller: 'mainController as mainCtrl'
});

I could use something like:

otherwise({
    redirectTo: '/404'
});

This is similar to what the redbull site have but it still doesn't give the 404 document status error. ( also changing the URL to 404 rather than maintaining the original URL, which isn't great for SEO either but at least the bad URL would not be indexed by Google.)

I thought I could try making a non existing http request in Angular to get a 404 xhr status but I don't think this would be enough.

I've read some answers that suggested using prerender.io but this is something you have to pay for, which seems a bit much just to get a 404 page working correctly.

Perhaps, there is something we can do in our .htaccess to handle 404 pages diferently? At the moment we have rewrite rules so that any requested resource which does not exist will use /index.html. Perhaps we can make an exception for how 404 pages are handled in Apache.

UPDATE

I found on the redbullsoundselect.com that they are using the following in their app.js

$stateProvider.state("404", {
  url: "/404",
  templateUrl: "/views/site/404.html",
  controller: "NotFoundController"
});

Although, I still don't understand how this logic is working. I looked in their NotFoundController but not much seems to be happening in it.

Could it have something to do with them using ui.router instead of ngRoute as I am?

Feb 27 in Others by Kichu
• 16,050 points
39 views

1 answer to this question.

0 votes
angular.module('app', ['ui.router'])
       .config(config)
       .run(run);

config.$inject = ['$httpProvider', '$stateProvider', '$urlRouterProvider'];

function config($httpProvider, $stateProvider, $urlRouterProvider) {

    $httpProvider.interceptors.push('404');

    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/login");

    // Now set up the states
    $stateProvider

    // This will be helpfull if in your application you want to redirect it to state '404' based on some false condition occured.
    .state('404', {
       url: '/404',
       templateUrl: '/views/site/404.html'
    })
}

//This peace of code will be called when you will get http response 404 OR 403 xhr status.
angular.module('app').factory('404', unautherizedService);

unautherizedService.$inject = ['$rootScope', '$q', '$state'];

function unautherizedService($rootScope, $q, $state) {
    return {
        responseError: function(response) {
            if (response.status === 404 || response.status === 403) {
                $state.go('404'); // OR you can fire a broadcast event to logout from app and redirect to 404 page.
                event.preventDefault();
                return $q.reject(response);
            }
            return $q.reject(response);
        }


use this to achive the 404 error message for page not found on your angularjs app 
answered Feb 28 by narikkadan
• 7,860 points

Related Questions In Others

0 votes
1 answer

PHP Convert String to SEO Friendly Url For Bengali Language Type

$string = preg_replace("/[^a-z0-9]/u", "$separator", $string);  change the ...READ MORE

answered Feb 14 in Others by narikkadan
• 7,860 points
37 views
0 votes
0 answers

SEO - How to programmatically check if a website has been Banned by Google

i wanted to link a website to ...READ MORE

Feb 14 in Others by Kichu
• 16,050 points
38 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24 in Others by narikkadan
• 7,860 points
73 views
0 votes
1 answer
0 votes
1 answer

AngularJS SEO - Once and for all

java script cant be or wont be ...READ MORE

answered Feb 14 in Others by narikkadan
• 7,860 points
20 views
0 votes
0 answers

Angular and SEO indexing

app.config(["$routeProvider", function($routeProvider) { $routeProvider .when("/", ...READ MORE

Feb 14 in Others by Kichu
• 16,050 points
13 views
0 votes
1 answer

SEO With Angular and ASP.NET MVC (not SPA)

the best thing you can do is ...READ MORE

answered Feb 17 in Others by narikkadan
• 7,860 points
11 views
0 votes
1 answer

AngularJS SEO - Once and for all

javascript is not compiled by google bots ...READ MORE

answered Feb 20 in Others by narikkadan
• 7,860 points
36 views
0 votes
1 answer

How to maximize SEO of an internationalized website?

there is no single answer to SEO ...READ MORE

answered Feb 11 in Others by narikkadan
• 7,860 points
34 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP