How to Create SEO Optimized Web Design

SEO Optimized Web Design

To run a successful online business every website need traffic and everybody knows that there is no other better source for traffic than a search engine i.e. Google. How about it, if you can ensure a higher ranking on Google than your competitor by tweaking some of your HTML codes of the page?

Good, right.

Here I am going to discuss how you can optimize your site design to perform better in search engine result pages.

To rank for a site on search engine you have to create a design that appeals to users as well as search engines. Yes, search engine like Google gives preferences to user experience first and also ensures that its web crawler gets a better idea about the page.

In order to satisfy both the user and the bots or crawler, you have to know the proper use of few HTML tags and optimize them.

Title Tag

Page title is the first thing which users will notice on search engine result pages (SERPs). This can be defined within title tag. Title tag is also one of the major ranking factor in Google. You can use your main keyword for the page at the front of the title, to get benefit in ranking.

<title>Title goes here</title>

Google shows title as many characters as fit into 512 pixel display or shows 50-60 characters in their SERPs. This title tag also shows in full length in top of the browser’s tabs.

Meta Description

Meta description is one of the meta tags which gives more in-depth knowledge about a page on search results after title. This is another ranking factor on Google for keywords. It is also used by the social networks if no description has been added for their platform, I will discuss it in detail later in this article.

<meta name=”description” content=”Meta description content will be here.”>

Google shows approximately 155 characters of this in their result pages and it would give you a benefit in ranking if you use your keyword directly or semantically (Yes, google also gives priority to semantic keywords). You should use this as an advertisement which will encourage users to click and get into your page.

Alt tags

Use of images make a site exciting but search engine bots can only understand texts. So how we can make it appealing to users as well as web crawlers. Here comes a HTML tag called alt tag which comes with img tag. You can specify which is present in the picture or describe about it in alt tags. Also you can specify the main keyword for the page to its images alt tag.

<img src=”path-to-image-file” alt=”specify the tag content” />

Another way to make it more appealing to Google and get benefitted from Google image search is, you can specify image file name as it describes. That means instead using general names for images like “image1.jpg”, you can use something like “sleeping-cat.jpg”. This will give you a better exposer on image search and it can grab you more organic traffic.


As we all know content is the king in terms of overall ranking for your site. You have to be good at writing compelling content, which makes user to stay on your page longer and browse more. But with the quality of your content you should also remember to optimize it for keywords. 2% Keyword density for the content along with semantic keywords will help to rank better and also remember to add the keyword within top 100 words of the content.

Other Tags

Meta Robots

The meta robots tag is used to control the search engine ability to index the page. By using this tag we instruct bots whether we want it to be indexed by google or not. By default crawlers index a page to its database if we don’t use the tag.

<meta name=”robots” content=”noindex, nofollow”>

Index/noindex instruct crawler whether the page should be crawled or not. If you use noindex then the page will not be indexed by the crawler of the search engine. By default, crawler assume that they can crawl all pages, so there is no need to use “index” value.

Follow/nofollow tells search engines whether links on the page should be crawled. If you set the value to “nofollow”, then engines will disregard the links on the page for discovery, ranking purposes. By default, all pages are assumed to have the “follow” attribute.

Canonical Tag

Canonicalization happens when two or more duplicate versions of a webpage appear on different URLs. This is very common with new content management systems. For example, you might offer a regular version of a page and print-optimized version. Duplicate content can even appear on multiple websites. Search engines take this duplicate content scenario as a negative for a website. They penalize one link in order to remove the confusion for the users and provide better unique result to them.

To reduce the chances of penalization by Google you can use canonicalization tag to let it know which one is original.

<link rel=”canonical” href=”original content URL” />

This tag tells search engine that this page needs to be treated as a copy the URL provided in this tag and you are giving all the credits for the content to the original link.

Internal Links

You may have already know about the importance of links in SEO and links can be categorized as internal and external links. Where getting more number of external links is time consuming and needs much effort, but internal links are within our hands. We can add links of other pages to the content of each page in order to make a strong network of links within your site. But remember we cannot just add all links randomly to each page. We should link other page in our content as a reference or to provide better understanding of a particular topic. By this Google will know the importance of those pages for that particular topic and it will become another factor to rank high.

Social Network Optimized

This has no direct effect on search engine ranking, but by optimizing your page for social sites you can attract more visitors to your site by sharing the URL of it. And when users visit your page and stay long there to read your article, it gives a positive feedback to Google that the content of the page is something that visitors finds interesting and eventually that affects in good way in ranking.

To optimize a page for social networks there is 2 standards which is applicable on all major social sites. Open Graph is the standard which is accepted by all major platforms except twitter, like facebook, Google+ etc. For twitter there is twitter cards which we need to implement to optimize it properly. Open graph and twitter cards use meta tags to get the information related to the page.

<!-- Open Graph Code -->
<meta property=”og:title” content=”Title content will be here.” />
<meta property=”og:description” content=”Description content will be here.” />
<meta property=”og:image” content=”url of the image” />
<!-- Twitter Card Code -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content=" Title content will be here." />
<meta name="twitter: description " content=" Description content will be here." />
<meta name="twitter:image" content=" url of the image " />

If you use these tags properly then there will be an advantage of your page in SERPs to rank better than your competitor who have not focused on these topics yet.

Do you want to add more points here which I have missed? Then comment them below.

Leave a Reply

Your email address will not be published. Required fields are marked *