SEO for Developers | 2020 SEO Tutorial

[Music] hello everyone and welcome to another JavaScript mastery video today we are going to go over the most important techniques that you can use to improve the CEO of the website your building there are a lot of factors regarding SEO from a marketing standpoint luckily understanding a few basics about CEO will go a long way to your website's overall success searching for best CEO practices often returns contradictory and outdated information or topics related to keyword research content optimization and link building it can be really easy to get lost in all the constant updates and dismissed CEO as something only CEO experts should do this CEO guide jumps right into the main part it focuses only on CEO topics relevant to do web developers it skips CEO topics which are better suited for CEO experts marketers and business owners for example keyword building and content optimization so let's dive right in firstly we need to explain what CEO is and what are the main benefits of the websites that follow good CEO techniques and secondly we are going to go over factors the developers can directly implement to get higher rankings on Google so CEO or search engine optimization is the process of increasing the quality and quantity of website traffic simply put better CEO equals more visitors to your or your clients site there are two main subcategories of CEO on-page and off-page CEO off page CEO refers mostly to factors that we cannot affect for example the niche of the website of your client the outside links pointing to it high quality content etc on-page CEO on the other hand is a developer's job it greatly effects the rankings of the website on google and other search engines in this video we are going to focus solely on the aspects of on-page CEO that can be in directly by you the developer quickly and without any issues inside of here we have basic index dot HTML structure if you are in Visual Studio code you can just type html5 or HTML and then choose this syntax and it is automatically going to generate it for you if you're using some other text editor this may not be the case but then you can simply type this out and then we are ready to go so now that is out of the way we can go back to our presentation and start with our first CEO guideline and it is the title title tags are a huge signal in helping search engines understand what your page is about they arguably the most important on page CEO ranking factor and should contain the main keywords that your page is targeting so what is the title tag inside of here we can see that we googled Saturday Night Live for example and right here on Google search this Saturday night five - nbc.com this is the title of the website so you are actually choosing what is going to be displayed and this greatly affects the click rate if the title is for example boring or too long not many people are going to click on it so it is really important that we optimize our titles and as it says here title tags should be around fifty to sixty characters in length so let's get back to our visual studio code and let's actually see where we can put that title visual studio code actually brought our title right here so it is just a title tag basic tag opening and closing one and inside of here we can put the title of our website so let's type something like learn JavaScript and then we can put - JavaScript mastery this is one example of the title and you can see right here that it includes many keywords for example it includes JavaScript or learn JavaScript as a separate keyword and then we have the name or the title of our website right now we can go into the browser right now we can open this file inside of the browser by going into reveal in finder or something else if you're on Windows and once we have it open we should see the title on top of our page so let's see so the page is now completely blank nothing on there but right here you can see that there is learned JavaScript JavaScript mastery so first step solved now we can get back to our presentation and see what else should we do so the second thing that we need to do is the description as with the title description should be unique and should contain the primary keyword as with the title description should be unique and should contain the primary keyword they should also be under 150 characters and they should be relevant to the topic of your website so let's see how we can implement the description we can add our description by creating a meta tag so it is a self closing tag and inside of here we can write name equal to description and content equal to the description that we want to put in for example if we're talking about JavaScript mastery we can put something like this so the purpose of JavaScript mastery is to help aspiring and establish developers to take their development skills to the next level and build awesome apps you can also throw in a few more keyboards but in here we have development web development JavaScript and stuff like that so basically this needs to be suited to your own website we can also create our comments right here just so we know what we are doing currently so this is a meta description we already created a title we are going to go over these tags in just a moment but for now let's get back to our presentation 13 on our list is URL URL needs to explain what the website is about it needs to be easy to understand and tell search engines and humans what the page is about so regarding the URLs we cannot implement that right here but we can give some examples for example we have someone's blog let's say that the domain name of his blog is HTTPS and then the main name or let's say his name so John Doe for example john doe's blog.com and now right here will have something like slash blog it would be nice if every blog so every specific article has characters something like this or even some ID code which is like this this isn't readable neither to the browser nor the search engine nor to the human so it will be better if it were something like slash blog and then slash the title so the title of the each specific blog let's say this one is about dogs and then we can name it dogs or something like that so URLs need to be readable and then search engines will crawl better ok now that this is out of the way we can go to default one fourth one is actually other meta tags so with the title tag and the description tag there are a lot of other meta tags that are important not as important as the description and the title of course but they still hold some value so in here we can see that we have meta keywords attribute a meta keywords is a series of keywords you deemed relevant to the page in question so for example if we go right here we can create that meta tag for ourselves we already learned that meta tags are self closing tags and that we define them by name so meta name equal keywords and then inside of here we can put content and then we can write our keywords with comma separated values so inside of here we can write something like HTML CSS JavaScript we can also do Jas web development we can even divide it and stuff like that they do not need to be uppercase they just are in this example and this is basically it for the keywords it simply helps Google and other search engines understand better what the website is about with the keywords we also have a meta viewport it gives the browser instructions on how to control the pages dimensions and scaling so in here we can see that visual studio code already created a viewport for us so we're simply going to put a comment meta viewport this is one of the most used viewports it simply scales everything if your website is mobile-friendly we are going to get to that later it simply scales it nicely on mobile devices we can also create our comment for our keywords so we're going to type in meta keywords and this is just some other meta type that we are not going to talk in specific in this video but as you can probably read from this it is about compatibility with Internet Explorer edge so we're going to type meta H for example doesn't matter we have a few more meta tags for example we have meta charset which defines a character set so we are using UTF basically all characters and it is in English so it simply helps Google and search engines rank rank the website better and we have author which is used a lot with blogs so if your website is something like a CMS content management system where a lot of new websites are going to be generated inside of it then we can add an author meta tag to each one of the new websites so inside of here we can just put a comment for our charts chart set we use UDF right here which is basically universal so we can type meta charset and inside of here at the bottom we can create meta otter and just below we can create a new meta tag which has a name of author and it also has a content of the author's name for example John Doe and we can close it and that's it there are a lot of subtle changes right here but each one of this helps Google to rank your website's better you can think of that this way most developers aren't concerned with CEO and therefore your website which has this is going to rank most likely better than the competitors ok we can get back to our fifth slide which is favicon so the main reason your website should have a favicon icon is improving user experience it is much much easier to find the needed bookmark by image associated with a certain website rather than looking to different URLs so it goes side by side next to your URL it improves your visual identity brand identity and simply makes your website easier to find and look better so as you can see right here in the picture it shows on the chrome tab right next to the title so we can go on the internet and find some random favicon so I can show you how to put it there so if we go inside of the Google and type something like favicon we can see right here we can click on any of this I guess and we should see some favicons in here we can generate favicons from images which most people will find really useful but you can also browse the Falcon gallery for example let's type website just something generic and if we right-click and save it we can save it to our directory and then we'll be able to put it inside of the website ok we are back inside of the visual studio code favicon is here make sure that you rename it to favicon if it isn't already we specify the favicon icon with a link tag which is a self closing tag and inside of here we need to put Braille and it can be equal to shortcut icon' which is basically used for accessibility we can also choose the type of our image so we can type type and it is going to be equal to image and then forward slash ICO and the most important part we need to target it so we're going to type H ref and then we are going to type dot slash favicon dot ICO after we save that and we open our website inside of the browser we are going to see the changes so right here on top if you can see next to our title we have our favicon it is really small but I hope you can see it it is also going to show up when you save the website so if you save it right here you can see that the title and the favicon are right here great now we can get back to our presentation and we can go to the next very very important CEO tip so regarding CEO the faster the page loads the better so we need to make sure that we do not blow the website with different frameworks libraries jQuery for example and this goes for pictures or images so if you're posting an image in your content you must compress it images are one of the big causes of a slow website there are a ton of different online compressors this is just one example so it is compressed JPEG calm if you go right here you can upload an image and it is going to compress it so let's see how this compression actually works we can go on google and search for copyright free images if you create websites you are not allowed to use all images you find on the web so unsplash is a great website that has all the photos that you can really use so inside of here why not search for dogs dogs are always cute so inside of here we can choose one image and we can download it now we can put this image inside of our visual studio code and we can actually display it in our HTML so we're going to create an image tag which is a self closing tag it is going to have a source attribute with dogs that jpg so inside of here if we save that and put it as it is we can also just correct the width to let's say 25% now we can go back inside of the browser and see how it looks and if you go over here you can see an image now we can choose the same image and then upload it to our compressor ok right here you can see that it has 1.6 megabytes that is really a lot when it comes to websites for example the whole size of your HTML CSS or JavaScript can be in kilobytes but this image alone has 1.6 megabytes which is a lot so now the image was downloaded and we can put it back inside with visual studio code we can rename it to something like dogs that mean that jpg and we can put it next to this image just by typing dogs that mean that jpg with the same width so now if we go back and go inside of the website and refresh you should be able to see the difference right well I personally cannot see any so this compressor has its job really good it compresses the image but basically the quality stays the same or almost the same it it is definitely unnoticeable to the human eye but what happened to the size of the file so if we inspect these images let's see how the file size changed so let's collapse this right here and then let's open this right here so we can see that the unmodified version has 1.6 megabytes and that the minified version has only 576 kilobytes so that is about three times less than the original image and the quality stayed almost the same that's it for the images now let's see what else can we do while we are at images we also have some attributes so attributes to disk images can be alt tags basically it stands for alternative content they help search engines associate images with a web pages content so they can properly index it within their search results we can add our alt tag right here so alt is equal to and then the content when you're doing alts you do not need to say something like dogs and then say again images it already knows that this is an image so this is redundant you can just type dogs or for example two dogs playing and then your image is actually going to show in Google's search results while we're at this we can copy this and put it inside of this compressed image and then we can delete this and simply add a comment optimized image with an alt tag simple as that okay now this doesn't change anything in how we see the picture this just changes how a search engines index it and also it is used for accessibility so for example for blind people it is going to read this text to them so they can actually know what the image is about we also have anchor tags so anchor tags are basically links and we can specify the title of an attribute it is displayed as a tooltip in most browser basically it appears in a small bubble we are going to see how it looks just now so we can create a normal anchor tag that looks like this and we can put href which points to HTTPS and then google.com and inside of here we're going to write Google okay so if we go back to our website if we click it it goes to Google as we anticipated okay now that is ready we can actually go back and put an title tag to our anchor tag so inside of here we're going to say something like Google this is just a basic example but with some links it isn't clear where the link is going so there can be something else in the title for this example we are going to use just Google and then if we save and refresh when you hover over the link you can see that this Google title showed up and this also helps search engines ok let's go back to our presentation and this 8 tip right here is one of the really really important aspects of CEO nowadays everyone is using a phone sometimes or for some websites or most of the websites actually we access them by a phone so why would you limit yourself to not having a mobile-friendly website it is a critical part of your online presence for the last few years Google's indexing has been really focused on promoting the websites that are mobile-friendly and the ones that aren't are going to be ranked lower on the Google search so it's really important to implement that mobile friendliness we are not going to do that right now because we do not have a website right here we can create that in another video if you'd be interested creating a whole website from scratch with HTML and CSS for example with deployment but for now let's just say how we can make the website mobile-friendly so in here we already mention that we have this meta viewport right here the most of the mobile-friendly optimisation is going to be happening inside of the CSS file where you're going to use media queries so I'm just going to put it right here media queries you need to use media queries to showcase your website differently across all devices and now to our ninth tip which is minify and compress we already mentioned that the smaller the file size the faster the website will load and the Google is going to rank it better so when you minify your website CSS HTML and JavaScript files you can well save not save some valuable time off of your site slow speed ok so how are we going to shave of that some valuable time basically we need to minify and compress our j/s HTML and CSS the same thing we did to images we compressed it we can also compress our HTML J's and CSS there are a lot of websites that do this online I'm going to put one of them in the description this one basic covers all three of them so what minification actually is is that if you go inside of here you can see that there are a lot of spaces right here so we have a space space space basically humans use spaces to improve readability but the browser doesn't need spaces so we can remove something like let's say this space right here this space and all of the spaces that we have this of course looks stupid in website that has 26 6 lines but web sites that have a lot of lines and a lot of different logic for example in JavaScript they can be compressed and simplified a lot so that's it for this tip and the last step is keyword usage so if you're creating a website for a client and he doesn't yet know what he want to put on the website make sure that keywords appear in a title meta description and headings so if the website is about let's say Java Script as we said the right here we need to use the main keywords across all the web sites so it they need to be used inside the content of the keywords description title even the URL or the domain name we need to place the main keywords in headings subheadings and basically anywhere where we can squeeze it so for example if our pages about JavaScript and branded joffrey we can for example create an h1 every website needs an h1 and then we can simply put learn JavaScript up with JavaScript mastery simple as that we used a lot of keywords and although sometimes it may seem repetitive the more keywords that you put the website will rank better for that keyword term I really hope that you learned something new if you like this video feel free to stay tuned and subscribe to JavaScript mastery a lot of new people have been joining lately and the growth has been amazing we are just about to hit 10k subscribers so feel free to be one of them this was more of a beginner oriented video but here in JavaScript mastery we cover everything from beginner HTML and CSS all the way to JavaScript and then react deployment and building different projects and websites so if you like the content that I'm creating feel free to subscribe and stay tuned for more [Laughter] [Music] [Music]

Channel: JavaScript Mastery

Views: 57,083

Keywords: search engine optimization, seo tutorial, seo tutorial for beginners, what is seo, seo for developers, seo for web developers, seo for beginners 2019, seo for beginners, seo guide for beginners, seo guide 2019, on page seo, on-page seo, seo

Id: JSm4aQl4w_U

Length: 24min 55sec (1495 seconds)

Published: Sat Nov 16 2019