The Art of Rendering Modes: Go Beyond a Blank Page

Hey everybody. Wow. So, we start very simple. Who of you uses Google? Okay. Who of you uses DuckDuckGo? I see a few hands. Nice. Awesome. But Google approximately processes 8.6 billion searches per day. That means, doing quick math, 100K searches per second. Crazy amount, right? But from that number, what do you think, we all search for various things, vue.js Live, for example, and we see lots of websites, but what do you think is the percentage of websites that actually gets visitors, like traffic, from Google? Just think of a number between 0 and 100, of course, and I want you right now to guess it. Just tell me right away, okay? Three, two, one. Interesting. I think someone was very close here. Not even 10%. So there's a study from Ahrefs, and it shows clearly, yeah, that big part of the doughnut here, zero visits. And we'll see how your website will be not in the orange, also not in the red, but best in the green or purple part. So welcome to my talk, the vue Universe of seo, Uncovering the Secrets. Yeah, I'm Alex, a web dev consultant. I just go very quickly over the slides because obviously, you don't have that much time for introduction. I got a very nice introduction already. I have a Twitter account. I'm also a master don of a website, and I'm on GitHub. So are you ready to navigate through the cosmos of seo? Nice. I love the energy. But what is seo even? Well, it could be that it's rocket science, but no, luckily not. And even though it's search engine optimization, it is actually quite user-focused because also kind of makes sense. Google and all the other search engines want the best result for the user. So the best content, the best user experience. So they want that you find what you're looking for. Also seo is quite easy to pick up, but it's hard to master, like many things, sadly. And it needs continuous improvements. It is not like, okay, I can do my seo now and I'm done forever. That is not how it works. And it is frequently changing. So we as web developers know frequently changing ecosystems. Sure, seo, very similar. Oh, there's a core update from Google. Oh, no, these don't rank that well. But don't worry. We won't get into that depth today. And when do I even need seo? Well, first of all, your content must be publicly available, right? So if you have something that authentication, you don't need seo. It's fine. But if you have like marketing pages, your company, maybe your own portfolio site would be nice if you Google your name, that maybe not your Facebook profile shows up or Twitter handle, but maybe your own website if you have one. That would be great. And of course, forums, help databases, and so on. Blogs, articles, same idea. And as I said, it's not really relevant for anything behind authentication. And if you have content that's there like for a couple of days, maybe not longer, then it probably won't make sense to like optimize that. If it's gone very quickly, likely doesn't need it. So we have kind of three parts of seo. Let's say three seo galaxies. One of it is on page, on page seo. So this wonderful purple thing here. This mainly covers content because content is still king. If you write good things on a website, people looking for these things, okay, you're like an expert in your area, for example. That's very important. seo can only be one optimized if your content is very good. And of course, it's about keywords. So we figure out, okay, what are people actually looking for? How is the terminology? And what intent is behind there? user experience is also important because obviously if they can't navigate on your site, yeah, well, they will leave very quickly. And also setting your meta tags, which we'll take a look at in a bit, and so on, so on. Okay, that's on page. We have also off page. So off page is this wonderful galaxy here. And there it's about link building. So let other sites, other websites link to your page, maybe because they like the content. It's like, oh, that's a good reference and so on. Same for social media, brand building, citations. So people just like name the name of your project or of your company and authority in general. Like you have to show that you're an expert in what you're writing. That's the point here. And there's technical seo, the third here. And that's about, we heard a lot now, page speed, performance, security as well, actually, broken links, sitemap, and so on, so on. So these are just some parts of it. And we will focus on two, on on page and technical because of time. And well, vue covers exactly these two things. So let's check that out and see what happens. But first, once again, we have vue. We have an SPA, right? And SPA, we all know that generates the html through the javascript, which means all fine as long as the javascript. But what happens if the javascript will not be there, if it's disabled or if maybe something breaks because I don't know. You didn't use typescript and maybe there's an exception. This will happen. You see nothing. Exactly. A blank page, usually white, maybe even with a loading spinner. So when there is no javascript, there cannot be any content. For classical SPA, that's the case. So yeah. A few years ago, luckily, quite some time, this was even a problem for search engines because they could not understand javascript. Google was like, no idea. Luckily, that's not the thing anymore. But there are still some, let's say, caveats, right? So when Google is crawling a website and indexing it, there are a few things that will happen or will not happen. So for example, there are no interactions. Google won't push any buttons. It won't navigate. Even if you have the nicest page transition, they will not click on any links there. They will take them and then open them separately on a totally new process, so to say. It also means no permissions for camera notifications. There will also be no scrolling, which is really interesting. So what Google is doing, if you have a very classic, the devtools, and you do something like this. Awesome. So when you have the emulated devtools, it's like, OK, I will use a mobile screen. Then Google also does that, like mobile screen, 400, 500 pixels, but the length will just be 9,000 pixels. So they don't have to scroll. They just get all the content they need from these 9,000 pixels, and they don't trigger any scrolling or similar. OK. We have that. And there's also no data persistence. So if you set cookies, if you go to local storage, say, OK, I'll set some settings, defaults, this will be cleared. And there's a so-called scroll budget. If you have lots of files, Google's caching them, but of course, it should be a fair amount for every website. So they have a budget that's not disclosed, but if you have lots of big data, like big javascript files, images, they will crawl the pages slower than others. And also, of course, there's a timeout thing. So if you load data through SBA, you have the loading spinner, maybe, sure. But at some point, Google might not index content that comes in very late. Yeah. That's for crawling. And SBAs also have some caveats. For example, if you share your favorite link on, let's say, Discord with your friends, or WhatsApp, or wherever, then you usually have a nice preview image, and title, description. And for SBAs, it's a bit difficult, because usually, the preview images come from the html, which is not there by default, because it's generated through javascript. So always, like, a bit of a problematic here. There's no preview, or like a default preview image, and the experience could be way better. Also, we just learned no javascript, no content. If you have html and make a mistake, it's a bit more forgiving. But with javascript, it's like, yeah, one mistake could lead the whole site to not work anymore. And especially for vue, you can't reuse fragment routing anymore. This applies to any framework, but for vue router, it's also important. You need real URLs. If you only use a fragment, that won't work for Google. Actually, this fragment part is not even processed in the backend. It won't reach the backend, even. So you need actual URLs, the history mode. Which means it's a little bit more work to set up for multi-page applications, especially if you have, like, your own web server and so on. Anyway. And if there's one thing to quote from this talk, it's this. Even if it's like, it doesn't matter, it's fine, Google can index my page, it's all good, yes. But it does not mean it will rank well. Just because Google can understand your website and see it, it doesn't mean, oh, it's the best page ever. So maybe, in this case, also client-side rendering might not be enough. And what else can we do there? Well, you already know the answer. Server-side rendering. Nice. We can do pre-rendering, static site generation, ISR. We heard a lot about that from Alba already. We can also nicely mix them up. And you also know which framework can do that. No surprise. nuxt.js. You can also roll your own server rendering, of course. That's totally possible. But it's tons of work. Trust me. I've seen these setups. I went through them. And it's like, okay, we have our custom setup, how do we migrate? It's tough. And you can define route rules. Who ever used route rules in Nuxt? One, two, three. Okay. So you can say here, for example, every route that begins with blog and then has any kind of, yeah, let's say, slug, article name, should be, for example, static as in 9.5. So say, okay, this will be rendered once, then cached forever. Or stay and revalidate. Or we disable ssr right away. And the cool thing is, this is usually configured in your Nuxt config. But little spoiler, soon that's not necessary anymore. You can configure it on the page component itself. You can say define route rules and say, okay, this page, ssr false. No problem. I don't have a long, long list in the route rules anymore in the Nuxt config. But I have this very nicely located in the page component. There's a PR up for that. So this will come in the future. And now let's see what's needed to achieve good seo. So I made a little overview. We always have a feature or a task or similar. Then we check if it's a technical or on-page topic. And the effort. One rocket is very long and through. Let's just go for it. Five rockets is like, ugh, tricky. And we start once again with very simple things. Basic. Basic security. It sounds like, ah, okay, what is this? Well, who of you does use HTTPS in their production environment? Okay. Who does not use HTTPS? Okay. One, two, three. You really should. You really should enable HTTPS. I mean, that's a must-have nowadays. And it's a ranking factor. So Google will treat, given the same website, HTTPS on or off, better when it's on. And thanks to Let's Encrypt and CloudFront and so on, it's not a big deal anymore. Also good practice, security headers, content security policies. These are not really related to seo. But of course, if you're once on it, you should redo it. So I want to also create trust for visitors. And as I said, it's lowing a fruit. HTTPS is a ranking factor. Mobile friendliness. Same idea here. Once again, a must-have. The effort is like, it depends a little bit how your site looks right now. Maybe you don't need to do anything because it's already responsive or nice. But yeah, Google, actually, as we just discussed with the scrolling part, it crawls by default with a mobile, not only user agent, but also with a mobile screen. Which means if you have like, font that's too small or like, goes over it, has like, an overflow, scrolling overflow, that's not that good. And the mobile friendliness is actually a ranking factor. There's also a tool that you can use to test it out, the mobile friendliness tool from Google. So that's worth to check. And then we have the core web vitals. Philippe already mentioned them. They're so-called essential metrics for a healthy site. At Google, we see LCP, FID, and CLS here. These are ranking factor. And also, as was mentioned before, FID will be replaced by interaction to next pane very soon. So also there, gather some metrics and find out if you fulfill these core web vitals or not. Effort depends a little bit, again, how the state of your site is. Really hard to gauge from, yeah, guessing. And then we have a very easy one, once again, which is text compression. Text compression is another must-have nowadays because it's very easy to set up, all browsers support it, and commonly, you use something like GZIP, right? That's the default, almost. But nowadays, we also have Broadly for more than seven years now, I think. It's faster, has smaller files as output, so it's always good to choose that if your server provider supports that. So you can set it up in your, let's say, Apache, NGINX, or if you use a CDN, it's usually on there by default. That's not a problem. And you can then use a checker to, for example, check your site. Also good text compression means lower transmission size, so faster website. And NUX, for example, or in this case, Nitro, supports the compression for static assets by default. For on-the-fly requests, as I just mentioned, you usually give that over to your web server or platform provider. So if you host a Netlify, it's on by default, Broadly is there. Or if you use cloudflare, you can just toggle it, say, okay, I want to enable Broadly. Good. Once again, no hang of fruit, go for it. And then another very common thing, broken links and redirects. Then it's like, yeah, okay, make sure you don't link to broken pages. It's not a surprise, right? We all know, ha, if a user clicks on a link that's not there, they'll be frustrated, and you might lose a visitor on your page. So of course, don't do that. But what you should do is you should check regularly for broken links on your page. And also to your page. Let's say, yeah, you got the link from a newspaper or a friendly dev link to your portfolio, but maybe the subpage is not available anymore. So because you changed the slug, you changed the URL. What you should do is you should set up redirects for them. So whenever you change a URL, keep the old one, set up a redirect, very important. Otherwise, you might lose visitors because they click on a link, it's broken, say, okay, then I get my info from somewhere else. If you do that more often, like change URLs more often, you might run into redirect change. So slash A, redirects to B to C. The best is to resolve these change and then redirect A to C and B to C straight away. But keep these redirects, just don't change them. And once again, that's possible, for example, for a web server platform provider on Netlify and Vercel, you can set them up. But also you can use, once again, the route rules or if you have some more complicated ones, server middleware to say, okay, in this case, I want to do a lookup in database and redirect to the best slug fitting and so on. So that's usually something that the server part is covering. And then we have canonical links. Anybody knows what canonical links are? Okay, a few, great, very nice. So the idea is you should set a canonical link for every page. And a canonical link is the, let's say, preferred version of your site. And you're like, my version, I mean, there should just be like one page per thing I write. Yes, of course, of course. But there are lots of URLs that could point there. Also for duplicate content. We have a look in a second. It's very important to also handle the trading slash enforcement here. So let's say we have this tag link rel canonical, and then we put in the link there. And the idea could be, okay, if I have abc.com or www.abc.com, or do I have a trading slash in the end or not? That's important and you should enforce one version. It doesn't really matter if you use www in front or not, or have a trading slash at the end or not. That's fine. Both is fine. Just be consistent. And point also to Google and to other search engines and say, ah, that's the version that you should index. Otherwise, they might index two different versions and they might both rank lower than the actual single version that you could have pointed to. And also if you say, like an e-commerce store, you have shoes, then you have like a special deal. If it is for some reason duplicate content here, saying, okay, yeah, I want to show these Nike Air Max in the special section with the same contents of the shoes, then also here you should provide the link to the everlasting URL as canonical URL, if it's exactly the same or duplicate content. And there are lots of versions. So your web server or a platform provider should handle HTTP, HTTPS handling, for example. You have HTTP fully redirecting it after naming it to HTTPS. Same for www versus non-www handling. Decide for one version and then convert it. And your frontend part should handle the canonical link of, okay, let's strip all the query parameters because we might not need it. Let's strip a training slasher, leave it there or edit. Let's remove the hash part. All these are important that we in the end get this very simple canonical link. Also once again, it's fine to have it with www in front or no training slash, but be consistent. That's the key here. Then we have asset optimization. Well, we heard a lot about image optimization in Jakob's talk and general performance today. So very easy. I'll skip about most of that, but it's very important to do that also for seo because better performance means faster website, means happier user, means happier search engine. Also of course javascript can be improved a lot, like performance-wise, tree shaking, code splitting, analyzing what you actually need. And the static assets should be cached of course. Good thing here too. We usually do it already. vite is having a feature. Nuxt is also giving it out of the box. No problem. And please use descriptive file names for images. Don't name it image one or image two. Actually give it a name because search engines can even infer from the name what it could be about. And then we have the URL structure. Of course we want short and descriptive URLs. Nobody remembers like slash ID slash one AC whatever. I don't either. So that should be clear. We should use descriptive URLs and also we can remove the stop words. That's also fine. Also here as just said, trending slashes, yes or no, it's up to you, but you should enforce it there too. And you should place your keywords on site. So if you're writing a blog post about nuxt.js then in your URL the Nuxt part should be there. Or if you write a blog post about image optimization it would be nice that image optimization is in the URL itself. Not only that the search engine understands it but also that the user can just type an image in the URL and if they were at your site, nice, they get it right away. And query parameters, they should be avoided unless you really need them, but it's usually better to just work with slugs there. And as delimiters, usually you should use hyphens. Also once again, non-www versus www. Same idea here. So if you have something like this, like abc.com slash question mark ID is whatever, horrible. Please don't. You can improve it by removing the query parameters, but then, yeah, still not really descriptive. So let's get it a little better. Okay, nice blog post about benefit of Nuck cool, but the delimiters are still off and maybe yeah, there's kind of a category here to see, right? Like blog and then maybe post about. Still it's a bit too lengthy, so maybe just short it a little bit down. And that's a very nice short URL. So if you stick to simplifying it as much as you can, you're on a good track. Okay, and then we have meta tags. So if we have a search engine result on a search engine result page, here we have a title and a meta description. These are meta tags. So are the UTF-8 char set and the initial viewport. So we should find the ideal title and the meta description for each page. testing is of course necessary, but it's really worth it. And you should also use the OG tags to improve the link previews that I just mentioned. And meta tags in Nucks, they're very easy to set. So for example, these are set by default. Nice. But otherwise you can set everything through use hat. And we will have a look at that right away. So I'm happily switching my tab over here to Hello London. We'll quickly refresh this. And we have the dev tools here. And in the dev tools, that has been released very recently, there is like an open graph tab here. And it shows you exactly that. It shows you the meta tags, it shows you, for example, the body attributes I said, and shows also missing tags. Saying, okay, they're required tags, they're recommended tags, you should really add them. And there's a code snippet that's just saying, hey, why don't you add that right away and then fill it in? So you can just copy paste it right away, saying, okay, please, let's just add that. And then the dev tool will be happy. Plus, if you have all the tags, you get a preview for Twitter, Facebook, LinkedIn for the preview tags, for the preview of the URL. So you have the image there, the title there, the site name. And this has been released a couple of days ago, and it's working pretty nicely in any Nuxt applications with the dev tool setup. So it never has been easier to get the meta tags right for your seo. And there's so much more, but not enough time, of course. I could always tell you, please use semantic html if you link to another page, don't use a button, please. Use a link. Use alt text for images, very important. Not only, and please don't stuff them with keywords, just describe what the image is about. It will help every user and it will also help the search engine. Talking about page structure, site map, structured data, robots.txt, hreflang, there's more. But I want to give you one more life hack. Use Nuxt seo kit, because it comes with a site map module, it comes with a robots.txt module, it comes with schema.org, so easier schema generation, also for seo structured data. It comes with more experimental features that could improve the performance as well, with dynamic OG image generation and a link checker for broken links. That module is maintained by Harlan, also a team member of nuxt.js, and he's also maintaining the integration of the use head that we see. So yeah, from here I'm just saying, give it a try. Try it out, use the dev tools, use the modules. And I want to shout out my sponsors. Thanks a lot for giving me the opportunity to work in open source. And yeah, thanks you for your attention. Thanks a lot. If you want the slides, they are right here. Feel free to scan the QR code or put in a link. And yeah, that's it for me. Thanks a lot. Thanks a lot, Alex. This was really insightful. I'm already comfortable here. Yeah, quite nice. I'll try that one day. Yeah, I remember a few years ago I actually started building my own website with react, and I didn't even know about vue back then. And yeah, then I noticed when I share links, nothing is visible. So I used pre-render.io. What do you think about it? I think it can be a good service for sure. It will make things easier, but it depends a bit on the kind of data you have. So if you have a static site, basically, you can use pre-render.io, but you can also just statically render the site and you don't need a third party service. It can be a nice option if you have a big SPA and the data is not super near real time, so it doesn't change that often. Then it can be pretty nice to have a good migration way to eventually generate some things statically. So good thing if the data is not too often changing. Yeah, it was a personal website. It was a quick fix. Yeah, true, true. Exactly. You know how it is. Of course. Okay, let's jump into questions. For the first one, pretty interesting question. With more people using Ched GPT and AI instead of Google, how do you think that will affect seo? Interesting. I think it can help, especially people who are not into seo. I mean, there are people doing seo in companies full time, right? And with AI, I think it can be easier to get into seo in general, to also figure ways to describe the content better. I don't think necessarily AI will replace the classic seo specialist or the knowledge of people of seo, but I think it can be really helpful just to get things right. I also sometimes ask, okay, how to summarize this and this? Or give me a good overview of categories that could fit in there. So just to figure out more ways of describing your content or more categories to put it in, for example. 100%. Or maybe crawlers will be powered by AI and then we won't need to take that much care of seo. True. I mean, I also think there's a tool called AutoGPT and you can already say, like, yeah, crawl that site, describe the content, and that can only be automated already in a certain manner. Yeah. Knowing the AI growth recently, that will happen in like two weeks. True. Awesome. So, next question. In Google I.O., Google announced how generative AI will be the key when using Google Search. How do you think the seo paradigm will change so that it's your website solution, the one returned by Google's AI? Yeah, I think that can be a bit difficult because we already saw the trend for quite a while to go to zero-click search. So one-click search means you search something, you click on the first result, you get the info. That was very common. But nowadays it's already zero-click, as in you look for something, then Google already gives you a little preview or a snippet of like, hey, this is how it works. Or like a frequently asked questions, you can just open it and like, okay, I don't even click on a website anymore. Google gives me that info that it got from your website. And I think with AI there, it will be the next step, the next evolution of that, which means less traffic for your website, which is on the one hand good because people get information quicker. On the other hand, you lose traffic, you lose visitors. So that's of course a bad thing. Okay, thanks for this long answer. Let's jump on the next one. Is seo still as important in the social media age? I would say yes, because there are lots of ways how people can find your content. And I mean, just imagine how many Google searches we are doing or Dr. Go searches or Bing or whatever you guys use every day. I definitely think this is very valuable. Social media is just another channel. So ideally you want traffic from all the ways because people share the link on social media, because people search for your content, because you share that. So I think yes, it's still very important. Yeah, 100%. And like crawlers even crawl social media posts and everything. True, absolutely. So yeah, 100%. Okay, let's jump to the next question. What possibilities are there to see how the seo of our page improves the better accessibility? Do you think it could be taken into account in the future? Can you read the question once again, please? Yeah, it's confusing. What possibilities are there to see how the seo of our page improves the better accessibility? Ah, okay, I see. So I mean, accessibility as an A11y and seo are going hand in hand, first of all, because as I just mentioned, yeah, use alt tags. This helps accessibility. This helps also seo because the user who might not see the image can understand the search engine calls understand it. In lots of ways, it's also user first. You should focus on making them happy. But how to monitor how things get better? Well, there's a good way for that. So there's Google Search Console, you can register your site up there. And you get stats like how many impressions you got. So often where you're in the search results for what words, what pages, what country. And then you change something and usually you have to be patient because it takes a while until Google picks some things up. And then you'll see, okay, either nothing changed, or like you've got the X percent increase or old for this keyword, more and more people searching for it. So registering inside the Google Search Console and keeping an eye on there is the thing also very important part. Awesome, thanks. And let's jump to another one. How important structured data markup is? Very important nowadays, especially if you have content that matches structured data, like say recipes or anything like that. Because structured data also enables to get featured in the specific, like the special search result pages of Google. Like when you look for recipes, for example, you always have like a little carousel of the images, the slider there. So to get in there, you need structured data. For like how to, same idea. So if you want to make it easier for search engines to understand your content, structured data is a very good way. Yeah. Okay, awesome. And let's jump to the last question. I don't know anything about seo, how to become a pro in seo, which course do you recommend or some material? Oh, which course? So there are tons of free courses, that's the best thing nowadays. Learning is so easy because there are so many good things on YouTube. Ahrefs is very good. Moss is a very good source as well. There are tons of studies. So I suggest taking there. From technical perspective, of course, feel free to take a look at the docs of nuxt.js and the modules there because we all deeply care about seo and want that your pages will be found, will be awesome. So from technical side there, and otherwise, yeah, the besides I just mentioned. Okay. Thank you. Thank you, Alex. That was awesome. And make some noise for Alex. Thanks for having me. Thanks for having me. I appreciate it.