Video details

Martina Kraus - SEO in Angular? No big deal with SSR and Angular Universal | AngularUP 2021

Angular
03.21.2022
English

SEO in Angular? No big deal with SSR and Angular Universal "The concept of Single-page Applications has great benefits such as better caching capabilities or just rendering the content that is updated without re-rendering the whole application.
But it also has one problem: the JavaScript code runs in one single HTML page. Recent search engines don’t always pre-render the page before and just evaluate the empty page. In this talk, Google Developer Expert Martina Kraus will give a brief introduction to common best practices for SEO in Angular. Additionally, with small live coding examples she will show how you can improve the loading time by pre-rendering your application with Angular Universal." Martina Kraus -
Senior Software Engineer, Kraus Consulting IT "Martina is a Google Developer Expert in Angular and Web-Technologies. As a Trainer, Consultant and Speaker she focuses on implementing highly scalable software-solution with WebAssembly and Angular. She is the Founder of the JavaScript User group and a team member for ngGirls Events and Co-organizes the local Angular Leipzig Usergroup and the german Angular Conference NG-DE (https://ng-de.org/)."

Transcript

So I will start. So yes, again, thank you so much for having me. I wish I would have been there in person, but hopefully next year and I'm definitely actually wanted to come over to you and take a look. And really I love Tel Aviv, what I've heard so far. So I really, really hoping it turns out that I can visit it soon. So yeah, but today I'm going to talk about the SEO in Angular and of course how you can achieve that even better with server side rendering and Angular universal. First of all, of course, why is Angular so powerful? Why do we want to all use Angular? Of course, we have just one index HTML file, we have just one file and every content inside is rendered in just one HTML file. So we're putting a lot of JavaScript code actually to the web browser and everything is just rendered inside the web browser. Because back in the day, back in the day we used PHP, we rendered everything on the server and put strings together and just pushed everything inside the client. So we just needed to refresh the whole page even if it just would have fetched some data. That is of course a bad user experience. So we pushed everything to the client with client side rendering and hence of course a wave better performance so far to Angular. What is SEO? Actually, if you really aren't familiar with what this actually means, basically this we want to be when we are producing a webcam of us or our product, for example, we produce a Cat Tshirts or something like that. And someone is searching for Cat T shirts, we want to be the first display when someone is searching for Cat T shirts, this is our goal and this is actually what SEO is. We want to and we will learn to talk how we can achieve this and what might be the issue of singletext application to actually achieving this goal. So basically, of course, SEO increases their organic discovery. Like even though if someone just maybe type in Cat, staying at this example, inside the search console, we might be findable by someone who isn't necessarily looking for Cat T shirts. But just because the person types Cat into the search console, we might appear and then a person might think, yeah, to a beautiful Cat out there, I want to have a Cat Tshirt. And so it's a great 24/7 promotion and of course a great marketing for us having a great SEO. We started as well. Maybe it already occurred to you that you are searching something maybe on the overflow and we attempt to think the search results being on the first five top five search results, we trust them more because Google ranked them. For example, Google, they ran them on the top five results. So we tend to think yeah, this answer or this link might be really trust truthfully and the credibility is really high. So we tend to click on these pages, of course, a lot more than some result that is on the 11th page or something. So yes, it also improves the credibility and trust of our web pages and as well as a good return of investment since you will see that you don't have to do actually so much to having a great SEO. But we will come to that later. So what is actually the big deal of SEO now with Amola or specific single page applications? Of course we need to know a little bit how search engine working. But first of all, we need to know search engine quotes for the index. Html. Of course they're having a list of a lot of websites and they call it for the index. Html. But wherever they see them when they crawl into Angular page, nothing actually because it's just plain HTML and there is the common app root. Html over there. But this of course is selected for another web component, an Angular component, but nothing more. Right. So there's nothing for the corner to actually get out of this web page and this issue we need to conquer. And this is what I will talk about in my talk today. So let me shortly give small introduction of myself. Again, really great. So yes, I'm a Google expert in England. I'm working actually with a lot of clients as a trainer, consultant. And of course I emphasize myself, I focus myself on Rhett state management and of course SEO to help companies improve their discoverability on the world by step. If you have any kind of question, you can always Ping me on Twitter. My DMs opened up only for SEO, but any other stuff actually Angular related as well of course. And also Ashmuela said I'm an Empty Girls member and hopefully we can create some more great empty gold events in person this year or next year. So yeah, as I said, enough for myself. Let's talk about search engines. We need to know a bit how they actually work to know what we can improve on our website to get a higher SEO score. Basically all search engine bots or all crawler bots, they have a straightforward, they proceed really straightforwardly. So they crawl the website, they have a YouTube list of all the websites. And actually they also store internally how often they should call a website. For example, if we have a newspaper website, this needs to be called daily or even hourly because the content is of course changing so many times throughout the day. So the search engine has the entry. Okay, I need to really close the page hourly or daily. But of course other websites like our private personal web page, maybe once in a year. But actually we can even trigger that each search console or each search engine has an official webpage as a trigger. For example, the Google search console, you can trigger and tell the Google bot please. Now I did a lot of SEO improvements. Please crawl our website again after the crawling phase, of course they tried to find anything on the web page to get some content to get to know what your website is about. And for this it uses everything. What is inside the HTML tag, inside the hash tag, and inside the beta test. We will come to that soon. And of course maybe during the index space the crawler board sees other URLs or other links maybe going to another page or to a subpage of your application. So it again will crawl this web page as well and try to index it. So it's more like a never ending group till every URL of your webpage was crawled and indexed. And this is actually basically what the crawler looks for. The meta Tags. Actually everyone knows the meta Tags, but a lot of person actually ignoring them or don't give them too much emphasize during the website development. But it's really easy because putting the right and correct meta tag on your website increases your SEO score dramatically already. But if the meta Tags are not displayed on your website and actually there as the name of course it stands for, it includes all data information like the encoding format, UTs eight or 16, like the language, or even some instructions to some bugs or of course description to the whole webpage. Another fun fact is that there exists something like the keyword meter track and everyone in a couple of years ago was really eager to put everything inside his keyword metadata set. But recently Google actually released a video. Recently it was maybe a couple of months ago we leased a movie about how the Googlebot works and working together with a beta test. And then they admitted actually that the Google bot for example doesn't care about the keywords inside the meta tag at all and people with just small fun story or fun facts because everyone was really putting their information inside the keywords. But what is really important is the description meta tag and the title the page title. You can actually achieve this quite easily since Angular is already providing two services. You can inject inside for example inside a queue service. You can then inject inside a component to set the title and set the reader information. And then you can for example create a function in a default meta information where you call the title service and where you call the meter service to actually set some majors information like the description and also instruction for the bots. And of course the title of the webpage later, shortly. Take a look into that. For that I created a small demo website. Since I love Pokemon so much I created a poker tax, but it's not really fancy. It's just like a small master detail view actually. So if I click here to see details, I get a better detail to you. Nothing really special. What is quite important and nice to see if you now look at the HTML we see there's basically nothing a quality could actually get from this page. But what is quite nice, if you for example get to the already rendered version we see here inside the header we have the title like Martina Pokedex here on the top. And of course I added already some metadata information. Also for some social media bots. Of course there are Twitter bots crawling your website as well. You can give these kind of special instructions as well. Maybe. You know, if you put a URL inside a tweet, it might. Sometimes it gets rendered to a picture and some meta information like a description and title. And sometimes it doesn't. And this is just a reason because the developer of the website either put this meter tag for the Twitter bots inside here or not. Because all social media bots actually have these kinds of meter Tags as well for the specific kind of social media budget. And of course if you click on the details page, we like to have this meeting information updated like it is right now to have specific and more information for this sub page to feed the quarter bot with all information of the sub pages as well. So here yes, and now I have a specific type of description for this specific BK Pokemon of Buzzword. And of course it is from Thai Press and Poison. If you don't know Pokemon, it's not important. But every Pokemon has a specific kind of time. How can we achieve this? As I said, I implemented SEO service which actually attracts cities to kind of the media and the title service. And this has nothing to do right now with Angular Universal. It just gives the services being provided by Angular assert by the Blockhouse browser package actually. And this update and add text by calling the corresponding function on the services as well as setting the title from each page and sub page by calling the title on the specific service. So basically this is quite straightforward and quite simple. On the detail component I do nothing more than injecting the SEO service. And whenever I get the Pokemon with this specific kind of ID that was just clicked, I should set Tabita data and the title to update all the HTML. So far good. Nothing like really special actually. All fine. But in the beginning I said yes, as we saw as we looked at that, there is no visual text rendered, there is nothing actually there. So it's cool to have this meter service or the title service. But from the start.org and crawler enters our page, the image of the file is empty. Actually yes, but the Google bot is a bit more special than the other crawler bots because the Google bot loves JavaScript. Hence the Googlebot actually renders JavaScript before it actually enters the indexing page. So yes, the Googlebot crawls all the HTML sites, then it pushes the content to another Chrome hashes Chrome instance, and this Chrome instance is rendering the JavaScript and then giving back this rendered HTML to the Googlebot. So the Googlebot cannot find the indexes. So yes, if we would say okay, we just care about users that using Google as a search engine, which yes, you have to admit has the highest marketplace of course out there, then we can say okay, fine, I don't care, I don't care at all. But yes, except for Google, no browser or no search engine is actually dealing with rendering JavaScript forehead. And also this is quite important. No social media bot like I mentioned, the Twitter bot. Yes, the Twitter bot is actually trying to display the small people card, which of course increases the trustability as well. If you have a small link on the Twitter card and this link might be even a little bit critical, we don't think we really want to click on this link. But if it's got premium a little bit and we see a little bit of content over there and a nice image, we are more likely to actually, of course click on the link as well. So at least for the social media we need to find and come up with a solution of actually feeding this kind of bot always information. And exactly there is where Emily Universal jumps to the rescue. What is Aggronal Universal? Actually, it's complimentary driven project, but it will sooner or later be part of the Angular code package, actually. So it's a solution for rendering your Angular code on the server side. Okay, but I said in the beginning we were happy to move away from the server side PHP, finishing that we rendered the server side and pushing it in HTML page reply. And the user experience really was bad back then. And now we're telling again, we're pushing everything from the client back to the server. How does it work? It's true, but a universal is not just something like server side rendering, it doesn't work. It actually shifts the server side rendering version first, that the bots already get something. And of course the performance the first initial Loading time and first condom will pay is faster. But then after it's displayed, it actually swaps out the lazy, longer taking client side rendered version for user agents that aren't actually really users. In Anglouniversal, of course we detect quite easily what the user agent is if it's a bot or if it's actually human. And then for a human version, but for users that are human, it works out afterwards the client side rendered version with the server side rendered version as well. You have actually two options for serverside rendering either it's during build time or Socalled ahead of time. Then you get already some really physical HTML files, or it's on the fly by user request. Then of course you have the type where the JavaScript needs to take to render your HTML on the server side. But yeah, you can also prerender all the HTML files and then there's no Java execution time that needs to be taken because the HTML files are already there. And how does it work? It's basically swapping out all the services and everything that needs to be called for processite rendering. These services will be swapped out with a rendering layer of server side rendering. Installation is quite easily we have the Angular schematic for that. You will be delivered with an Express Engine Express Nodeship framework. You can more easily write your own server, but you also could actually use the Internet Information service. It's the IRS from Microsoft as a server to actually deliver your content and deliver these server side when not action elsewhere. So you install it and then basically create some different entry points. Your keys config file, your angular chasing file will be manipulated to then tell if you want to build your application with server side. We have a different kind of entry module, not the app module, but the server would do it and then it works out all the regular data. But I would say these tupets maybe take a look shortly. I already installed it and I actually already built it as well because it takes some time. So what we see over here that we have a tfconfig server. Json file which actually then has another entry module. And this entry module of course then has a server module instead of a browser module that's coming from platform server, not from Platform browser anymore. And it provided all services that need to be taken for service rendering. The Schematic also adds some new build scripts. So for building a server side rendering version we just can use this build SSR and to deliver it we can just call NVM run server SDR. Then your express server will be called and we can just get a server side rendered version of our application that actually now calls our Express action and then the JavaScript renders the HTML on the server side and will be delivered to us can easily see that going to the page stores again. And there you see that the app route is not empty anymore but the whole HTML file, of course it's quite a lot now is already rendered over there and that's basically how to add and use of course Emma Universal on your website. What you also can see I added some for the first column for measurement and we can see that. Let me check this first so we can see that basically of course it's a small application but to have this now it took me quite long but it usually takes like from 400 to 500 milliseconds to have the first comment on page of a server side rendered version. And the client side is also most probably from 600 to 700. Of course at just a few milliseconds or just one few hundred milliseconds. But you can imagine if we have a way bigger project or larger project. It really takes a lot of effect if we are using server side rendering also for performance over here. So basically what you also can do, one thing I want to show maybe as well is that you can prerender everything. As I mentioned, it's either pre rendered on the fly or you actually can. Let me show it to the Angular JSON here. You have to solve this script and you actually can also prerender for some specific type of route your whole application. And this means if we now run Adm run pre renders it will call dispute information and then these two sub rows. I mean I can also of course say everything should be prerendered like the default route or something like okay, these two routes, these are really often used or often dewitted. So I really want to just have these routes prerendered and having a physically HTML page just for these two routes so I can run NDL prerendered. And then of course this takes not too long to wait for a bit, but this would create now the whole two rows we will get three HTML files like the index. Html files and an HTML file specific for these two routes as well. What quite nice is that you can even tell okay for different user agent, please use the server side granular version if you don't trust Aggro universal by swapping this out client side server side rendering version. Of course sometimes it doesn't work as expected, but you can easily say okay, for this kind of user agent, I want to deliver the server side better version. And for all human user agents that are not robots, I want to deliver the usual clientele version at the end. I like to give some basic SEO advices because why are we doing this whole thing? Actually of course we want to be ranked really highly, but we want to get our content indexed quickly so we don't want to deliver a lot of information for the quarter. But she does information and give everything what you can to have them being able to index your website. This means you need to what we want to achieve is or what you need to do is to leverage a progressive passing rendering of HTML. Don't use too much magic for rendering HTML in Angular you can do a lot of great stuff with content projecting or the future or future content child, but rendering the section again and again will appearance being a little bit disadvantaged. If you want to render HTML and pass your HTML for the border wall, so keep it short and simple as well for that too. It's not always the best idea to use one single component and putting everything inside just the content protection even for a human. For a developer it's quite sometimes confusing so keep it short and simple as well. Use Lighthouse to actually measure your SEO Score beforehand if you don't know Lighthouse, it's actually a process extension and it's quite nice where you can actually get some score regarding performance if you have a PWA app or general best practice accessibility and SEO so we can easily just generate the SEO report for our web page and then see the difference. If we maybe added some reader tag to actually achieve a higher idea it helps as well. No research engine if you know I don't care about social media bots or I don't care about other search engines than Google you might not need to use Agro universal even just because it's handsy and it's new and I talked about it. You might not need it if you just care about Google uses because Google search engine uses because over there JavaScript will be premature. Definitely so to sum up I really hope you learn something from today as a stepping me anytime. If you have some questions we can use Anglos Universal for server side rendering because it brings a lot of advantage when it comes to SEO and also performance. Actually this was just a small example as I showed the times very different that much but I can show you in a greater greater project. It's definitely up to 1 second if you have really a large project and this of course everyone wants to have the content quickly so this really takes the fact that's where you can prerender everything ahead of time having physical HTML files and then being delivered and of course being even faster to do it because it's just HTML instead of having JavaScript prevented before you.