DEV Community

Yaser Adel Mehraban
Yaser Adel Mehraban

Posted on • Updated on

Let's talk SEO, 10 tips you should know

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 👇🏽.

Liquid error: internal

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

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

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

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

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

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

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

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

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

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

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

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

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 👋🏼.

Top comments (38)

Collapse
 
vuild profile image
Vuild

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.

Collapse
 
jerodsanto profile image
Jerod Santo

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?

Collapse
 
vuild profile image
Vuild • Edited

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.

Collapse
 
albertc44 profile image
Al Chen

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.

Collapse
 
yashints profile image
Yaser Adel Mehraban

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

Collapse
 
albertc44 profile image
Al Chen

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.

Thread Thread
 
yashints profile image
Yaser Adel Mehraban

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

Collapse
 
vuild profile image
Vuild

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.

Collapse
 
mushahid_mushii profile image
Mushahid hussain

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/

Collapse
 
yashints profile image
Yaser Adel Mehraban

Glad you found it useful

Collapse
 
jcubic profile image
Jakub T. Jankiewicz

Mouse Scroll Wheel don't work on your website, you need to use scrollbar.

Collapse
 
yashints profile image
Yaser Adel Mehraban

Thanks for the comment Jakob, care to elaborate?

Thread Thread
 
jcubic profile image
Jakub T. Jankiewicz • Edited

It was comment to Mushahid hussain link in his comment, not to your reply and not to your post.

It seems that Dev.to don't show the thread, and you probably seen the comment and notification. Open the whole post and you will see, that this is reply to someone else comment.

Thread Thread
 
yashints profile image
Yaser Adel Mehraban

By my site you mean yashints.dev? What browser are you using as I cannot reproduce this in any browser

Thread Thread
 
jcubic profile image
Jakub T. Jankiewicz

See the full thread, this is not comment to your post, it's about comment from Mushahid hussain and his website mushahidhussain.info.

Thread Thread
 
yashints profile image
Yaser Adel Mehraban

Ah, my bad, I just saw your comment, all good

Collapse
 
oathkeeper profile image
Divyesh Parmar

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)

Collapse
 
yashints profile image
Yaser Adel Mehraban
Collapse
 
oathkeeper profile image
Divyesh Parmar

Thank you :)

Thread Thread
 
yashints profile image
Yaser Adel Mehraban

Your welcome

Collapse
 
yashints profile image
Yaser Adel Mehraban

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

Collapse
 
anwar_nairi profile image
Anwar • Edited

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

Collapse
 
rolandcarroll9 profile image
Roland Carroll

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

Collapse
 
yashints profile image
Yaser Adel Mehraban

Glad to hear that Roland

Collapse
 
lautarolobo profile image
Lautaro Lobo

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

Collapse
 
yashints profile image
Yaser Adel Mehraban

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 😊

 
scorp13 profile image
scorp13

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.

Collapse
 
scorp13 profile image
scorp13

JavaScript: SEO Mythbusting from Google Webmasters channel.

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Eh nice, more completed!

Collapse
 
yashints profile image
Yaser Adel Mehraban

Thanks

Collapse
 
vuild profile image
Vuild • Edited

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

Collapse
 
lautarolobo profile image
Lautaro Lobo

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

Thread Thread
 
vuild profile image
Vuild

Sorry, Goo Analytics & Webmasters. Short hand.

Collapse
 
michaelthiessen profile image
Michael Thiessen

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.

Collapse
 
dechamp profile image
DeChamp

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

Collapse
 
yashints profile image
Yaser Adel Mehraban

Your welcome, glad it's useful

Collapse
 
maheshkale profile image
Mahesh K

Great article!