Let SEO be with You in Your Nuxt App

Hello 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 BEES Amsterdam and EES World Conference. So I hope that you know it. And in my spare time, I'm writing articles about Next and Stereo Block 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. The past year, after creating my own blog and started writing articles, I have been named ambassador at Next and Stereo Block, the technologies I used to build my website also. And this year, in March, I had been named Google Developers Spreading 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 is it 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 site map, how to define a robust file, the metadata and open graph that we can add to our site, and 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 those 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 a way that you can drive people that don'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 focus 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 period 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 a focus 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 on the right will explain you the steps we can follow to have this kind of SEO implemented in our sites. 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 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 on 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 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 mentions, 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.

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 get 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 this file is on your site and will tell the search engine 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 Naix, is quite simple, because we have a module called naix-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 rows, because the search engine are always looking for the trailing-slash at the end. And then, when I created the sitemap the first time, I just realized I was creating only the pages that are inside the pages folder of NAS, and all the dynamic worlds that I was creating under sloop, 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 GeneratorJS, 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 routes to the sitemap routes. As you can see, in the line that is highlighted, you will see this next option's sitemap routes is awaiting the routes that are generated and then the sitemap will have everything ready. Just adding this module you created, under the modules folder, to the buildModules option in the configuration file on Nuxt, 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 Nuxt 3 is that the generateDone hook will not be present, but don't worry about that because the sitemap module we have in the readme helps to do it in that case. And then when we generate the project you 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. 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. Also, just a quick tip that if you promote your site on 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 are also important for the search engines more than for the content of 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 lobbying 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 a Google bot or any crawler to look into that URL. To do that in NUX, we just need to add another module, in this case called NUXjs-Robots, 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 is disallowing the admins task, but obviously you can add more than one and maybe with asterisks you can also disallow this URL for any user agent. What we can see in this example from YouTube, you can see just the robots.txt 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 log-in results, things that are only for the users, so it's not important for other search engines, only for the owners. In the last part you will see that there is a sitemap also. This could be added to the configuration of NAX, and you will have this URL pointing to your sitemap. In this case, as they have more than one, it's important because otherwise the search engine can find only one. What about the other? So, it's important to have all the sitemaps that you have there. And now that we end with the things that are more 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 web page 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 metatags is everything that matters to your page should be there. So, the title is the first line of the result in a search engine and is the first thing that a user will see. So, it's important to have there keywords to sound natural and also that it is 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 NUXT, you will see that NUXT has the main page with the NUXT brand, and that one will specify your homepage NUXT or things like that.

So, you are knowing which page are you entering in. And for the description, is 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 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 is 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 meta tags we have Open Graph, but it is also meta tags. Open Graph is just a protocol that allows us to control what content is shown when we share our website 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 passed meta tags to those platforms. So for example in the left we will see all tags that I added to have the right card. So for example I have the OG title, OG description, that are the same as title and description meta tags. Also OG URL with the URL of the page I am sharing actually. Also the OG type that is specifying if it is an article I will put article and if it is another page I will put website. In this case it is an article so the article type is there. And also OG image that is the image that you want to share in social media because maybe you have a featured 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 featured 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. The example in this case is a summary large image but there is also a summary that is a small image in the left and the text in the right. It is more compact and maybe it is 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 NUXT we have two options. The first one is to go to the head method in any page and just start adding there the metatags but in that case you would 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. Another good suggestion for just to let you know, all this stuff we are doing in the head method is part of viewmeta. Viewmeta is just something that Nuxt created and you can go to the actual viewmeta and see which meta tags you can add because there is a lot more than the ones I'm showing you here.

And now that we have the meta tags 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 is in 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 is 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. 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 specified that that is a player, that it is a duration of 540, as you can see there. They specify everything 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 a 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 structure later. 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-lead 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 as an object of Javascript, and you will have everything here, but the json will be formatted 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 that 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 kinds of pages are not important here because this file is only for generating email newsletters automatically and automating 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 Nazir's 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 to the airseed 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 airseed feed you can specify here, in my case I am specifying airseed2 but you can also atom1 or json1.

And also in the right you can see the options field basically and in the airseed create method I just add a code 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 is 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 is 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 SSV look when you generate your product basically. And you will see that is just a 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 these 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 a 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 metaseer inspector 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 a canonical URL, and you can see all the metatags 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 MetaSEE 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 SEE is something that you need to do constantly. So you need to add useful content and match people, you need to add headings in the correct order, as we just see. 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 a 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 downtrawals.com or at any social media at downtrawals.