TheLazy.Dev
Portfolio GitHub

Blog

webdev |seo |beginners |tutorial

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

lampewebdev

Michael "lampe" Lazarski

Posted on September 1, 2019

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

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">
Enter fullscreen mode Exit fullscreen mode

✔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">
Enter fullscreen mode Exit fullscreen mode

💡 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
    <title>
        Women's Shoes Sale | adidas US
    </title>
Enter fullscreen mode Exit fullscreen mode 
    <title>
        Metric – Gold Guns Girls Lyrics | Genius Lyrics
    </title>
Enter fullscreen mode Exit fullscreen mode 
    <title>
        JavaScript Tutorial: Learn JavaScript For Free | Codecademy
    </title>
Enter fullscreen mode Exit fullscreen mode

💡 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">
Enter fullscreen mode Exit fullscreen mode

For German:

<html lang="de">
Enter fullscreen mode Exit fullscreen mode

For Polish

<html lang="pl">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

💡 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">
Enter fullscreen mode Exit fullscreen mode

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”>
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
lampewebdev
Michael "lampe" Lazarski

Posted on September 1, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Quickly index these web pages with IndexNow
webdev Quickly index these web pages with IndexNow

September 19, 2024

Unlocking the Power of SEO: A Comprehensive Guide to Optimizing Your Website
webdev Unlocking the Power of SEO: A Comprehensive Guide to Optimizing Your Website

August 10, 2024

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

September 1, 2019