Django - Technical SEO | Basic Search Engine Optimizations Tutorial

hey guys welcome to cod with Stein in this video I'm going to talk and teach you a little bit about technical SEO with Jango so I'm going to talk about the correct use of H1 H2 Etc how to set alt tags for images uh how to use the different meta tags and how to make these Dynamic how to use good image names uh how many words per page and similar how to set up a Rob BS file and at the end I'm going to set up a sites map for the page as well so I'm going to begin with setting up the environment for this so I've created a new folder called high Jango which will be the name of this project in here I want to create a virtual environment where I can install Chango and other dependencies so to create this I just say python 3-m en NV sorry V andv and then the name which can just be en EnV and when this is created we can activate it by saying Source EnV B activate so you can see here that I get the name from the folder there at the beginning and every time when now run the command pip to install a python package it will only be installed in this environment so if I want to deactivate this I can just say deactivate okay let's activate it again by saying this command nice so then can install Jango by saying pip install Jango this will then install the newest stable version of Jango which currently is 427 don't worry if you have a slightly older or newer version as long as you have version four or maybe even three everything here should work so now that we have done this we can create the Jango project as well but in django-admin start project Che hi Jango so let's go into this and I can see I the manage P file and then a folder with even more files so if you want to learn the basics of D Jango you can search on my channel for other videos where I will explain what all of this does so if I now go to vs code I have open up the project here as you can see here I have the same files here as I have here great so I'm going to begin by just creating a core app where I want to have the front page and an about page so let's create the app by saying python Men by start app core and I can also just create one more so it's done called blog great so now we have these two but Chango doesn't know that this exist so let's add them to the settings.py file so in in here inside install apps we can add blog and core like that so now Jango knows that this exist and that we're going to use them in the project so let's begin by creating a very basic front page so inside the core let's create a new folder called templates where all of the templates will be and then in there core then we can create the base. HTML file which will include the top where the meta text and title will be also the menu and similar so I'm going to use Tailwind for this so if I just Google tailin CSS go into tailin css.com get started and I'm just going to use the play CDN since this is just a demo so just copy this so let we have a very simple starter package like that okay so now we have the base template let's also create one more called index. HTML which will be for the front page and this should extend this base template base. HTML sorry I need to say core base. HTML now we can save this and then I need to set up the view So Def index request return render Loop render request and then a reference to this index file so core index.html and I don't need to specify this folder because Chango will automatically look for a temp uh sorry we look for a folder called templates inside each of these apps so we can save this now and then to keep things as clean as possible I want to have a separate URLs file here so everything is not in the main URLs file so first I can import the path function from Jango from Jango do URLs import part and then I want to import the views from this file so from do import views and I want to set up something called the app name and this can be core so this is just name spacing so it's easier to reference views inside a specific app and then the URL patterns which is just a very simple python list Po and when the part is empty I want to use the views. index view we can set the name to index and save so last thing we need to do now before we test this is to go to this URLs P here inside the Hyo folder and include it here so here we just a PA and we when the URL is empty I want to say include core. URLs so I get a warning here because include is not defined we can import it together with part there so include and then this is gone so if the PO is empty you will go into one of these URLs if it's empty sorry if it's admin it goes in here if it's empty it will go into this file and check this before it continue use down the list if there are more so now I think it should be ready to test so python mention P run server yes you can see I get the migration warning here it's just because I haven't run this command yet but I will do it soon so then I can just click this and it will be open in browser and as you can see here The Styling from Tailwind is working nice so then I can just close this for now I can close this and then I can set up some more things inside the base. HTML so at the top here I just want a very quick navigation bar nav close we can have some spacing inside here uh four and PX 6 so we have space above and below and on the left and right side you can also set the background color for this this for example purple 800 and we can set the text to be white if there are any text and then on the left side of the screen I just want the name of my blog which here can just be a link a hrf slash or we can reference the URL correctly by saying URL and then the name core colon index so then this is the app name and this is the path name to set the clause for this text bolt sorry I think it's font bolt and text to XL and then hi changle let's save and see if it works yes so here you can see we had a purple menu and then a link to the front page nice on the right side here I just want very sorry I want the link to the blog page but also the about page maybe just the about page so let's create that one as well a hrf we don't have this page yet we can just go to slash Clause um maybe don't even need a clause for this about so let's see what this looks like you see here it's over here now I want to move it here so I just need to add some Flex claes here Flex items Center so that they are on the same line and then justify between to get some space between them great so now that we have this we can proceed to a very simple front page so then I want a very simple Hero at the top pair so can add a section and then in here I want the H1 and this should be the name of the page we are on now so for example hi Chango and maybe a slogan like learn about Jango so this will now be the name of the page are on and it's very easy to understand what it does let's move it to the center make it a little bit bigger and similar so class text 4 XL and we can add something to here as well if it's a text Center so it's centered on the screen and text white and we can set the background as well so BG purple 600 like that okay it doesn't look very good but that also not the point of this tutorial but we need some space above and below so py 200 pixels I think this will work yes great and then we should have a little line below here as well so we can set H2 plus text XL and then on this page you can learn everything you need to know about jangle like that okay so now we have the name of the page but also a little slogan or a little bit of introduction text as well so I just want some space between these two um Ed it on this one and be D 10 like that okay so then we have this one and as you can see here we have the H1 which is the most important title of this specific page the about page will have about as the most important and then this um you can argue that this is not a headline and maybe it should be a paragraph so it's a little bit up to you what you want to do here I think that this is a headline so that's why I added this as age2 because this is very important as well to tell the search engine what is by the way if you want to learn even more D Jango or view from me you should check out my website codit stein.com the site has many premium courses and a lot of awesome blog posts and for as little as $20 per month you will get access to all of my content and you will be able to track your progress you can talk to me and similar so go to codit stein.com after the video and sign up and then below here I want a simple blog listing so then we can add a new section set the class and then here I want py uh six it we don't need as much spaces we have here PX 6 just like up in the menu and here the background can just be white and then we can have a list of blog posts so if I just create a new div class flex no we can use grid here and grid calls three so that we have three blog posts next to each other set the Gap to before so there are some space between the posts and then for each of the posts I want to have one more uh HTML tag here we can use article I think that is the most correct one class BG white and I want the corners to be arounded on these ones um p y 6 and px6 or I can just say p-6 and then in here I want to have image at the top here so I can go and splash.com and find one so let's just take this one very pretty mountains copy actually I can save the image um and splash like that save okay it's a weird format um let's just export this to a JPEG so export jpeg okay yes that's okay that was now in the documents folder so if I now move this into H Jango hi Jango create a new folder called media and images and paste it there for now okay so M SRC SL media SL images sln splash. jpeg so I will come back to more of this later I can also add a figure here just so that HTML is even more correct and then I want um div here for the title of the blog post and the intro and the read more button so age three this is not as important as this one that's why I use age3 close text XL and font bow blog post one p and then just add some lowp blah blah blah blah random text there and at the bottom a hrf don't have this yet so read more so let's save this now see what it looks like if I just go back here can see that the image is not working but we have the title inro and read more button or link so you can make this purple text purple 800 this can be a little bit grayish so text Gray 700 maybe even a little bit brighter 500 yes and I want some space there and there so I can add that on this one my4 and I also want a space between this content and the image itself can add that to this one and be four okay so um you see here that the article had BG white but uh you can see that so if I set it very gray sry very light gray color here then you can see this little bit better nice okay so then I just want to make the images work and to do this I need to go into settings and set the media URL media and then uh media root base there/ media so then this is the project folder and then Jango just adds media at the end there so if I refresh now it will not work because I need to add this to the URLs as well and I always forget the Syntax for this so let me just go into one of my older projects for example the soul gadgets into Soul gadgets and the main URLs file so then you can see here at the end here that we are using a static function to include the URL and the root folder so then this will work locally at least and then just need to include this here from Jango docon and also from Jango do conf import setting things so now all of this is warnings is gone so we can go back and try again and now we have the image the title The infro and the read more button so let me just make a duplicate of the tical five so then you can see here that we have these next to each other and the grid function from Tailwind make sure that everything here is okay so um now that we have talked a little bit about H1 meaning for example this is very important also important not as important as the page title because we are not on this page now for example but when we go into the detail page of a blog post we want to use H1 on this one I will come back to that um anyways I want to move a little bit of this this code into the index.html file so let me copy this section and this [Music] section right out of there and then in here we can say block content because we want to put everything inside one block like that so if I save now save this it will not work anymore because we don't have this block on the base file so let's add that here as well save refresh and now it's back as it was nice okay so let's build the about page so we can talk a little bit about more about the H1 tags so we can begin with the view so we have it def above out request return render request and then core SL about. HTML save and we can add this to this URLs file inside core app and when the part is about now we want to use the views dot about set the name to be about as well so up in the menu we can now fix this URL core colon about and save so if I now click this one I get the template does not exist error so let's fix that about HTML this should also extend a corp. HTML file set the block content just add some random things there so we can test save and refresh if I click again now you can see here that it is working perfect so let's set up a little bit on this page so if I copy this section here not the her Rob but this one and then I can say H1 class text to XL and we can have some space here m b-6 about and then below here we should have some random information about you or your company or the page or whatever it's not really anything to do with this tutorial but as you can see we have the H1 which means that we tell the search engines that the name of this page is about okay so I hope that was okay to follow along so far now I want to set the title up in the browser here as you can see here it's just a URL can't be like that so up here below these meta tags for example we can set title and then hi Jango so if I refresh now it says H Jango but it also says H Jango go on the front page so I want to make it was to dynamically insert the page name here so at the beginning here I want to add one more block so block title and block and add a space and then a pipe and a space so if I save now it will say space pipe space H Jango but if I know just copy this go to the about page and then in here I say about refresh it will now say about and Jango will understand that we are on about page on a page called high Jango on the front page we don't have this yet so we can set it here as well for example welcome to or learn Jango refresh and you can see it there as well nice okay so that is how the title tag is working um so we can also put Dynamic information in here which we will do in the blog and that is now the next step so I want to set up the database models for the blog which will be very easy or simple for this example class post models. model title which is the title of the blog post the models. Char field max length can be 255 we want the intro and the intro is the text that we are going to show here models. text field and a body which is the one we have on the the detail page of course U models. text field and I want a slug field here so slug models do slug field so this will then be based on the title um and I want a image field which is this one of course so this can be in here image models. image field um this should be uploaded to a folder called images which is then inside automatically in the media folder I think this is correct I often do a mistake here but we will test it very soon and then yes we don't need anything more here so let's save this now and run the migrations you can see here I can't use the image field because I haven't installed pillow yet so I can do that first bip install pillow so pillow is just a python library for handling images and we can do resizing and similar and then I can say python mag Pi make migrations and python measured by migrate great so if I run the server again now the warning is now gone um before we start adding data we need to create a user sorry super admin so we can log in admin interface python Pi create super user username admin admin at high jango.com and then my password like that so now I can run the server go back to the browser copy this go to slash admin and log in with the user I just created okay so the post model isn't appearing here because we haven't registered it with the admin interface so if I go to blog admin.py I Can Begin by importing the model we just created from Models import post and then just admin. site. register post I refresh now I have it here nice okay so let's add one Post Number One Post Number One choose image let's just take the one from the project and Splash open this is the intro text blah blah blah and then we also have a body like that so let's save this let's create one more number two H number oops number [Music] two and then we can use yeah as you can see here now the image was automatically uploaded and since there was an image with the same name Jango added a unique ID at the end here so that we could have uh multiple images in the same folder so I just want to upload a different picture and then introduction text and the same down here so if I save now we have two posts in the database so let's get them and show them on the front page here instead of this static ones so in core views. P we first need to import the model here as well so from blog. Models import post post equals post.op all and add them to a dictionary here posts posts like that okay so so then it should be okay no errors so I can actually just remove for of these so that we have just one article here now we create a loop for post in posts and bl now we can show the title dynamically so post. title save go back and refresh oops sorry and for of course because I'm ending this so who's number one number two ha I want to switch this since this is a newer post and should be here so in the models here we can say Class Matter ordering equals and then m minus ID so in descending order the ID great okay so let's show the intro correct image and the rest so here we say post inro and then the image post. image. URL I think I need that one refresh yes so now I have that image there and and here you use this one still great so then we just need to fix the read more button so I have to come back to that because I haven't created the detail page yet let's do that now so in the blog app going to view.py begin by importing the model from [Music] Models import post def detail pass in the request parameter but I also want to pass in the slug parameter because here we want make it possible to get blog post based on the slug or the address that we are on so post equals post. ob. get where slug equals slug return render request pass in blog detail. HTML and then post post and save so now the view is more or less okay let's create the URLs file here URL P from Chango do URLs import Po and then we want to import the views from dot import views set up the app name to be blog and then URL patterns and here we expect a slug with the name slug slash so this is what type of parameter we are expecting and then this is the name and this name should be or have to be the same as this one and when this is a match with a view do detail name detail and save so last but not least we just need to import this into the main URLs file so here we can say part and also here when it's empty we want to use the include tag as a blog. URLs great so then we can try to update this one to see if it is working URL blog colon detail and then we just pause in post. Slug and save so refresh there are no errors let's try to click one of these then you can see here that the URL changed to this one and it got into here to the detail view but the template does not exist so let's make a copy of the about page and just save this as detail. HTML but in the correct folder of course blog create new folder templates and then in there blog and then in there the detail. HTML so templates blog detail that's refresh still doesn't work templates is it not in the correct why is that not working pleas plog the D you to stop start the server sometime yes that was working nice so let's replace this static information with the correct one so post. title and then in here post. intro and we can say font Bol and then we show the body at the bottom here post. body nice so now I have all of this information coming from the database from this post here before I continue I just want to say thanks to all of my patrons if you do want to support me you will find a link in the description below so we need to show the image as well on the top so M SRC and then we can uh say uh s uh just copy this like that copy this one and we can also add mt-6 so we have some space up to this one nice so now I have a very simple blog post detail page can see here we still have the about there that also needs to be fixed so can say post. title and refresh so now we have this instead so if I go to the other blog post read more see the number two haha and also down here is the correct information nice so a little problem now is that if you have a screen reader or this image is missing um you can't see what's there so let's just try to fake that for now by just adding a letter at the beginning then you can see this instead what we can do then is add something called alt tag for alternative so here can for example just say post. title or if you want to make this a little bit more advanced for example here you can have a image alt text and then show that instead of the title this is more search engine optimized so if I save now refresh you'll see this text at least so then you maybe get a little bit understanding of what the image was supposed to be plus people with reading disabilities can use the screen reader to get this information read to them so this also needs to be done on the detail page and every time you use image you need to use the alt tag so then I can just remove move this F so it's working again and since we are talking about images a little tip here is to rename the images to good names so for instead of calling the image unsplash you can say um picture of mountains in sunset for example um the positive thing with this is that now Google will uh Index this image name from your page so if people go to Google images and search for picture of mountains they can get up your page as well which will lead to more traffic to your page so that's why it's very important to use good image name as well and not just unsplash download or in 321 and typical default image names so describe what's inside the image another very important thing to think about when it comes to SEO is the number of words per page as you can see here if I just copy all of the text on this page and go to Google and search for word [Music] counter start typing oh oh God so much ads okay so here if I scroll wow this was very shitty let's try this one wordcounter.net okay so you can see here that I have 25 words and that is very little information to make Google understand what your page is about um I would not recommend that you have a page with less than 3 to 500 words on it because that makes it very much easier for Jango to know what you're talking about Plus for example on the about page here I should probably try to mention Jango and learn multiple times so that D Jango knows that this page is about learning Jango but you don't want to use the word Jango or learn too many times because Google might see that as keyword stuffing so you can get p Fin and not indexed at all so you need to find a good balance okay so now we have a little bit of basic SEO let's try to fix the rest of the meta tags so we have metat Texs for adding description to the page this is what uh you often see in search results for example if I search jangle then you can see here this is probably a part of the meta description or if Google finds text on your page which they think is better they will use it but it's always good to set the meta description so if we go back to base. HTML we can add one more block here block meta and block and then on the index page we say block meta and block and then you have a tag called meta named description and then in here for example you can just use a text that you already have on your page or uh a description of your page so it doesn't need to be too long it's just enough to tell J uh sorry Google what this page is about so very short summary so let's have this on the other Pages as well on the about page um this um here you can learn about Jango and similar blah blah blah and also on the detail page for the blog we can have this but here we can actually pass in the intro text into this one so if I save now go back and into the blog here let's go for example into the post number one and if I now open up the view page Source you'll see that you have the meta description there nice so we have a few more of these tags that we like to include every time we build a page so for example we have the keywords and this then keywords that we want to T tell Google we are um having on this page and it it's almost like hashtags so here we can say learn Jango Python and um tutorial so they don't necessarily do anything for the ranking but it's easier for Google at least to understand your page um maybe you want to have a SE thre for the about page so then you just paste it there then say learn Jango about page or whatever at least it's important to have this as well and then to make the page easier or at least better to share in social medias we have a few separate OG tags for that as well so on the detail page I already prepped this so here we have the OG title that is the title which you will show on Facebook and similar when you share this page so the page name should be the post title now we can use the pipe for example and just say hi Chango at the end there and then we want to reference the image and then you need to use the full URL for the image on your page if not Facebook and simar will not find it SL media slash images or you can just copy this and most likely this will be enough and then you need to set a specific width and height for each of the images maybe you have a specific type of image you use or you can use a pillow to find the width and height and set them here dynamically but you need all these three to make it possible to share an image and then they have the full URL to your blog for example domain name.com slth slug but we can make this dynamic as well so post. Slug and the site name which maybe should just be H Jango cod with Stein and then you have the description which will be also inside the sharing card so if I save now go back here and refresh you'll see all of these here so now both Google and also Facebook Twitter and similar will follow these this information okay so now that we have done some very basic on-site SEO we can move along to create a robots file a robot file is a file containing information about which page the Rob robots are allowed to index frle code with stein.com robots.txt you can see here that all user agents are not allowed to Index this they will probably still visit it and similar but this will not show in the search results and similar so here you can add other from login page and similarly you usually don't want to have these inside the search result only uh pages that are relevant to the users so then we need to make a possible to create this file and also uh show it correctly so let's Google how to do this Chango robots.txt file how to add robots yes we can check this one blah blah blah blah blah here we can see a little bit more about what they have done here for example you can set specific for one uh bot not allowed to go to the front page and similar so then we just go to the URLs file and then you can see here we need to import this function so on the url's main file we import from Jango views. generic. base we import called a template view which makes it easy see or possible to show a text file row and then at uh we can set this here on the top for example robots.txt don't think we need anything more now template view. S View and then here we specify what template name to use which is robots.txt and we also need to set the content type here to text/plain I think that is it yes that's everything we need here so now you might wonder where we should put this robots.txt file let's first of all just open it up here you can see here template does not exist so where did Jango try to find this folder um it tried to look in here but that's not where we want it um you can have it multiple places uh some people create a separate templates folder for this but for me I think it's okay to just have it in the core folder so create it here robots.txt then we can copy the content which is just user agent star and which we want to dis allow and the only page that I want to disallow is admin which is the D Jango admin so if I refresh it did not work that might be because I need to specify core robots.txt and there it is so now J uh the user agent Bots know where to go and where not to go then I also need to create something called a Sit map so if I go to cod.com sitemap.xml then you will see a list of pages that are on my page we have the front page we have the contact page about sponsors pricing and then more Dynamic Pages down here so Jango actually has a built-in functionality for generating this so if I just go to Google and say Chango sit Maps then you have something called the sit map framework I think if I go to the settings file settings and in here it's not included default so that's something we need to do so we have under here under installation we can copy this and add it there here at the end and save maybe need to run the migrate not sure your models make migrations migrate okay no I didn't have to do anything there that's okay make sure youve installed the sites framework Miss that's not sure if that's actually necessary let's just go back and try to continue so this is not how I typically do this let's try to go to Soul gadgets because I think I have done it here as well yes have a site maps. pile so we can create that so inside the main folder H Jango we create a new file sit maps. XML sorry this should be a python file py and then we can begin by importing this one from Jango contribs sitemaps import sitemap and a shortcut called reverse which makes it easier to find their URL for a blog post then we can also import the blog model from blog. Models import post and then we can begin with something called the static view sit map this is the front page and the about page which isn't in a database that's why I just call it static View and then the items that we want to have listed out there this is a default function in so we need to use this return create a list and then I think I core index and core colon about save um sorry I also need to include this location so that this functionality can automatically find the correct URL So Def location PA itself since this is a class and then the item and then we use the reverse function for finding the URL okay before I continue with the rest there we can go into URL p and set up everything we need here so as you can see here we can first begin by importing the sit map we just created from. site map which is this file import static view sit map which is this class here and then we need to set up which site Maps we want to use so this is then a dictionary static POS in this one like that and then I think the last step now is to just import this down here oops that did not go as planned there I think it worked okay so let's paste this below there so sitemap.xml then I want to use this uh variable there no that is not correct so it should be S map I need to import this very soon and then I set up the dictionary and include this one and which name to use here so if I now scroll to the top here I guess there is one more function I need to import save so let's try to go here now refresh no errors go to sitemap.xml and you can see here the front page and the about page and then Jango automatically add this for you so if you deploy this to a live server with the real domain name Chango will fix this for you okay so then we can create the Clause post view site map site map def items self and then I just need to check here again so here I just give a list of all of the posts so um return post. objects. all and I do not need this one here at least it doesn't look like I need it so we can save this go back to URLs and import the post view sit map here create one more inside the dictionary post view sit map save go back and refresh there no post okay so as you can see here I don't have a function called get absolute URL and I can create this in the models.py file for the blog def get absolute URL return uh POS the self parameter and just say return self. slug I don't think I need anything more yes you can see here that I'm missing the two slashes so let's create a formatted string like that nice so now we have this as well nice and that that was it for this tutorial now you should have learned how to do basic on-site seos how to set up a robots file how to include or set up a sitemap file and similar next step now is to uh submit this to Google search console and and start doing seos outside of your page for example try to create back links or you can just create landing pages on your page to create more content so that it's even easier for Google to find you I hope you enjoyed this video and that you was able to follow along if you have any questions feel free to leave a comment below and I will answer as soon as I can see you in the next video

Channel: Code With Stein

Views: 3,624

Keywords: code with stein, django, learn django, django tutorial, seo

Id: 5JMhwBTVI4Q

Length: 57min 59sec (3479 seconds)

Published: Wed Nov 08 2023