Let SEO be with You in Your Nuxt App

Hi everyone, my name is Alba Silvante and today I'm going to talk about Let's COP with you in your NAS application. Let's see. Well, first of all, I want to introduce myself a little bit. I'm a front-end consultant at Passionate People NL, a company that also created the vue Amsterdam and JSWorld conference. So I hope that you know it. And in my spare time, I'm writing articles about NUX and Storyblock because I really like these technologies and also about web performance. And I'm speaking at some conference as you can see now, and also trying to contribute in open source because I really like open source and I hope to see you in GitHub. And the past year, after creating my own blog and I started writing articles, I have been named ambassador at NUX and Storyblock, the technologies I use to build my website also. And this year in March, I have been named Google Developer Expert in Web Technologies because I was also sharing knowledge about it. And I'm so happy to have that role at the moment and I hope to help you with everything you want. So let's start. Well, now let's see what we will see in this talk. First, we will see what is seo and why it's important for our application. Then we will see the key concepts behind seo, the main important ones, obviously. And then we will see how to build a sitemap, how to define a robust file, the meta tags and open graph that we can add to our site, and the structured data also called schema markup that is also important for search engines and the RSS feed file that is important to automate everything you want to do with your post or recipes or whatever. And also the Metaseo Inspector extension that is only allowed for Chrome, but I hope that someday we will have it also in Mozilla. So let's start. Well, what is seo? seo stands for Search Engine optimization, which is a digital marketing strategy that focuses on your website's presence on search results on search engines like Google. So each time you type any word in a search engine, you will find a lot of results in that page. And that results have been working on seo to have that presence there. So if you want to have your presence in the first place in the results, you will need to work hard in seo. And for that, we are here. And why is it important? Well, seo can help you drive more people to your site without them knowing your site. So if they search for something and they see that article that you create in your site, they will know you in that moment. They didn't hear about it. So it's the way that you can drive people that doesn't know you yet and also increase the growth of your site. So if you have more people coming in organic searching, you will have more people also coming afterwards because they will speak about it. And that's important. So the key concepts that we will see today are on-page seo and off-page seo. On-page seo focuses on optimizing parts of your website that are within your control. For example, if you are creating content, you have control over the content and also over the project where you are creating the content. So the next project in this case. And you can add everything that you need to have seo. And this kind of concept or type of seo determines what you rank for. So if you are writing articles about technology, you are ranking for technology because you are talking about it. In the case of a person that is creating recipes, is ranking for recipes or cooking or whatever topic is talking about. And the off-page seo concept is just focused on increasing the authority, trust and reputation of your domain through content creation in other places, not in your site and by links to your site. So this kind of seo determines how high your rank is. For example, if all the pages that are creating articles, they have an article that also is in your site, they will see that your site is interesting and they will want to see your site. And for that, all the reputation that you are creating online, that everyone is just tagging your blog post because it's important and they want to see it, then you are creating reputation and people trusting you. And that's the off-page seo. How you can, in other sites, link to your site and in that way there is a connection of reputation and trust. So the checklist that we have in the right will explain you the steps we can follow to have this kind of seo implemented in our site. So for example, on page, we will just add the title tag, the social tags, for example, the ones that we need for serving in social media, the alt text for images, the URL structure and internal linking, for example, the breadcrumbs that we have in our sites. Also working on the page load speed, the core web vitals that are so important nowadays in seo and also the user experience and mobile friendliness because everyone is using the mobile these days and it's important for seo that you have everything ready in your site to be able to navigate in mobile. And also the content itself, the headings that you need to define, the page content and everything that is inside your control. For the page possibilities, we have social media posting, influencers marketing, so you can talk with someone that is already in a good position and that person could share your content and that's a way of having a better reputation. And also guest blogging, you can go to another blog and start writing content there and obviously link back to your site so they can know you better. And brand mention, for example, maybe you don't have a link, but if you specify the name of a brand, for example Google, you are already making that everyone knows about it. So it's important to have also brand mention or links, but something that people know about it basically. And now that we have cleared what is seo and what we can do, what is in our hands, let's start doing what we can do. The first step to getting your site on a search engine is to be sure that they can find it. To make that, we can create a file called sitemap and in this file is on your site and will tell the search engines about new or changed pages on your site. So for example, if you upload a new page, the sitemap will be updated and the search engine will know about that new page. To do that in NAS is quite simple because we have a module called nas.js.sitemap. We just need to install it in our project, add it to the module section in the configuration file and add the options we have in the sitemap module. In this case, we have the hostname that is just the domain of our website, the jsip true option that is just compressing this file, the trailing-slash true that is just adding a slash to any of the URLs because the search engines are always looking for the trailing-slash at the end. And then when I create the sitemap the first time, I just realized that I was creating only the pages that are inside the pages folder of NAS. All the dynamic URLs that I was creating under Slook for example for my articles didn't appear in that file. Then I realized that what I need to do is include it myself when the routes are generated in the project. And how we can do that? We can just create a module in the modules folder called generator.js for example and there we will create a function that is awaiting the hook generateDone and when everything is done after generating your routes, you can just add that route to the sitemap routes. As you can see in the line that is highlighted, you will see this next option, sitemap routes, is awaiting the routes that are generated and then the sitemap will have everything ready. And just adding this module you created under the modules folder to the buildModules options in the configuration file on NAS, you will have everything ready for the next time you run the project. Then generate, you will have all the routes in your sitemap too. Just a pity thing that happens in NAS3 is that the generator.hook will not be present but don't worry about that because the sitemap module we have in the readme how to do it in that case. And then when we generate the project, we will have the sitemap.xml file as you can see here with all the routes to the URLs that you have in your site, the dynamic ones and the static ones basically. And now the search engines already know about it because they can just enter this file and see which pages have you created and that's it. And also just a quick tip that if you promote your site in social media like Twitter, LinkedIn or whatever, the search engines are also looking in that URL so if you put the URL to any social media they will also find your pages and index it in the search engine. But obviously you need to have the sitemap anyway. And then let's define the routes that is also important for the search engines more than for the content or the end user. So to tell the search engine which pages from your site you don't want to be crawled, for example if you have an admin section or a login page, maybe it's not something that should be added to a search engine. It's more for the users. So for that in the RoboStack state you can specify that you don't want to Googlebot or any crawler to look into that URL. And to do that in NUX we just need to add another module, in this case called NUXjsRobots, quite simple, and then add it to the module option in the configuration file. And in the robots option just add the parameters we have. In this case as you can see there is only one user agent, Googlebot, and it's disallowing the admin task. But obviously you can add more than one and maybe with asterisks you can also disallow this URL for any user agent. But we can see it in this example from YouTube. You can see just the RoboStack state file for YouTube is this one. They have the Media Partners Google allowing every URL because in disallow they don't have anything. But for the other user agents you will see that they are not allowing to get video, to login, results, things that are only for the user. So it's not important for other search engines, only for the owners. And then in the last part you will see that there is a signup also. This could be added to the configuration of NUX and you will have this URL pointing to your signup. In this case as they have more than one it's so important because otherwise the search engine can find only one. And what about the other? So it's important to have all the signups that you have there. And now that we end with the things that are more maybe technical or more configuration than actual content, let's see now what is MetaTag. So MetaTag is an element of html that describes the content of a webpage and is used by search engines to index pages by subject. So in case of having just a title, a simple title without any meaning, in this case what you want in MetaTag is everything that matters to your page should be there. So the title is the first line of the results in a search engine and is the first thing that a user will see. So it's important to have their keywords to sound natural and also that it's not repeated. Otherwise maybe if you have the same title for every page, how the user can know which page needs to click on is weird. So for that, if you search for example for Next, you will see that Next has the main with the Next brand and that one will specify your homepage next or things like that. So you are knowing which page are you entering in. And for the description, it's something similar to the title but in this case summarizing what is inside that page. And just in a quick look, a user can see with the title and the description that that page is the one that they want to click on. So for the description, we need to inform and interest users too. So maybe you can add a description specifying what is inside but it's not attractive to the user. So you need to make both to try to create everything that allows the user to want to click there. And then after MetaTags we have Open Graph but it's also MetaTags. Open Graph is just a protocol that allows us to control what content is shown when we share our websites in social media or any messaging platform like Slack, Discord. When you share the link, you will see the card on the right. So that card is made because we pass MetaTags to that platform. So for example, in the left, we will see all the tags that I added to have the right card. So for example, I add the OG title, OG description that are the same as title and description MetaTags. Also OG URL with the URL of the page I'm sharing actually. Also the OG type that is specifying if it's an article, I will put article and if it's another page, I will put website. In this case, it's an article so the article type is there. And also the image that is the image that you want to share in social media because maybe you have a feature image in your post, but this is not the one you want to share. And for that, you have this option. You can just add a new image only for sharing. And in this case, the one you can see there is the same as the feature image because I didn't create a new one, but you can do it. And also Twitter card. Twitter card is so important because you are specifying which kind of card you want to show. For example, in this case, a summary large image, but there is also summary that is a small image in the left and the test in the right. It's more compact and maybe it's better if you are sharing something that is more content than image looking, but I really like to have the image bigger and good looking. I don't know why. And then to create all the metatags and open graphs inside Naxt, we have two options. The first one is go to the head methods in any page and just start adding there the metatags. But in that case, you will need to replicate in any page all the stuff you need to do for having the open graph and metatags. If you create a plugin, the plugins folder called metadata.js and you just add once all this content here, you can just in the pages call this method that is injected in the instance of view with this dot dollar, the name of the method. You can just pass all the properties that are calling to the api and just add all this content inside the plugin and it will be easier and also smaller in your page and you will have control over one plugin only. So I recommend you to create the plugin and just start adding more tags when you need it and it will be easier and also maintainable. And for just to let you know, all this stuff we are doing in the head method is part of view meta. View meta is just something that Naxt created and you can go to the actual view meta and see which metatags you can add because there is a lot more than the ones I'm showing you here. And now that we have the metatags in the open graph, let's see what is the structure data and how to create it for our site. Structure data is code that you add to your pages to make the search engines understand better what's on your pages. So for example, if you have a page with recipes, if you add structure data for that recipes, they will be shown in a different way than you usually see results in internet. For example, in this case, if you see in the image on the right, you will see that the first page is just the title and description that we always know, but with a rating. That rating is not something that was magically there. It's because they specified the reviews they have in their structure data. The search engine will use the info in the structure data to display your content in useful visual ways in search results. So this is called also rich snippets. And in that way, you will have all the information you want to represent in the search engine. For example, for the videos that you can see there, they specify that there is a player, that it is a duration of 540, as you can see there. They specify everything that it needs to be to have the video section. So if you want to do it for your site, you can do it also. And it's quite nice. In my case, I'm using Google, obviously, as a reference. So I use the Schema.org vocabulary as they recommend, and also JSON-LD format. But let's see in the next slide how it looks. So in this case, if you see in the left, you will see the application LDJSON script that is defining a JSON, but with the context of Schema.org. Schema.org is the vocabulary that we are using to define all the structured data we are creating. In this case, we are specifying the news article. So the type that we are describing is an article, and we will define all the properties an article can have in this structured data. So we have the headline, the images that is inside, also the date of publish and modify, the author that are creating this content. So basically, we specify all the properties that the structured data of this kind of content allows us to put there. And you can just look at which ones you want. For example, if you are creating recipes, you will need to search in the Schema.org which options you have for recipes, and just add the options there, and that's it. So to do it in Nuxt, quite simple, because as you already know, vue Meta is behind Nuxt. So to do it, you just need to create the script tag or the script option in the head method, and start specifying the type of script tag, in this case it's application-led JSON, and the JSON that will be inside. And in that way, as you can see on the right, you will have everything that we see before, but just as an object of javascript. And you will have everything here, but the JSON will be format automatically by Nuxt, because you are just specifying which properties you will have, and that's it. But you can see here, for example, that in my case, instead of using type article below the context, I use graph. What does it mean? Because you can add more than one type in one page. And in my case, I have an article, but in that article I have also breadcrumbs. So it's important to specify both things, because then the actual search engine can sew the breadcrumbs inside the actual result of the search engine, and it's quite nice. So just be aware that you can add more than one thing. And then we have the RSS feed, that I really like this file, and it's an XML file in which you will have the highlighted information of your site. For example, if you are creating articles in your blog, it's important that you have in the RSS feed all the articles, instead of pages like About Us or My Profile. These kind of pages are not important here, because this file is only for generating email newsletters automatically, and automate social media posts. So with this file, we will just pass an URL to a platform that generates automated newsletters, and they will do it each time we publish an article. So it's quite simple, and we just need to add a module called Nasty.js feed, and just start adding options in the configuration file, and you will see now the options we have. So for example, the parameters we have are a path that we specify the route we have in our page to have, in this case, feed.xml. The method create, that will be the one where we will make the api calls, and then we will get the content, and make it look as the feed wants to make it look. And also the cast time, and that is how long should the feed be cast. So for example, if you upload a post, you need to wait maybe one hour for the RSS feed to be updated. That's really nice, because if you have a typo, or whatever, you miss it, you can just change it before the actual email newsletter has been sent, otherwise it will be a mess. And also the type. The type of RSS feed, you can specify here. In my case, I'm specifying RSS2, but you can also add one or JSON1. And also in the right, you can see the options field, basically, and in the scene create method, I just add a call to my api, I get all the articles I have there, and for each of them, I just create an item in the feed, as you can see here. In the feed, I just add an item with all the content I have in the actual article, and also in the first place, I just add in the options for the entire field, that is my blog, and the contributor, that is only me, because it's my blog, but in case you have more, you can add more, and that's quite cool. And also, just to let you know, it's important that you know that in NAS3, the functions that are inside the config will not be there anymore, but as I told you, you will have everything specified in the module in the readme, so you can just copy-paste and have it ready. But have in mind that everything that you did in the config.js file will not be there anymore, so we need to be aware of and just change it when NAS3 comes. Don't worry about that. And now, you can see the result here on how the RSS feed looks when you generate your project basically, and you will see that it's just tags for the elements we passed, title, link, description, blah blah blah, and for each of the items, we'll have a tag with all the content inside. And this kind of XML file will be just in this URL, we will just paste this URL in any automation platform, and they will automatically, with a cron, they will just send the articles that you publish inside Twitter, LinkedIn, whatever platform you choose to automate. So it's quite cool, and I recommend you to do it if you want to automate things, and don't do it yourself by hand. That's nice and will allow you to save time, and it's important for a developer. And last but not least, we have the MetaServer Inspector Chrome extension that will allow us to just check that everything that we did in this presentation is correct, and we don't have any problems while doing it. So in the right image, you will see the dev community inspection I made, just an article I have there because I have canonical URL, and you can see all the meta tags that I add, and also all the headers that we have, the markup, there is also the structure data I specified today, you will see it here, also the information for that. But in this case, as you can see for example here in the headers, you will see that there is a problem here, and it's that the H1 is after 3H2, and that's not correct because the H1 should be the first one. So anything that you have wrong in your page, this MetaServer Inspector will allow you to have a look and say, hey, I did it wrong, or hey, I exceed the characters that are allowed to the title. So you can just take a look and see what is happening, and if you have everything ready for production. And that's it. So now that we have everything, just keep in mind that this is something that you need to do constantly, so you need to add useful content and merge people, you need to add headings in the correct order as we just seen, we need to add alt for images, and also make use of internal linking, because you don't want the people to be lost in your site, and improve the UX, because it's important to have everything compressed, everything minified, also mobile-friendly, because these days it's so important, the mobile, so you need to be aware of responsive design and have everything ready for mobile, and also keep in mind that core web vitals will change a lot and you need to be updated, so you can have a better seo. So thank you so much, I hope you are having a great day in the vue conference, and hope to see you soon in my website downtrails.com, or at any social media at downtrails. So see you there and have a nice day.