The Importance of SEO to Developers
Tags: career, codenewbie, html, css
Published: 2022-06-19 05:39:32

## What's beyond the first search page? 

Have you ever searched something on google and gotten to the tenth page before finding what you needed? No? Maybe the fifth? Or the third? I wouldn't be surprised if most of the time you find what you are looking for right on the first search page. According to a 2014 study conducted by Moz, an SEO and data management software site, 71.33 percent of Google search traffic never goes beyond the first page of results, with the number rising to 92 percent in recent years. Second-page results are a distant second, accounting for only around 6% of all website clicks. 

---


### What is SEO?

SEO is the abbreviation for "search engine optimization." In layman's terms, it's the process of refining your website to make it more visible when people look for products or services relevant to your business.

An SEO-friendly site, at its most basic level, allows a search engine to browse and read pages throughout the site. The first step to guarantee your exposure in search engine result pages is to ensure that a search engine can simply crawl and understand your material. We can do that by customizing our HTML and CSS.  

In every web developer's journey, they will come across some HTML and CSS. It's vital for developers to have some basic knowledge of it when building a website from the ground up. Knowing HTML tags and CSS properties is one thing but knowing how to use them to build more traffic to your site is another. 

Here are different ways to utilize HTML:  
#### <title>Title Tag</title>
```
<title>Title Tag</title>
```
The most essential HTML signal that search engines use to identify what a site is about is the title. It's critical that your titles are distinctive and descriptive in order for users and search engines to understand what your pages are about. In most cases, the clickable link in a search result is the title tag. Search engines will only display the first 50-60 characters of your title, so keep it brief, but avoid one- or two-word titles. It should also accurately represent the content of your page and include the keywords you want to rank for.

---

#### <a href="https://dev.to/bchau1242">Anchor Tag</a>
```
<a href="http://www.example.com">Anchor Tag Text</a>
```

Internal links should be prioritized while developing a website to help search engines understand the site structure and to make the browsing process easier for users. Search engines will have trouble crawling and indexing web pages that are not linked to one another, and the web pages will not display on the search engine results page.

---

####  <header><h3>Heading Tag</h3></header>
```
<header><h1>Heading Tag</h1></header>
```
Headings are a means to structure and define key sections of your content in a hierarchical manner. A headline is often seen at the top of a page. The content on this page is divided into several sections by a headline and many subheadings. H2 tags, the next "level" down from H1 tags, are being used for those sub-headings. Clear, meaningful headers help search engines understand pages and make your content more user-friendly. 

---


Meta Description Tag

```
<head>
<meta name="description" content="This is an example of a
meta description. This will often show up in search results.">
</head>
```
 
The meta description tag is typically inside the head tag, not to be confused with the header tag that we previously explored. It is an HTML element that allows you to specify how your web pages should be represented in search results. In the search results, descriptions will display below the headlines. It's more of a "success" factor than a ranking factor. A well-written description can persuade consumers to choose your site over others on the search page.
 

---

#### <img src="http://www.easytolearning.com/webroot/ck_files/files/html-image-tag.png" alt="Image Tag">
```
<img src="http://www.ExampleImageTagAddress.com/image-tag.png" alt="Image Tag">
```

Alt text (alternative text) is used in HTML code to explain in text, the appearance and purpose of an image on a website. It is sometimes known as "alt attributes," "alt descriptions," or "alt tags." In the event that an image fails to load on a user's screen, the alt text will appear in its place. Although it is not necessary for terms of being indexed and ranked, it can help visually impaired users who are using screen readers. An alt attribute will be read aloud to them to help them interpret an on-page image. 

---
CSS: 

Having a responsive website is a requirement in today's world of the web. With smartphone users increasing rapidly, developers must create a website that is suitable for mobile phones, as well as desktops, tablets, and other devices. Search engines favor mobile-friendly websites since they match SEO standards.  

#### Media Query
<img src="https://www.seobility.net/en/wiki/images/6/6f/Media-Queries.png">

Depending on a specified set of conditions regarding the user's device, browser, or system settings, media queries can change the appearance (and possibly functionality) of a website or app. 
 

---

Freelance web developers are often web designers and web developers. So it is necessary for them to have knowledge of SEO. It can look good when advertising yourself to have both skills. 

If you are not a freelancer or have not decided to become one, it can still be a very important skill to learn. Any small company or business would be pleased to work with someone who does both SEO and web development.   

Web developers, especially those who are new to the field, must understand the significance of SEO in web development. It can enhance your résumé and give you more job opportunities.