Changes in AngularJS Codebase
AngularJS is a JS Framework built for modernizing web apps with its great ability to extend HTML and creating Single Page Web Applications. It has some main aspects like Data Binding, Controllers, Services etc.
As we are dealing with Single Page Apps, we cannot have multiple HTML pages for every pages. The Pages are rendered dynamically by AngularJS. We refer to them as Routes. So, it becomes difficult for telling Web Spiders about the content on your website, as everything is on Single Page.
Thankfully, Modern Search engines are now understanding the web pages better. So, they have the ability to understand single page web apps. But still, they recommend taking precautions.
Title, Description and Keywords
When it comes to the Title, Keywords and Description of the page in HTML, it should be unique for all Routes in the web app. So, we can go with any of the given solutions for this:
- Using ng-bind – Using this directive, we can easily bind the <title> of the webpage with any dynamic variable in AngularJS.
Example: We can have our HTML as:<title ng-bind="html.title">Some Default Title</title>
and the corresponding variable in AngularJS as:
angular.module("myApp", []) .run(["$rootScope", function($rootScope) { $rootScope.html = { title: "Some Dynamic Title" }; }]);
- Modifying DOM manually – You can also write a Directive or Service to modify DOM manually. Given below Service changes the DOM using given functions:
angular.module("myApp", []) .factory("MetadataService", ["$window", function ($window) { return { setTitle: function (title) { $window.document.getElementsByTagName('title')[0].innerHTML = title; }, setDescription: function (description) { $window.document.getElementsByName('description')[0].content = description; }, setKeywords: function (keywords) { $window.document.getElementsByName('keywords')[0].content = keywords; } }; }]);
SEO friendly HTML Tags
Thetag tells the browser that this is an HTML document moreover it acts as a container for all other HTML elements, you must be aware of few tags like ‘Title tag’, ‘Meta Tag’ for descriptions, keywords etc/. Few other tags are also there which can help you implementing best practices for SEO. Lets take a look at these HTML tags:
- Canonical URL Tag : Search Engines like Yahoo!, Live & Google supports a “canonical url tag” to help webmasters and site owners eliminate self-created duplicate content in the index is, in my opinion, the biggest change to SEO best practices since the emergence of Sitemaps. The Canonical URL tag attribute is similar in many ways to a 301 redirect from an SEO perspective. In essence, you’re telling the engines that multiple pages should be considered as one (which a 301 does), without actually redirecting visitors to the new URL.How Does it Operate?
The tag is part of the HTML header on a web page, the same section you’d find the Title attribute and Meta Description tag. In fact, this tag isn’t new, but like nofollow, simply uses a new rel parameter. For example:<link rel="canonical" href="https://example.com/blog" />
This would tell Yahoo!, Live & Google that the page in question should be treated as though it were a copy of the URL example.com/blog and that all of the link & content metrics the engines apply should technically flow back to that URL.
- Google Authorship Mark Up Tag : There is a rich snippets schema which can be used to promote and highlight your company within the SERPs(Search Engine Result Pages), and it’s called ‘Rel=Publisher’. In basic terms, rel=”publisher” is an authorship markup (as is rel=”author”) from Google , which connects websites (not people) to the Google+ page of the publisher.
<link rel="publisher" href="https://plus.google.com/+Example" />
How to Implement Rel=’Publisher’
Just add the rel=”publisher” tag to the head of your site, with the URL of you Google+ Business page. BE CAREFUL – it MUST be a ‘business page’ not a ‘user page’. You need to point your Google+ business page at your site to verify the rel=”publisher” mark up. This can be done easily by going to the Google+ page > Edit > About > Add Your Website. It’s important that you use the canonical version of your site, or the mark up won’t work.
As with all Google authorship mark ups, you will not see instant changes in the SERPs as it takes a little while for Google to pick up the code. No one really knows how long it takes, sometimes it’s days, sometimes it’s months! There is a tool which you can use to test whether or not the code has worked called the Google Rich Snippet testing tool.. - Alternate Url tag : The rel=”alternate” hreflang=”x” annotations provide signals to Google (and Yandex) about the language and the targeted audience of a page and help them to serve up the correct language or regional URL to searchers.
<link rel="alternate" href="http://www.example.com/" hreflang="en-in">
It is important to note that Bing does not currently support hreflang tags. Other methods, such as content language tagscontent language tags, exist to help Bing understand the language and the targeted audience of a website.
Search Engine Friendly Hashless URL
When you are using AngularJS, you get a # in the URL so that it can maintain all the Routes on a single page. You can also easily remove this # from your URL. So, for example, the URL which was like https://redgirraffe.com/#/app/faqs can be easily converted to https://redgirraffe.com/app/faqs. It requires minor, but both Server Side and Client Side change. In order to achieve this, follow the steps given below:
Client Side – Set HTML5 Mode as True
angular.module("myApp", []) .config(["$locationProvider", function($locationProvider) { $locationProvider.html5Mode(true); }]);
Server Side – Rewrite everything to index.html
You need to enable URL Rewriting and forward all requests on index.html. This is because if you will open Hashless URL directly via a link, e.g https://redgirraffe.com/app/faqs, then Server will take it as a request and will try to locate the file /app/faqs on the server, which will give a 404, as there doesn’t exist any such file. Use the configuration below for URL Rewriting:
- If you are using Nginx Web Server, then add a location block to your nginx config file as:
server { location / { try_files $uri $uri/ /index.html; } }
- If you are using Apache Web Server, then edit your .htaccess as:
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>
Leave a Reply