loading...

Let's talk SEO, 10 tips you should know

yashints profile image Yaser Adel Mehraban Updated on ใƒป8 min read

For most companies, ranking #1 is like a blessing to their business. However, most of the web developers are not aware of what should be done to reach to that point.

In this article we go through 10 simple steps to increase the ranking organically rather than paying search engines to do that for us. So, are you ready ๐Ÿง?

What does HTML tags tell search engines?

Certain HTML tags tell search engines how to read your document properly and index it against specific keywords. In other words, when they crawl web, they will categorise your page with some keywords which then is surfaced when a user searches for them.

Some of these tags also improve how visitors view your content in those search engines. And this is in addition to how social media uses content tags to show your articles like this for example ๐Ÿ‘‡๐Ÿฝ.

So let's see what are these tags.

1. Title tag

Perhaps one the most important tags is title. This is used as a label for your page and defines how search engines like Google and Bing see your page and show it in their search result.

In most cases, this tag reflects the title of the article/page itself. This isnโ€™t exactly a bad practice, but youโ€™ll miss out on a few opportunities to score big in search engines like Google.

The question which comes up is, does it have to be the same as keywords. And the answer is absolutely not. However, it's good to make sure you're not confusing the reader ๐Ÿ˜‰. But this gives opportunity to expand on what your page is relevant to for the search engine. Title should be short anyway, so having different but related tags makes it accessible to a wider range of searches.

A normal title tag is shown below:

<title>Your Title Text for Search Engines</title>

It sounds very simple right? Well as simple as it looks, below are the points you have to consider when writing your title:

  • Use only one title tag
  • Try to create a unique title
  • Don't use your title keywords as your meta tags too (read further on tags)
  • Make it relevant to content
  • It's good to keep it under 60 characters
  • Try to not use stop words
  • Show the branding last
  • Make it readable
  • Use dates, numbers and questions if relevant

Here is an example of one of my articles being the first result on Google ๐Ÿ˜:

Title helping SEO

2. Meta description tags

As I mentioned above, having description tags is really helpful to expose your page to a wider range of searches in addition to title.

<meta name="description" content="Key HTML tags to have better SEO."/>

For example, above is a tag where someone tried to highlight "Key HTML tags" and "better SEO" phrases and also to be displayed in search results.

Note: As of 2019, Google has announced that you shouldn't focus too much on these as they will consider content first.

3. Header tags

You should not underestimate header tags. They are often used to break up the content to make it easier to read. Imagine reading my article in one giant paragraph rather than these nicely separated pieces.

It's been discovered that about %55 of the users will spend 15 seconds at most skimming your text. In terms of SEO, header tags are what most search engines use to help determine segments of content and create featured rich snippets.

These tags are as follows:

  • <h1></h1> โ€“ Usually is used for webpage titles.
  • <h2></h2> โ€“ Highlights the topic of the content following it.
  • <h3></h3> โ€“ Reflects points in regards to the topic.
  • <h4></h4> โ€“ Supports points from <h3>.
  • <h5></h5> โ€“ Not often used, but great for supporting points of <h4>

4. Alt tags for images

This is often the most important part of an image tag not just for SEO but also for accessibility. Unfortunately, search engines cannot determine what images are showing. Thatโ€™s when the alt tag comes handy.

For example:

<img src="cute-puppy.jpg" />

Search engines wouldn't know whether this image is showing a cute puppy or a cat. So adding alt tag would help them understand it and use it for categorisation.

<img src="cute-puppy.jpg" alt="Such a cute puppy"/>

Above tag will correctly help search engines identify what the image is about. This will help to show this image when someone is trying to search for a cute puppy using Google images for example.

5. Hyperlinks

Although it doesn't look like it, hyperlinks are vital, not only to external content, but also to your own content. To give you an example, when I posted my first of series on web performance on Dev community, I had links to other articles on my site. That resulted in a spike of traffic to my site which was basically helping my natural traffic to go up and also help the search engine link these articles together.

Sharing my article with links

In its core, they are like you're voting for other content, so use it in your benefit and make sure the linked content is relevant.

<a href="https://dev.to/yashints/pet-projects-the-secret-to-keep-yourself-updated-51e0">
  My previous post about pet projects
</a>

If for some reason you didn't want the search engine to make a connection with what you're linking to, consider using rel=nofollow. This tells the search engine to not link your current article with the link destination. In other words, you wonโ€™t help improve the domain authority of an external site.

<a href="https://dev.to/yashints/pet-projects-the-secret-to-keep-yourself-updated-51e0"
  rel="nofollow">
  My previous post about pet projects
</a>

6. Open graph tags

These tags are great for showing nicely formatted version of your page on social media. You might have seen it before, but here is how my post appears on LinkedIn ๐Ÿ‘‡๐Ÿฝ:

open graph tags

Here is an example of an open graph tag:

<meta name="og:title" property="og:title" content="The Title of Your Article"/>

Now if this article is shared on something like Facebook, the social site will pull the title directly from this tag. As you saw from the tweet I showed above, open graph supports things like descriptions and images as well. It simply gives you customization options if your webpage is shared on social media.

7. Robots Tag

This tag is useful if you want to prevent your page/article from being indexed. These can stop crawlers from sites like Google or Bing from accessing the content. You might now ask why would you want that?

Some articles might not be the most influencing for rankings. There are veraity of reasons why you might want this, but let's say you have an article which lacks quality and you want to get some user's opinion before it appears on any search engine results.

<meta name="robots" content="noindex, nofollow" />

8. Canonical tags

A canonical tag is great for organizing your content and prioritizing one web page over a duplicate web page. Just to give you an example, I always like to post my posts on my website first before I post it somewhere else.

I do it because of a couple of reasons. The most important one is that the reach might be higher on those platforms like Dev.to. However, I want search engines to know that this post is not a separate one, and in fact it is a copy of what is published on my website first. In other words, it is a way of telling search engines that a specific URL represents the master copy of a page.

Another reason why you should use this tag is that search engines might crawl your website using any of these URL forms:

To a human, all of these URLs represent a single page. To a crawler, though, every single one of these URLs is a unique page. Even in this limited example, we can see there are five copies of the homepage in play. In reality, though, this is just a small sample of the variations you might encounter.

<link rel="canonical" href="http://yashints.dev/index.html?param=value"/>

So by putting above tag on my home page, I can tell search engines that this URL is representing the same and not a separate page.

Here is a good article going more deep into canonical tags.

9. Responsive site meta tags

Let's first go through the fact that more than %80 of traffic in China comes through mobile devices. In Australia this number is %56. These numbers show us how important it is to pay attention to responsive design.

For the same reason it's important to let the search engines know that this site has responsive design available. This will ensure that the page is surfaces if a user is searching through a mobile device.

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

Above tag is the minimum you will need to let search engines know your site is mobile friendly. Itโ€™s important to note that Google puts emphasis on websites that are mobile-friendly. And if you donโ€™t have something readily available that people can view from a hand-held device, it will reflect your rankings in search.

10. Twitter cards

Apart from open graph tags, Twitter has its own tags. Now that tweets can exceed historic 140 characters, these cards are a nice extension that allows your tweets to stand out in the crowd of common text.

Here are a few of them:

Summary

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission"/>
<meta name="twitter:description" content="View the album on Flickr."/>
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg"/>

Example:

Twitter card

Player

<meta name="twitter:card" content="player"/>
<meta name="twitter:title" content="Bison in Yellowstone"/>
<meta name="twitter:site" content="@BrightcoveLearn"/>
<meta name="twitter:description" content="Bison walking in Yellowstone National Park."/>
<meta name="twitter:player" content="https://solutions.brightcove.com/bcls/twittercards/bison.html"/>
<meta name="twitter:player:width" content="360"/>
<meta name="twitter:player:height" content="200"/>
<meta name="twitter:image" content="https://solutions.brightcove.com/bcls/twittercards/bison.jpg"/>

Example:

Twitter player card

For more info on these tags, visit their official documentation.

So no keyword tags?

You might wondering why I didn't mention keyword tags. That's because most search engines like Google use content to categorise the page. So having them doesn't add any value that much and in fact to many of them just adds extra weight to your pages.

Summary

You now know 10 tips to improve your SEO organically and save some money. So head to a bar or coffee shop and spend it responsibly ๐Ÿ˜‰.

Another tip I forgot to mention was around people who use a SPA framework. If you want to have a good SEO for your site, you will need to define some critical paths (i.e. homepage) and create a server side rendered of that page which gets replaced by the normal route on client side. This way crawlers would be able to index your statically generated file while your end users still have the benefit of fast interactions on client side.

Till next post ๐Ÿ‘‹๐Ÿผ.

Posted on Jun 11 '19 by:

yashints profile

Yaser Adel Mehraban

@yashints

An almond croissant addict cleverly disguised as a web developer

Discussion

markdown guide
 

Question: React sites? (or any other js-generated site)

Google "says" there is not a problem but empirically I think it is the opposite.

btw, I should add:

  • Google Webmaster (and Bing Webmaster)
  • Google Analytics.
 

Good question, considering most of these tools work with sitemaps and static HTML files, you should definitely do something. It won't happen for you magically, so SSR, or generating static pages linked to sitemaps are some options there

 

I've done some experiments and monitor it using Google Search Console, and it seems my VueJS based app was crawled correctly by using prerendering and redirecting bots to my static prerendered version of my website. The big advantage is that you have nothing to change for your end-user, disadvantage is that you have to do it :)

 
 

Google says that they could crawl a site exactly like any other browser however it is not true and we have empiric results that it shows the opposite. Google indexes a site with JS but it doesn't works at fullest.

Google could indeed a javascript-generate site but Google said (officially) it takes more works. youtube.com/watch?v=PFwUbgvpdaQ

Also, Google could misunderstand a site, such as a site that it's cheating but Google doesn't tell you about it.

Also, Google recommends using schema/noscript for lazy loading images and it hurts SEO. But Google also says that lazy loading is ok as is, so it is misleading.

So Google is full of half lies, especially since they are shuffling algorithms but they are not telling us about it.

I believe that due to the fact that Google's algorithms are closed, in terms of SEO, we can either rely on own/others' experiments, or on the statements of Google's stuff.

 

There is no problem with well rendered HTML. It doesn't matter the way it is produced mostly. Goo has never read JS well.

If the content is not on the page & obscured by JS (pulled in later/not html etc) then it is not likely to be visible to bots.

Do use GW. Use something else instead of GA (privacy violations, currently being investigated, possible antitrust).

 

GA and GW ... can provide some links bout them? Don't know what those are, never heard of them.

Sorry, Goo Analytics & Webmasters. Short hand.

 

This is a good list Yaser, always detailed & clearly laid out for people to understand.

Most tips are onpage SEO specifically. Some of these are not really SEO, but useful for traffic gen or making a nice site (twitter cards are not SEO).

Let me add a couple of things.

  1. Quality content (this was always Goo & MC's #1 point).
  2. Page count/page indexing rate (number of pages indexed is highly correlated to traffic levels).
  3. Inbound links/ anchor text (outbound links do nothing for SEO on their own).
  4. Performance.
  5. Text must appear on page (they have been back & forth a few times on this since the miserable failure goo bomb).
  6. Content distinction (if most pages are basically too similar).

Matt Mullenweg (WP) stated, a long time ago in a video interview, that one of the best SEO tips for wordpress.com was removing the meta desc. A 30% bump or something. Results vary.

 

Matt Mullenweg (WP) stated, a long time ago in a video interview, that one of the best SEO tips for wordpress.com was removing the meta desc. A 30% bump or something.

That's pretty interesting, any chance you can provide a link (or some keywords I can search) to find that reference?

 

It was a long time ago (many years), I think it was about wp (or wordcamp) & the interviewer asks for one unusual SEO/traffic tip or something.

It came down to "let goo choose some desc keywords from your content" pretty much. Meta desc doesn't do much either way really for 99%. Snippet perhaps, tiny difference.

Looking at wp (org/com) they use them right now. I do too. It's testable.

Not intentionally being vague. If I come across it, I'll drop it here.

 

Awesome list! Was wondering if anyone has come across a good CMS that handles a lot of this for you? Currently I'm thinking about migrating our blog to a CMS and want to make it as easy as possible for editors to write content but automating the SEO pieces of the content.

 

I am using Gatsby for my own blog and most of these are in place by default (the starter I chose), but not sure what you mean by CMS for blog

 

Thinking more for a company blog that would have multiple authors where each author may not have all the SEO knowledge to write in the proper meta data.

That can be achieved using anything, I having some guest posts on my log where the author name is not me, but that just in the frontmatter of the markdown file. Simple as that

 

I generally use Wordpress as it has been very battle tested SEO wise.

The majority of the SEO industry used it, many of the big info-sites now started with it. It has a lot of features (inc plugins/self-code) that help publishing a lot & a bunch of things you can do to get extra results. You can do this with any code/CMS but its been done millions of times already with WP. Handles 100K+ uniques a day np, not many ppl go above that.

 

Hi, just going to complete reading your post, but I have a question I have this clients coming in for me and they are expecting me to know SEO so I'm reading and going through moz.com/beginners-guide-to-seo this,

Please recommend some resources from start that will help me get good at it. I'm a junior developer with work in Node, Express, React, Redux, server side rendering with Next.js (which also mentions the good part of the SEO which I completely don't get so yeah please share some insight to begin from scratch and get good/pro I know its subjective but yeah why not)

 
 

What about JSON-LD? It doesn't work like Open Graph, in fact, it does not help you when you share content through Fb, but I think it does help you with SEO. Why is not in the list? Is it because you wanted to keep it simple with just HTML?

Also, what's the difference between robots.xml file and that robots tag that you mention? Yeah, newbie question xD

 

Yes this was simply using normal HTML tags which is easy to follow, for people who are developing everyday and are not aware of these.

I am not sure what you mean by robots.xml, I know of robots.txt and the difference is that you can control more than one page in the txt file, the tag only applies to current page ๐Ÿ˜Š

 

Nicely written, yaser. I loved especially how you covered some excellent secret and hotcake SEO tips. Also, tip #10 at the end is awesome. :) Special thanks because i got huge ranking benefits after implement all of your tips on my personal hunting blog pickhunting.com

 
 

Great article! I didnโ€™t know about the canonical links. Very cool. Thank you.

 
 

I've built my blog to 60k+ page visits per month, and I didn't focus on any of these tips.

The single most important factor in SEO is to write content that people are searching for.

If you nail that, nothing else really matters all that much.

 
 
 

Yaser Thanks for great tips! I used your tips for my website and got postive results! You are great man!

Regard:
Mushahid Hussain
Website: mushahidhussain.info/

 
 

Go with Custom Coded websites and Apps instead of buying pre designed developed themes to design and develop apps and websites.