BASIC SEO - Part 2 of Frontend Development Series

This post was first shared on my blog @ Dillion Megida - Hashnode blog

Basic SEO (Search Engine Optimization) is the second part of the frontend development series. You can read about the first part which is SEMANTIC HTML -Part 1 of Frontend Development Series

You must have come across the acronym, SEO, as a beginner or a professional and also, you must have heard how vital it is during web development.

What is SEO?

SEO is a procedure (or set of procedures) taken to give exposure to your website on a non-paid search engine result. It also aims at increasing traffic.
Good SEO practices allow for easy crawling and indexing of webpages by search engines and rank your pages depending on the search queries.

SEO is important because users get access to your pages before other alternatives and it generates lot of traffic. Paid advertisements (such as facebook ads) also help generates traffic but majority of traffic nowadays are aided by search engines.

Poor SEO practices either remove your pages from being indexed or ranks them very low in search results. Traffic here is also low as only few users might take the time to scroll down top results just to see what you have to offer.

How Do Search Engines Work?

- Crawling

They surf (or crawl through) the internet, looking for contents or code for any URL they come across. These URLs can even be links on a page to another page.

- Indexing

The contents are then stored and organized such that the pages containing the contents are then ready to be displayed when search queries are available.

- Ranking

At this stage, organized contents are then ordered (or ranked) from most relevant to least relevant based on search queries.

For an in-depth explanation of these processes, click here

Factors To Consider For Good SEO

Title Tags

This tag for a page briefly describes what the page is about. Such tags should be unique for every page. When these tags are appropriately used, they increase your pages' chances of visibility and ranking for search queries.
For instance, if your page is about graphics design, your brand is TheGfx Brand and you would want to be rank as (at least) one of the top results, your title tag may look like this,

Graphics Designing and Illustration | TheGfx Brand

Meta descriptions

These, though are not so much important in ranking but are very important in getting users to click through your page being one of the search results. The title is a very short summary, but this description (though not still very long) is a more described summary of what that page contains. These descriptions should also contain unique keywords for that page.

When your page finally makes it to the top search results, the description attached to the page would be your next hope of getting a user to click through it.
For your TheGfx Brand, a meta description (for say, the homepage) could be,

TheGfx Brand deals in Graphics Designing and Illustration, giving unique identity to your brand and ensuring attracting visuals for your market

Header Tags

As I explained in the Part 1: SEMANTIC HTML... of this series, Semantic HTML such as <h1> - <h6> tags gives meaning to your page and also increases rate of visibility.

For instance, the <h1> tag - this is much likely to be the subject of your web page. It should also contain unique keywords for that page. <h2> and the other header tags can then be used for other sections of your page.

Image ALT tags

<img src='...path/logomockup.jpeg' alt='A mockup of brand logo' />

Helpful notes

• The jpeg extension for images are more optimized for fast loading webpages compared to jpg.
• The backslash (... />) which though can be ignored will not affect your HTML, but XML (which you may later want to operate with) will require this. IMO, I'd advice to stick to the backslash.

alt tags are not only good for search engines but also helpful in accessibility (which we will cover in another part of this series). They help describe the image they are attached to. When keywords are also used here, they increase the chances of visibility.

Meta Keywords

This contains unique keywords for a page that can rank your page as top depending on search queries.

For your TheGfx Brand, your keywords could be something like,

branding, graphics, design, designing, graphics designing, illustration

Do not mention many keywords as search engines could be wise enough to know what you are up to and rule you out of the results : ( ...lol

Only use unique keywords that best describe your page.

That's it for this part. Watch out for more upcoming sections.

Useful articles

- Beginners guide to seo
- SEO Best Practices

Please do add any tips you know in the comment section and feel free to share.
: )