Summary (TL;DR): In this article, we will look at some important SEO factors to consider when building a website, for the purpose of increasing visibility on search engines.
SEO is one of the most crucial factors to consider when building or launching a website. Of course, as an individual or business that plans to run a website, you need visibility and traffic to your website to convert sales, get recognition, or make a profit.
A website not correctly optimized for SEO may have trouble ranking on the search engines, which can be problematic when considering website visibility and visitor retention. In other words, SEO is essential because it increases your website’s visibility, resulting in increased traffic and the opportunity to convert visitors into customers.
As a developer, you need to consider some necessary SEO factors when building a website for personal use or for a client.
This article will look at the beginner’s guide to SEO for developers.
Prerequisites:
Basic knowledge of HTML, CSS, and JavaScript
Code Editor
What Is SEO?
SEO stands for “search engine optimization”. It simply means the process or processes of improving certain aspects of a website, for the purpose of increasing its visibility when people search for “things” that relate to your site on search engines such as Google Chrome, Firefox, Bing, and many more.
The main aim is to make your website rank at the top of search engines, increasing monthly site visitors and conversions. The more visible your site is, the more likely it is to gather enough site visitors and potential customers for your business.
Is SEO Still Relevant in 2022?
If you are wondering if “SEO is still relevant in 2022”, the answer is an absolute yes! And there are some reasons for that.
First, through SEO, it is still entirely possible to not only increase a website’s ranking positions for numerous commercially attractive keywords that will direct potential customers to its pages but also to place the majority of websites on at least the first page of Google and even in the top three. In fact, for owners of business websites, SEO is still effective and produces quantifiable, profitable results.
Secondly, the requirements that need to be met before ranking at the top of search engines are continuously changing. For instance, Google always updates its ranking algorithms without sharing much information on the changes made. If everyone had the information on how to rank number one for any given keyword, they will try ranking number one, which will make it difficult to rank web pages in order. This is why it is still necessary to make SEO tweaks to your site, to increase its chances of ranking on search engines.
Because SEO continues to be an effective way to help business websites and their owners achieve better commercial results in 2022, and because there is a need for continual research into what works, it is still an effective digital marketing strategy.
Why Is Learning About SEO Good for Web Developers?
It’s Good for Freelance Developers
It is no myth that freelance developers tend to work alone. With that being said, having fundamental SEO knowledge as a freelance developer is necessary, as it can help improve your chances of landing jobs from clients. This is because many companies or clients will love a web developer with a bonus knowledge of SEO.
It’s Good For Improving Your Resume
Even if you are not a freelance web developer, it is still useful to learn about some SEO factors, which can improve your Resume and make you more valuable to potential employees. With an extra knowledge of SEO, you can become a web developer who is capable of making necessary SEO tweaks when building a large company website.
It Helps To Understand How the Web Works
With an extra knowledge of SEO, you will tend to appreciate the web more, and learn about how the web works. You will become familiar with how search engines work, and their algorithms to rank a website.
Types of SEO
There are two main subcategories of SEO, they are on-page and off-page SEO.
- Off-page SEO: This refers to factors that developers can not make changes to, such as the niche of the website of your client, the outside links pointing to high-quality content, and many more.
- On-page SEO: This is the job of a developer, which significantly affects the rankings of the website on Google and other search engines.
SEO for Developers (On-Page SEO)
In this section, we are going to look at some of the key SEO factors that developers can implement to get higher rankings on Google.
Title Tags
Title tags are important in helping search engines understand what your page is about. They are one of the most important on-page SEO ranking factors, which contain the main keyword(s) that your page is targeting. Title tags should be around 50-60 characters in length.
In the image above, we Googled “Saturday night live”, and you can see “Saturday Night Live – NBC.com” which pops up at the top of the search engine. This is the title of the website. So, the title means that you are choosing what is going to be displayed on the search engine, and this greatly affects the click rate. For example, if the title is too boring or too long, not many people are going to click on it.
In our code editor, let’s see where we can put our title. First, we have to create an HTML file. In our case, we created an HTML file named SEO.html where we edited the code to be like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn SEO - SEO Mastery</title>
</head>
<body>
</body>
</html>
Here, we have a basic title tag, where we put the title of our website. In our case, we put “Learn SEO – SEO Mastery”. When we open this on the browser, we should be able to see this:
The image above shows that our page is completely blank, but if you look at the top left corner, you will see our tile.
Description
The second thing we need to do is the description. As with the title, the description needs to be unique and should contain the primary keyword. They should also be under 150 characters in length, and they should be relevant to the topic of your website. So, let’s see how we can implement the description:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn SEO - SEO Mastery</title>
<meta name="description" content=" The SEO process aims to increase a business's organic search results, driving organic search traffic to the site.">
</head>
<body>
</body>
</html>
In our code above, we first created a self-closing meta tag, then inside, we put our description.
URL
URL explains what the website is about. It needs to be easy to understand and tell search engines and web users what the page is all about. URLs should be under 115 characters, but the shorter the URL, the better for us.
https://johndoesblog.com/blog/111112222222
From the example above, it wouldn’t be nice if every specific blog or article has that type of URL. This isn’t readable to the browser, search engine, or even to web users. It would be better if your URL looked like the example below:
https://johndoesblog.com/blog/dogs
As you can see, the numbers were replaced with something more specific in relation to the website (dogs), making the URL more readable, and increasing the site’s ability to crawl better on search engines.
Other Meta Tags
With the title and description tag, there are other meta tags that are also important.
- Meta Keywords Attribute: These are a series of keywords you deem relevant to the website in question.
- Meta Viewport: Viewport gives the browser instructions on how to control the dimension and scaling of the page.
- Meta Charset: This defines the character set
- Meta Author: This defines the author of a page
These meta tags may not be as important as the title and description, but they are also useful for improving the SEO of the site.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn SEO - SEO Mastery</title>
<meta name="description" content=" The SEO process aims to increase a business's organic search results, driving organic search traffic to the site.">
<meta name="keywords" content="Search Engine Optimization, SEO Optimzation">
<meta name="author" content="John Doe">
</head>
<body>
</body>
</html>
Here, we created our meta keywords which simply help Google and other search engines understand better what the website is all about. We also have our meta viewport which gives the browser a specific page dimension and scaling to control.
We have our meta charset which defines a character set, for instance, we have the UTF-8 charset. Lastly, we have our meta author which is used mostly by content management system (CMS) websites.
Favicon
The main reason a website should have a Favicon icon is to improve the user experience (UX) for visitors. A poor UX could make a visitor or potential customer patronize a competitor, lowering your conversion rate.
It is a lot easier to find the needed bookmark by an image associated with a certain website, rather than looking through different URLs. It improves your visual identity, and brand identity, and simply makes your website easier to find.
For example, you can go into your browser and search “Favicon”, download any Favicon of your choice from any Favicon generator, and move the downloaded Favicon into the project directory. The Favicon file should appear like this in your code editor:
In our code, we made the following changes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn SEO - SEO Mastery</title>
<meta name="description" content=" The SEO process aims to increase a business's organic search results, driving organic search traffic to the site.">
<meta name="keywords" content="Search Engine Optimization, SEO Optimzation">
<meta name="author" content="John Doe">
<link rel="shortcut icon" type="image/ico" href="./favicon.ico"/>
</head>
<body>
</body>
</html>
Here we added a href that links to favicon.ico which should look like this on our browser:
Our Favicon is located in the top left corner of our screen. Although it is small, it shows up even after you save the website for later.
Images
This is a very important aspect of SEO for a website. In regards to SEO, the faster the page loads the better. So, we need to make sure that we do not congest the website with different frameworks, libraries, or jQueries. The same thing goes for pictures or images. In your content, images should be compressed, as they are one of the biggest causes of a slow website. There are many online image compressors that can help us with this.
To get copyright-free images to use for your website, you can use Unsplash, a great website for getting quality copyright-free images. Inside Unsplash, we searched for “dogs”, which gave us the result below:
You can choose and download any dog of your choice, and move it to the project directory. So, in our code editor, we edited the code to be like this:
<body>
<img src="dog.jpg" width="25%"/>
</body>
</html>
This is what it looks like on our browser:
To compress the image and make the size smaller, we uploaded this particular image into our image compressor like this:
Next is to click on download, move the downloaded image into the project directory, then make the following changes to the code:
<body>
<img src="dog.jpg" width="25%"/>
<img src="dog-min.jpg" width="25%"/>
</body>
</html>
We should see this in our browser:
You may not be able to see many differences here, and that is because the compressor we used minifies the image properly without making it lose its quality. If you check the image sizes, however, you will notice that one is larger in size than the other.
Attributes
Alt tags play a very important role in SEO. They help search engines associate images with a webpage’s content so they can properly index it within their search results.
The text of the title attribute is displayed as a tooltip in most – it appears in a small bubble when the cursor hovers over the link. It also serves a significant purpose for SEO.
<body>
<img src="dog-min.jpg" width="25%" alt="Dogs with glasses"/>
</body>
</html>
Here, we added our alt tag to change how the search engine index our images. It is also used for accessibility, for instance, people with poor eyesight can read these texts, so they actually know what the image is about.
Mobile Friendliness
Having a mobile-friendly website is a critical aspect of SEO. Nowadays, most people use a mobile phone to access a website making mobile-friendliness very important for having an online presence. Also, Google has been focused on promoting websites that are mobile-friendly, while sites that aren’t will rank lower on Google searches.
Learn more about how Media Queries can help you with mobile-friendliness.
Minify and Compress
Earlier, we mentioned that the smaller the size, the faster the website will load, and Google is going to rank it better. So, when you minify your website’s CSS, HTML, and JavaScript files, you can save some valuable time off your site’s page load speed.
There are lots of websites online that can minify your code, helping you to remove unwanted spaces from your code.
Keyword Usage
If you are building a website for clients, and they don’t know what to put on the website yet, make sure that keywords appear in a title, meta description, headings, URL, title, and more. For example, if the website is about SEO, we need to use the main keywords (SEO) across all parts of the websites
<body>
<img src="dog-min.jpg" width="25%" alt="Dogs with glasses"/>
<h1>Learn SEO with SEO Mastery</h1>
</body>
</html>
Here we created an H1 tag and included necessary keywords that should be related to our website. This is the result below:
Here, we included as many keywords as possible to promote what the site is mostly about.
Note: The project is just a Demo example, you should use images and keywords that are mostly related to your website.
Conclusion
In this article, we looked at many benefits of SEO for developers, and how the knowledge of SEO can help developers build better ranking sites for clients. We also looked at some important SEO practices, and how they can be implemented when building a project.
