//Angular Universal: What You Need to Know for SEO
1549040095 angular universal what you need to know for seo 760x490 - Angular Universal: What You Need to Know for SEO

Angular Universal: What You Need to Know for SEO



If you use Angular to power your website, you have an additional hurdle in SEO. Fortunately, Angular Universal facilitates jumps.

Keep in mind that "easy" is a relative term here.

You will almost certainly need to call on a development team.

But once the finished product delivered, your site will offer pages optimized for research.

In this guide I will explain Angular Universal and why it is important for marketers.

The problem of referencing

Angular is a fantastic setting. for the provision of modular and user-friendly web applications. Unfortunately, it's a little hostile to SEO.

This is for two reasons.

First, Angular relies heavily on the script to provide content. As a result, some search robots do not "see" the content visible to a user.

See the documentation Angular Universal . Unsurprisingly, this page is rendered with Angular.

When you scroll down the screen, you will see a lot of content. You think everything is indexable.

Not necessarily. Right-click on the page and select "Show Page Source" from the pop-up menu that appears.

There are only 100 lines of source code. Nowhere inside, you will not see the content you saw when you viewed the page normally.

This is, in a nutshell, the problem posed by Angular. Human visitors will see the content, but search robots will see the source.

And the source does not have the content!

There is another SEO problem: speed. Angular applications often do not load quickly.

Some sites will display a blank screen for a few seconds before displaying the home page. This can cause visitors to bail out if they are impatient.

The speed of the site is a mobile ranking factor ; your ranking will suffer if your site does not load quickly on mobile platforms.

But Google says that …

Google claims that its bot can index sites based on scripts. There is plenty of evidence to support this, but that does not mean you can avoid extra effort in optimizing an Angular site.

To begin, Google is not the only search engine in the city. If you want your Angular application to be ranked on Bing and DuckDuckGo, you must take steps to make this happen.

Then, Google may index some angular sites, but not yours. All angular applications are not equal. Yours could be the exception of Google's indexing algorithm.

In my experience, sites that switch from HTML to Angular lose considerable bulk traffic from the search engine. In fact, three customers came in last year and we had to repair the site after the losses due to Angular.

There Are Solutions

Fortunately, there are ways to make your angular site user-friendly for SEO.

One of the most popular options is to use dynamic rendering . It is at this point that you use a tool such as Puppeteer to generate static HTML files more easily consumable by web page crawlers.

Then configure your web server to direct search bots to pre-rendered pages Human visitors navigate around the normal angular application.

This is a decent solution, but it still does not solve the problem of speed. For that, you will probably want to use Angular Universal.

What is Angular Universal?

Angular Universal runs your web application on the server rather than in the browser.

This is an important distinction. Normally, angular applications are client-side applications.

The problem with search bots is that they do not always deal with client-side code in the same way that your browser does when it shows you a web page. That's why you noticed a difference between the Angular Universal documentation page and its source code.

Angular Universal supports server-side rendering (SSR). This predefines the HTML and CSS content displayed to the user in advance.

This means that a user will load a static HTML page instead of a client-side code. As a result, the page will load faster.

Moreover, since it is static HTML, search robots can index the content.

Everyone wins.

Why That's Important

If you love digital marketing, you already know that a big part of the battle involves gaining online visibility. That's why you contact influencers, post updates on social networks and optimize your site ranking.

In simple terms, your site can not be categorized if it can not be indexed. If Angular is feeding your website, you must take additional steps to ensure that its content appears in the search engines.

That's why you need a universal Angular solution.

Disadvantage, of course. will it cost money? You will need to hire a qualified development team to add SSR technology to your website.

This is an expense that should more than bring in long-term if your site ranks well for the key search terms related to your niche.

How to run an angular application on Angular Universal

If you'd like to get familiar with the code or just want to save on development costs, you can deploy a server-side application by yourself- even.

Before you start, it is best that you master Angular, the command line interface, TypeScript servers and Web. Otherwise, you will probably have trouble.

The steps to deploy an Angular Universal Application are as follows:

Install the necessary dependenciesUpdate the angular applicationUse the CLI to create a UniverselSet bundle on the server to run a Universal. bundleRun the application on the server

There are a lot of things in these five steps, so I will cover them in turn in the following sections:

Install the dependencies

If you have any experience with Angular, then you already know Node.js . This is the runtime that pushes TypeScript code into a JavaScript application.

Node.js comes with a package manager, named Node Package Manager or npm for short. You will use it to install the dependencies.

Open your command line window and run the following code:

npm install -save @ angular / platform-server @ nguniversal / module-map -ngfactory-loader ts-loader

Give him a few moments (or several moments) to install everything.

Update Your Angular Application

Next, you will need to prepare your Angular application for universal deployment. This involves four steps:

Add Universal Media. Open your root module (usually AppModule) and add an application ID to the BrowserModule import. You will do this in the "imports" section just below the @NgModule declaration. Create the server root module. Then you need to create a new module named AppServerModule. Make sure that it imports ServerModule from the server-platform dependency that you added in the previous step. Create the main file. You will need a master file for your Universal kit. Create this at the root (in the src folder) and export the AppServerModule class from this file. Create a configuration file. The AppServerModule class needs a configuration file. Create one in JSON format. It should look something like this: wAAACwAAAAAAQABAEACAkQBADs= - Angular Universal: What You Need to Know for SEOangular universal what you need to know for seo - Angular Universal: What You Need to Know for SEO

Create a new build target

Your angular source directory should include a file named angular.json. You will need to update this file in the "Architect" section.

It will look something like this:

"architect": {
"build": {…}
"server": {
"constructor": "@ Angular-devkit / build-angular: server",
"options": {
"outputPath": "dist / my-project-server",
"main": "src / main. server.ts ",
" tsConfig ":" src / tsconfig.server.json "

Note the attribute" constructor "four lines lower. The value after the colon ("server") is the name of the server. You can update it if you want to give it another name.

You can now create your application. Assuming you keep the server named "server", just go to your command line and type the following:

ng run my project: server

You should see a result looking like this::

Date: 2018-12-12T12: 42: 09.601Z
Hash: 1caced0e9434007fd7ac
Time: 4122ms
Block {0} main.js (main) 9.49 kB [entry] [rendered]
chunk {1} styles.css (styles) 0 bytes [entry] [rendered]

Configure the server

Next, you must configure a Universal Server to launch the package. This is how you will serialize the application and return it to the browser.

To do this, create a new file called server.ts. In this file, you define the engine of your application.

The details of this code are a bit out of the scope of this tutorial. Feel free to look at the example of the Angular Universal Docs .

Run the application on the server

After all this, you are finally at a

To do this, configure a web pack that handles the server file. ts created in the previous step.

Name the webpack configuration file. .server.config.js. Again, check the Angular Universal documentation for the exact type of code that belongs to the file. You may need to adapt this code to your own naming convention.

Once you are done with the file, you will have two folders in the dist folder: the browser and the server.

Run the server code, just type the following on the command line:

node dist / server.js

Congratulations! You are now using server-side code.

In Brief

Although Angular allows developers to quickly produce high quality applications, it does not always work well with search engine robots.

Fortunately, Angular Universal can pre-display Angular application pages as static HTML code so that they are detectable and indexable. They will also be loaded faster.

I have always recommended having an HTML base and using Angular to display the other elements of the page. I make this recommendation about everything related to JavaScript since 2010. This process of Angular Universal is identical. I can not tell you that many sites have been destroyed by changes to Angular and JavaScript. Be careful with yours and have it always checked by an SEO company before it is launched.

The opinions expressed in this article are those of the guest author and not necessarily those of the search engine. Associated authors are listed here .

About the Author

1537617548 539 if you do not use remarketing lists and similar audiences for search you leave money on the table - Angular Universal: What You Need to Know for SEO

John Lincoln is the CEO of Ignite Visibility Professor of Digital Marketing at 39 University of California at San Diego and author of the book book Digital Influencer, Guide to Achieving the Status of Online Influencer . Throughout his career, Lincoln has worked with hundreds of websites, ranging from start-ups to last names, and has won awards in SEO, CRO, Analysis and Social Media. In the media, Lincoln has been featured on sites such as Forbes, Entrepreneur magazine, magazine Inc., CIO magazine, etc.