loading...
Cover image for πŸ”Ž Top 7 essential SEO optimizations for you to learn in 2019

πŸ”Ž Top 7 essential SEO optimizations for you to learn in 2019

lampewebdev profile image Michael "lampe" Lazarski ・5 min read

For some reason, SEO is something not all web developers focus on. Actually, for a company, SEO can be a significant advantage.

In this article, I go over some easy and quick to implement SEO optimizations. Comment down below if you liked this article and if I should make a series out of this and go deeper into SEO.

πŸ’‘ Make images readable by search engines

Search engines don't know what your image is showing to the user. It is your job to make the search engine understand your image. For this, you need to write a description in the alt attribute. It should be a short description, not longer than 155 characters. Keep in mind that screen readers also use the description. Don't embed other content in the alt attribute and don't use a lot of keywords. Both behaviours can lower your SEO Score.

❌ Some bad examples

<img src="/dog.png">
<img src="/dog.png" alt="">
<img src="/dog.png" alt="dog">
<img src="/dog.png" alt="animal dog ball red">

βœ”Some good examples

<img src="/dog.png" alt="A dog that play with a red ball">
<img src="/billGates.png" alt="Bill Gates, former CEO of Microsoft">
<img src="/123-img.png" alt="Two girls playing on an playground">

πŸ’‘ Use the title tag

This one is important and often not implemented correctly or not implemented at all. Not setting a title will hurt your SEO dramatically. It is used in a lot of places:

  • Search engine results
  • Bookmarks
  • Social Networks
  • Browser Tab Title

How to write a good title for your page?

The optimal length is around 50 to 70 characters. Googles search result page has a fixed with for every result it is 600px. It is best practice that your title should be around 60 characters. It is also important to have a unique name for every page. A good format is:

<head>
    <title>
        Primary Keyword - Secondary Keyword | Brand Name
    </title>
</head>

Don't do too many keywords. Search engines will not display your search result if you have too many keywords in your title. Also, think that the title is for your user/customer. If your title is too much SEO optimized and does not have any vital information in it, then nobody will click on your search result.

Good examples for titles

    <title>
        Best Pizza in Vilnius: 10 Pizzas you must try 
    </title>
    <title>
        Women's Shoes Sale | adidas US
    </title>
    <title>
        Metric – Gold Guns Girls Lyrics | Genius Lyrics
    </title>
    <title>
        JavaScript Tutorial: Learn JavaScript For Free | Codecademy
    </title>

πŸ’‘ Declare the correct language in the HTML tag

Luckily and unluckily most boilerplates and frameworks add the lang attribute to the HTML tag but they usually by default add en as the value to it. This indicates to search engines that the content on your website is in English. In the worst-case google will show your search result to an English speaking audience and people will go back immediately to the results page. This would hurt your SEO score, and you would be downranked. In the worst case, the search engine will not show your result at all. Always set your lang attribute according to the content language.

For English:

<html lang="en">

For German:

<html lang="de">

For Polish

<html lang="pl">

and so on.

πŸ’‘ Use nofollow in anchor tags

Search engines follow every anchor tag on your website. If you have a link to a malicious or spam site, it will also downrank your website. It is good practice to add nofollow to user-generated links and to paid links.

<a href="http://www.unknown.com/" rel="nofollow">Paid or not trusted content</a>

πŸ’‘ Use rel="canonical"

Imagine the following links:

Every URL points to the same content. For you, as a human, it is easy to see that this is the same content, but for search engines, these are 4 completely different links. Search engines can see this as spam or if someone just makes a copy of your content search engines does not know what the original is and what URL it should show to the user. This is why adding rel=" canonical " is essential. It tells the search engine that this link is the master copy of the content and it should index this URL.
To tell the search engine what URL is the master copy you need to put
a link tag into the header. For the example above, it could look like this:

<link rel="canonical" href="https://example.com/one/url">

You need to add this to all the links above. It is okay to add it also to the page with the actual link. This is called a self-referential canonical tag.

πŸ’‘ Add the viewport metatag in the header

This will not impact your SEO score directly, but it will make your website more mobile-friendly. Almost all search engines rank mobile-friendly pages higher than nonoptimized pages. One easy way to make your website responsive is setting the viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1”>

The first part in the content attribute, "width=device-width," is what tells browsers to render the page to fit in the device's screen width. The second part, "initial-scale=1," instructs browsers to make the page as wide as possible when a page is shown in the landscape.

πŸ’‘ Use media queries

In the last years, there was a trend that all search engines will rank websites that show the right content and content that is easy to read on the used device. This means for web developers that having one font-size for all devices will probably be a problem because the font either will be too big or too small on specific devices.
Media queries are the perfect way to achieve this.

  p {
    size: 1rem
  }
@media (max-width:768px) {
  p {
    size: 1.2rem
  }
}

You need to test and have a look at your content. There is no easy way of having good values here. They will depend on the font face and on the content itself.

It would help me if you could do the following for me!
Go to Twitch and leave a follow for me! If just a few people would do that, then this would mean the world to me! ❀❀❀😊

πŸ‘‹Say Hallo! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube

Discussion

pic
Editor guide
Collapse
chrisachard profile image
Chris Achard

Thanks for the tips! It's the first time I think I've seen the:

Primary Keyword - Secondary Keyword | Brand Name

put in those terms - but that totally make sense, thanks. Going to start doing something like that from now on :)

Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

πŸ‘ 😊

Just don't over do it because Google will know and punish you for it πŸ˜‰

Collapse
refiloedig profile image
Refiloe Digoamaye

Alongside the rel=nofollow tag, the rel=noopener tag is something that can also help prevent any malicious acts:

mathiasbynens.github.io/rel-noopener/

Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

Yeah, that's true :)

Maybe I should write a blog post about security with HTML πŸ€”

Collapse
refiloedig profile image
Refiloe Digoamaye

Yeah, that would be dope! One idea you can add to that is SVGs vs PNGs for logos, too. Learnt recently that using SVGs are they are open to security risks due to code being exposed in the HTML.

Thread Thread
lampewebdev profile image
Michael "lampe" Lazarski Author

Hmm okay, I need to research that SVG thing more!

Thanks for the tip!

Collapse
bayuangora profile image
Bayu Angora

What's advantages and disadvantages impact about adding emoticon on title, subtitle, description, or main article?

Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

Good question.

I think right now for search engines there are no implications.

It is more a thing for humans to grab attention.

The only kind of disadvantage I can see is that some people find it not very professional. For me, I would say it depends on the context where you post. Here on dev.to I think it is a good thing. For example on linked in, I would not do it.

Collapse
barman profile image
Bhupati Barman

The good resource you have shared but I think not enough only 7 tips in 2019.

Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

Yes there are more. I have chosen these because they are easy to implement and have a big impact on your search rank score ✌️😊

Collapse
barman profile image
Bhupati Barman

Great!Thanks.

Collapse
donghoon759 profile image
Donghoon Song

So nice tips! If you dont mind, may I translate it into Korean so that others also can read it?

Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

Thank you!

Of course not as long as you link back to the original one :)

Collapse
cyprian_dev profile image
Cyprian

Make a series please sire.

Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

Thanks I will think about it!

Collapse
zenulabidin profile image
Ali Sherief

A very helpful SEO trick I learned myself was to make sure your keywords are written at the beginning of the article, and the lower Google finds the keyword in the article, the less the page rank will be. I learned this while writing my own post with keywords encoding and character sets.

Collapse
austinmallar profile image
Austin Mallar

Good article! Not sure if this is a mistake though?

thepracticaldev.s3.amazonaws.com/i...

Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

Thanks changed it! It should be good!

Collapse
tomcrowedigital profile image
Tom Crowe

Very helpful tips!

Collapse
lampewebdev profile image
Collapse
papaponmx profile image
Jaime Rios

Short and sweet. Great examples.

Thanks for sharing!

Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

Thank you very much appreciated!

Have a great day!

Collapse
javatpoint profile image
JavaTpoint

Thanks for share, Its very helpful for Learn SEO.

Collapse
utkarsh profile image
Utkarsh Talwar

Helpful and very straightforward. Love the content. The examples are especially great.

Collapse
varunra35569603 profile image
Varun Rana

Thanks for share, Its very helpful for Learn SEO.