Managing Assets and SEO – Learn Next.js

welcome back to mastering next yes in this module we're going to talk about managing assets and SEO otherwise known as search engine optimization now assets and SEO are two really important parts about building web applications you're going to have images or files that you want to host and you want your website to be found on search engines like Google and to do that and have it be ranked higher than other pages you want to have good SEO now next Xero configure proach makes it really easy to host your assets and it works in a similar way that the pages directory works that hold you holds all of the routes of your application so as you've seen inside pages you can have different routes you can do the same thing with the public folder now public exposes all of these files in the same directory structure that it does with pages so slash index in pages that routes to the root of your application robots.txt or images inside a public route to slash robots or slash images so for example in this blog I have an images folder and then I have a bunch of images inside of here so if I go to mastering next yes com slash images slash my name you see that it corresponds to this image in my directory so there's a one-to-one relationship here which makes it really easy to host images and all of those files are exposed and they're underneath your public directory now you'll notice I have a directory called favicons and what a favicon is is this small image that displays on the tab in your browser for your website now you notice in this folder I have a ton of different favicons of different sizes and different names and each one of these corresponds to a different browser or a different platform that someone is going to be viewing the website on now I didn't make all of these myself there is a really helpful favicon generator website that allows you to upload a picture so for this website just use the JavaScript logo and then it will output all of these different files for you so that you can then put them in your favicons folder in your application so another nice thing about this website is if I take the mastering next yes site you can actually check what it looks like to make sure that your website displays as you want across all different properties so on safari on chrome windows in the browsers you want to make sure that all of these display your favicon properly with the added benefit of on iOS you can actually save your application to your home screen and open it up as kind of a pseudo app and that's something that you get through having this favicon setup I also had an images folder and one thing I wanted to touch on was image compression and optimization now there's two tools that I like to use that I baked into my workflow for when I want to commit images for a blog and those tools are called imageoptim and image alpha now these are free programs that you can download you can use them on your own they don't have to be baked into your process but what they do is they help you compress and optimize both pngs JPEGs and gifts or gifs if you're a psycho so if you download these tools you'll see I have these scripts in my package JSON and what they're doing is for every gif or JPEG or PNG that's in this directory it's gonna run imageoptim or image alpha over them and I have this set up as a pre-commit hook so that all of my images get optimized before the commit gets pushed up to github now there's pros and cons of doing this the con is that all of these images live on my file system which can potentially take longer when you're cloning the repository or when you're you know trying to make updates the pro is that it's not a part of build time with you know some other frameworks like Gatsby it can take a really long time to build out your pages when you have just you know thousands and thousands of files so there's pros and cons to both another option that I'm gonna touch on and then another module is using a CMS and when you have a CMS then you can actually host all the images on there and some of those services actually do the compression and optimization for you so it's just something to be cognizant of because you want to make sure that you're serving up as small as files as you can and you're not serving up just ridiculously sized images because that's gonna help your pages load faster which actually tie into SEO so Google has started to rank sites higher that get better page load times and just overall are more performant pages so you really want to consider what that effect of having lots of images or large images will have on your page load time continuing to think about Google we want to have good SEO and we want to control what information that we expose about our application so that Google knows what information to display and one way to do that is through Open Graph tags now Open Graph is a standard that essentially allows you to insert these tags inside of the head of your document of your HTML and when search engines crawl this they now know how to display your content so to do that inside of this application I have a custom page component now this page component I pass in some sort of children add a description all sorts of other information that's a for this part but I actually override the next head and I pass in a bunch of meta tags so I'll quickly go over some of these some of these have to do with the favicons or theming that I want to set up for you know each specific browser or platform that I want to use but we also have ones like a description which is gonna give the search engine a little bit more information about the page that they're viewing some keywords titles the URL you might also want to verify your sites on google or Yandex so that you can use their tools to analyze how your content looks and performs in search engines if there was an Associated image with like a blog post for example I'm also including some additional meta tags for images same thing with dates and then finally there's actually even Twitter specific meta tags that you can use to control how your content looks when it's shared on Twitter and really what this comes down to is ideally people are gonna be sharing your blog posts on social media platforms and you want to make sure that you can control how that looks and I'm gonna touch on this more in the next module but if we look at an example of an MDX file so a blog post you'll see that I'm setting up these meta tags in the beginning to say the description of the page the featured image that I want to use and then the title and Facebook has a tool called the sharing debugger that allows you to take any URL and see what it looks like when somebody shares this on Facebook so you see the featured image you see the title a preview and then the description and it actually goes into more details down here where you can see everything that it parsed from those meta tags so Facebook has this Twitter also has something called the card validator which does basically the same thing showing what it will look like when somebody shares your Tweety and there it'sit's pretty much the same thing now I want to highlight that those tools are very helpful and if you're sharing something for the first time sometimes it's nice to go out to the Facebook about Facebook debugger and scrape it so that the images get populated but there's also a Chrome extension that will give you the same information as this and this and it is called og image preview so it shows you Facebook it shows you Twitter a couple others and then it also shows you just the raw tags that it parses on the page so I'd recommend downloading this if you want to get a little more insight into how your meta tags Open Graph tags are being parsed on your page another thing I want to talk about while we're here is a custom document page now I showed overriding document when we talked about styled components and in this application I'm doing the same exact thing here to get style components set up but I want to also touch on you're probably gonna want Google Analytics on some kind of page and the recommended way to do that is to override what document returns from the server and include this script for Google tag manager which then allows you to have Google Analytics on the page and just as a reminder this code will be open source so that you can reference this but essentially you can override head again and include this Google tag manager script and put in your tracking ID for your specific Google Analytics project and now when your content is served up from the server this custom document it's going to include Google Analytics and allow you to be able to track how users are using your website so this is a pretty common thing I think a lot of people will do so it's good to know exactly how to do that now there are two other Chrome extensions that I found really useful that I want to touch on that you might also use and one of them is called SEO and this allows you to do a couple more things to learn about how search engines are processing your site so the concept of on-page SEO is you know you want to have your highest keywords for example next yes I want that to be in an h1 and as keywords get less important they need to be in you know less high of headings so the most important thing on this page is next Jeff this is the next chess guide the next important thing or most important thing is the description about what the course is and then finally it dives into some other headings for some you know tertiary points about the course so we can use this to parse that on-page SEO and you also get access into those og tags but then we can also check and make sure that you know none of the links on the page you're broke which is obviously a good thing it can save you some manual checks if you have you know tens of hundreds of links you can actually see what it would look like in a search engine so if I search for next j/s and my listening was number one you know cross my fingers probably not gonna happen but if it was this is what it would look like let's let's make this a little more realistic there we go so yeah that's really helpful there's a couple other nice things in here that you can check out I've really enjoyed this extension the other one is called accessibility insights so as you're developing your page you want to make sure that it's accessible for everyone as well and this Chrome extension can do a lot of nice automated checks for you so if you go and click on this assessment it has all of these different things that it can run through and check and make sure that your site is meeting accessibility needs another way that you can check how your site is meeting accessibility needs and also performance and a few others is by using this performance tab inside of google chrome debugger tools and then also you can run a lighthouse now this audits gonna tell you what the performance is like you know if you've opted to do a progressive web app you can do that it's going to talk about best practices accessibility SEO and give you a nice report so that you know what you need to do to improve on your website so I would recommend checking this out and running it on your projects because how your site scores on lighthouse can sometimes affect how high it's going to be ranked on Google so this is a pretty short module there's not a ton to talk about here but it is very crucial to know now you know how you can host your assets what the public directory does for you how you can compress or optimize images for blogs or other content that you're producing and then how critical Open Graph tags are and meta tags are so that you can control what your website looks like in search engines so with that thanks for tuning in and stay tuned for the next episode Cheers

Channel: Lee Robinson

Views: 11,097

Rating: 4.9194632 out of 5

Keywords: nextjs, next, zeit, react, reactjs, web development, next js, server side rendering, create react app, gatsby, gatsby js, mastering nextjs, universal javascript, javascript, next.js, css, sass, css-in-js, styled-components, seo, search engine optimization, next seo, next assets, next images

Id: fJL1K14F8R8

Length: 14min 18sec (858 seconds)

Published: Thu Jul 02 2020