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 allows for easy crawling and indexing of webpages by search engines and ranks your pages depending on the search queries.
SEO is important because users gets 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 removes 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 pages 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 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
jpegextension for images are more optimized for fast loading webpages compared tojpg.- 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 chances of visibility.
Meta Keywords
This contains unique keywords for a page which 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. This post will also be shared in my Dev.to Blog.
Useful articles
- Top search engines to consider in 2020
Please do add any tips you know in the comment section and feel free to share. : )