Michael "lampe" Lazarski

Posted on Sep 1, 2019

🔎 Top 7 essential SEO optimizations for you to learn in 2019

#webdev #seo #beginners #tutorial

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! ❤❤❤😊

Top comments (24)

Chris Achard • Sep 1 '19

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 :)

Michael "lampe" Lazarski • Sep 2 '19

👍 😊

Just don't over do it because Google will know and punish you for it 😉

Refiloe Digoamaye • Sep 2 '19

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

mathiasbynens.github.io/rel-noopener/

Michael "lampe" Lazarski • Sep 3 '19

Yeah, that's true :)

Maybe I should write a blog post about security with HTML 🤔

Refiloe Digoamaye • Sep 4 '19

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.

Michael "lampe" Lazarski • Sep 6 '19

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

Thanks for the tip!

Ali Sherief • Dec 17 '19

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.

Bayu Angora • Sep 2 '19

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

Michael "lampe" Lazarski • Sep 2 '19

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.