What is On-page Optimization
On page optimization refers to all measures taken by SEOs within the website to improve the ranking of a site in search engine result pages. These measures are related to content and HTML source code of a page, e.g. meta tags, keyword placement and keyword density, etc.
Page Title:
Page title refers to the title tag displayed on the title bar of your browser window. It is a part of meta tags in the HTML inside the ?head? area. The page title tells users and search engines about the type and nature of the information available on your page.
Some important instructions to write optimized title tags are listed below:
Length: It should be a maximum of 60 characters long, i.e. Google usually displays the first 50 to 60 characters of a title tag.
Keyword placement: Place the targeted keyword at the start of your title and keep the least important words at the end.
Keyword separation: Use vertical lines or pipes to separate targeted keywords and phrases, i.e. avoid the use of commas, underscores, dashes, etc.
Don't repeat title tags: Write different titles for different pages, i.e. don't place the same title on multiple pages.
Simple: Your targeted keyword or phrases should be simple and short, i.e. avoid the worlds such as if, and, then, but, etc.
Website or company name: Don't use website or company name in the title tag unless it is very popular or part of your important keywords.
Meta Title Tag: Syntax
<!DOCTYPE html>
<html>
<head>
<title> Web Page Title Example </title>
</head>
<body>
<p>Welcome to my first web page.</p>
</body>
</html>
Meta Description:
Meta description is a short paragraph which is placed in the HTML of a webpage. It is a kind of advertising copy that briefly describes the content of your page. Meta description appears under the URL of your page in search engine result pages. It is also known as a snippet.
The meta description is an important part of search marketing, i.e. a relevant and compelling description draws users from search engine result pages to your website which improves the click through rate for that webpage.
Some instructions to write optimized title tags are listed below:
Keywords: Incorporate the most important keywords in your meta description.
Readability: It should be simple and relevant, i.e. it should read like a human-written sentence and keyword stuffing should be avoided.
Compelling: It should be as compelling as possible, i.e. it should clearly describe the content of the page.
Length: It should be up to 135 to 160 characters long else search engine will truncate it, so keep the important keywords in the first or second line of the description.
Don't repeat: Write different meta descriptions for different pages else search engine may penalize you for repeating the same description on different pages.
Meta Description: Syntax
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> Web Page Title Example </title>
<meta name = "description" content="this is meta description example upto 155 characters">
</head>
<body>
<p>Welcome to my first web page.</p>
</body>
</html>
Meta Keywords:
It refers to a brief list of most important keywords and phrases of your webpage. They are not visible to the users like your meta titles and meta descriptions.
Meta keywords are placed in the HTML code of the webpage. They tell search engines which keywords your page is optimized for.
To write meta keywords scan the copy on your page and make a list of important words or phrases then shortlist ten to fifteen keywords which you think accurately describe the content of your page.
Some instructions to write optimized meta keywords are listed below:
Use a maximum of ten to fifteen meta keywords for a single page.
Use a comma to separate the meta keywords and don't leave space between them.
Don't repeat any meta keyword or phrase.
Incorporate most important words at the beginning of your meta keyword list.
They should be specific and relevant to the page, i.e. they should accurately reflect what you are talking about on the page.
Meta Keywords : Syntax
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>First web page.</title>
<meta name = "description" content=" this is meta description example upto 155 characters">
<meta name = "keywords" content="keyword1, keyword2, keyword3, .....keywordN" >
</head>
<body>
<p>Welcome to my first web page.</p>
</body>
</html>
Headings:
Heading tags refer to the headings of the different paragraphs or sections of a page. A heading differentiates a particular section or paragraph from rest of the page and makes it more readable and organized. There can be a maximum of six heading tags which ranges from H1 to H6 and forms a top-down hierarchy, i.e. HI is at the top or more important and H6 is at the bottom or least important.
The headings should be used in order from top to down. You cannot skip any of the heading tags in between the sequence otherwise it will break the heading structure which is not recommended for on-page SEO, i.e. H1 tag should be followed by H2 tag not by H3 or any other heading tag.
Some important instructions to optimize the headings
Never miss the H1 tag on a page as the search spiders tend to look for h1 tags to get the idea about the content of the page.
Don't overuse H1 tag, i.e. it should be only one for each page.
Use targeted keywords or phrases in the headings; avoid words that are not relevant to the page.
Use targeted keywords in the beginning of the headings.
The headings should be followed by a body of relevant content.
Maintain the order of heading tags; H1 should come first in the page then H2, H3 and so on.
SEO Optimized Domain Name
Some important instructions to optimize domain names:
1) Choose a .com extension: Most of the SEO experts believe .com is the best choice to end a domain name, i.e. users are more familiar with .com extension and most of the renowned websites also have a .com extension.
2) Choose suitable words: A domain name can be based on brand or keywords. If your brand is unique and popular you can incorporate it in the domain otherwise incorporate your targeted keywords that reflect your business.
3) Length: Shorter is better in Domain names as shorter URLs are easier to remember and there are fewer chances of spelling mistakes when they are entered in a browser window. The users also prefer to click shorter URL links on search engine result pages than the longer URL links.
4) Be relevant: Choose the right words that effectively communicate your message. The users must know from your domain name what kind of products or services you are dealing with.
5) Easy to spell or pronounce: It should be easy to spell and pronounce, so avoid hyphens, intentional misspellings or misspelled words.
6) Be unique: A unique name enables you stand out from the crowd, so try to create unique and distinctive domain names, e.g. google.com, facebook.com, yahoo.com, etc.
Canonical Tag
Canonical Tag is an HTML element that is used to prevent duplicate content issues. It specifies the canonical URL "the preferred version" of a web page and tells search engines that the other similar URLs are not different or duplicates; they are one and the same. See the following example of product page duplication of an e-commerce company;
So, if your site displays the same content on multiple URLs, then by using canonical tag you can select the one URL as canonical version and can clear that other URLs are not the duplicates. See one more example given below:
http://www.example.com/ ( the main page)
http:/example.com/
http://example.com/index.html
How to apply a canonical tag?
You can apply this tag by adding a link tag to the head of the HTML code of the page that you want to be recognized as canonical by the search engine, e.g. to designate www.javatpint.com with the canonical tag, the code will look like as shown below;
<link rel="canonical" href="http://www.javatpoint.com/seo-canonical-tag" />
How canonical tag helps improve SEO of a site
It is very helpful in cases when you have multiple similar versions of a page or your content is accessible through multiple URLs. It enables you choose one version as canonical URL; you can create canonical URL for each set of similar URLs. After your canonical tag is ready, the search engine will consider all the links to similar versions as links to the canonical version that helps improve SEO of your site.
Meta Tags
Meta tags are the HTML tags which provide information about the content of a webpage. They tell what the page is about, who has created the page, when it is updated, keywords used to represent the page,etc. This information helps search engines index the webpage so that users looking for that or similar information could find it.
Meta tags are placed inside the head of HTML, i.e. <head>meta tags</head>. Users browsing your site cannot see them but the search engine can see them to get a brief idea about your keywords and to know what your site is about.
There are three types of meta tags
Title tag: It is the title text which appears in search engine listings on the title bar of the browser window.
Meta description tag: It is the brief summary of the content of your page. It appears below the URL of your page in search engine listings.
Meta keywords tag: It is the place where you put all of your important keywords and phrases that describe the content of your page.
Miscellaneous Meta Tags
Apart from title, description and meta keywords meta tags there are various other miscellaneous meta tags that provide specific information to the web spider. These tags are also incorporated within the head section of a code. Some of these tags are as follow:
Author Meta Tag
<meta name= "author" content=" www.javatpoint.com">
This tag is used to display the author of the page.
Content-Language Meta Tag
<meta name= "content-language" content="english">
This tag is used to classify the language in which the content is written. You can skip this tag if you have already classified the language in the HTML tag, e.g. <html lang= "en">. It helps spider identify the language of the page and offer results to users in their own language.
Audience Meta Tag
<meta name="audience" content="all">
The above meta tag helps control the age of viewers; it is used with parental control software and robots. It is suitable for the pages which are created only for adults.
Generator Meta Tag
<meta name="generator" content=" Microsoft FrontPage 4.0"></h3>
This tag tells the name and version of the publishing tool used to generate the page.
Revisit-after Meta Tag
<meta name= "revisit-after" content=" 14 days">
This tag is used to tell web robots how frequently a webpage should be indexed. You can also use Robots.txt file instead of this tag to give the same instruction to the web robots.
Distribution Meta Tag
<meta name="distribution" content="global">
This meta tag is used when you are seeking an international audience or want to reach the local audience. The above tag instructs the search robot to make the page available across the world to all users searching information using keywords related to the keywords of the page.
<meta name=" distribution" content="New Delhi, NCR, North India">
In a similar way, the above tag is used to specify a particular location, i.e. a city in North India. It tells search engine robot to display you webpage for the users of a particular region. You can also mention multiple regions separated by commas.
Publisher Meta Tag
<meta name="publisher" content="javatpoint">
This tag is used to display the publisher of the web. It offers an opportunity for branding as you can add the name of your program, company or your design studio within the tag.
Copyright Meta tag
<<meta name="copyright" content="Copyright 2008">
This tag is used to specify a copyright or patent; your intellectual property.
Expires Meta Tag
<meta http-equiv="expires" CONTENT="Mon,24May2006 06:25:46 GMT">
This tag helps you declare after what date and time the page should be considered expired. The above tag is saying that the content will expire on 24 May, 2006 at 06:25:46 GMT.
Designer Meta Tag
<meta name="Designer" content="Art Vandaley">
This tag tells about the designer of the website.
Abstract Meta Tag
<meta name="Abstract" contetnt="short description of page">
This tag is used to provide a short summary of the description. It is mainly used with academic papers. It generally has 10 or fewer words.
Content Script Type Meta Tag
<meta http-equiv="Content-Script-Type" content="text/javascript">
This tag is used to provide information about the scripting language of the document.
Pragma No-Cache Meta Tag
<meta http-equiv="Pragma" content="no-cache">
This tag prevents users from seeing the cached version of your page. It instructs the browser to pull information from the server after a page is viewed. It is used to help the users; if a site changes frequently then this tag ensures that the users see the latest version of your page.
View Port Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1">
This tag is used to set the viewport width and initial-scale on mobile devices so that rendering of non-responsive designs on mobile devices could be improved.
Open Graph Meta Tags
Open Graph was introduced by Facebook in 2010. It was designed to integrate facebook with other websites. It helped sites to become rich object in social graph, i.e. It allowed webpages to have the same functionality as other objects have on the facebook.
There are various Open Graph meta tags that help you control your pages on facebook. They have different meaning and provide different information to facebook so that you page could be displayed accurately on the social media.
These tags do not directly affect on-page SEO, but they are definitely directly linked with the performance of your links on social media.
OPEN GRAPH Meta Tags types with description:
1) <meta property="og:type" content="article"/>
This tag is used to show the type of object you are incorporating into the social graph like facebook.com.
2) <meta property="og:url" content="http://www.example.com"/>
This tag is used to set the canonical URL for the page you are sharing with social media, i.e. incorporating a web page into the facebook, twitter, etc. Once the web page is incorporated it behaves like a social graph (facebook) page and enjoys the same functionality of other social graph pages. Its use is recommended when you have more than one URL for the same content.
3) <meta property="og:title" content="your title"/>
This tag is used to show the title of your content. You can use this as a headline to appeal the facebook users. You can also use a different title here as long as it reflects the same message. It is suggested to keep the length of title between 60?90 characters as if it exceeds 100 characters the facebook will truncate it.
4) <meta property="og:description" content="your descriptive copy"/>
This tag is similar to the meta description tag in HTML. It is also used to describe your content. It is displayed below the link title on facebook, so make it compelling so that more people click on it. It is best to keep it around 200 characters long.
5) <meta property="og:image" content= http://www.example.com/image-name.jpg>
This tag is used to specify the image that you want in the screenshot of your content in the facebook. Choose a square image for best visibility in users' timelines.
6) <meta property="fb:admins" content="USER_ID"/>
This tag helps you add admin id. Multiple admin ids can be added by using separate tag for each admin ID.
7) <meta property="og:site_name" content=www.example.com>
This tag is used to display the name of your website.
Images and Alt Text:
Alternate text or Alt text is a feature added to an image tag in HTML. It appears in a blank image box when the image cannot be displayed for some reason like slow connection, broken URL or user is using a screen reader.
Alt text is designed to optimize images for speed and SEO. It helps search engines know what an image is about as they cannot see or interpret images.
Image Alt Tag Example :
<!DOCTYPE>
<html>
<body>
<img src="seo/images/images-and-alt-text1.png" alt="SEO Images and alt text 1"/>
</body>
</html>
Some benefits of putting Alt Text are given below
1) If an image fails to load or does not render on a page due to any reason then alt tag will appear to tell what the image is about. It helps users understand what kind of image was there.
2) The search engines are designed to understand text on pages, not for the images. So, if your image is accompanied with alt tag the search engine will know from the alt tag what the image is showing and it will provide right images to the users.
3) You can include your main keywords in the alt tag if they are related to the image. It will improve your image search ranking for that keyword.
4) Alt tags are very helpful for visually impaired as they mostly use screen readers to browse webpages. Alt tag helps screen readers to identify and interpret what is being displayed in the empty box on the screen.
Internal link Building
A text link from one page to another page on the same domain is known as an internal link and creating such links is called internal link building. It is an important SEO technique that enables you to link a new post to another old or popular post to increase the traffic to the new post as well as to provide users more relevant content.
Some key benefits of internal link building are:
1) User-friendly navigation: It helps improve navigation; when you are reading a page you can also access other similar pages through text links.
2) Help provide relevant data: It enables you tell users and search engines that there is more or additional information on other pages of the site about the text they are reading. Thus, you can make sure that your users do not miss any relevant information.
3) Decreases bounce rate: By using text links you can /engage users for a longer duration on your site; the user would like to read other related posts or content on other pages using links.
4) Helps utilize link juice for other pages: It helps you connect your pages with higher page rank or authority to a relevant content on another page which is low in ranking or not so popular. Thus, you can pass link juice from one page to other pages so that they could perform better.
Site Map
It refers to the map of your site which shows the detailed structure of your site like its different sections and the links which connect them. The role of site map is to help users and search engines find information on your site.
A site map can be a static HTML file or an XML file. Sitemaps based on HTML file are traditional sitemaps. They were designed to outline the first and second level structure of a site so that users can easily find information on the site. These are mainly concerned with users.
On the other hand, XML sitemap is primarily designed for the search engines. It includes all the activities of a site like along with the main URL it contains all other URLs with their meta data. It also tells how important a URL is, when it was last updated, its relation with the site, etc.
Hidden Text
Hidden text is the textual content that search engines can read but your visitors cannot read or see. It is also called Invisible or fake text.
Using such text can improve ranking of a page but this technique is against the guidelines of search engines and is considered a black hat SEO technique.
All major search engines treat hidden text as search spam. They can easily detect their presence and may ban your site temporarily or permanently.
Web Hosting
Web hosting refers to a service provided by the web host to websites to make them available for the users on the internet. It gives you space on its server that allows you to post your website on the internet. Without a web host or web hosting your site can not be viewed by the users, so after making a site you will need a web hosting service.
The web host stores your website or webpages in high-powered computers which are known as Servers. When the users type your URL the internet transfers your website files from the web server to their computers.
Thus, Server and Hosting check is an important on-page optimization factor and you need to be very careful while choosing a web-hosting company.
A right hosting company doesn?t do anything special to boost your rankings but it is aware of SEO and will not do anything that can harm SEO of your site.
How a hosting provider can affect your SEO
SEO is a set of activities or factors that help your website gain more exposure to search engines. Some of such activities or factors are directly affected by your web hosting company, e.g. Speed, Uptime, Security and SEO knowledge.
1) Website speed
It is an important SEO factor that affects on page SEO, if your site loads fast the users will be more satisfied and there will be more conversions. A web host with adequate resources and better datacenter infrastructure and hardware can help improve speed of your site; you just need to have a well-coded site, optimized codes and images.
2) Website availability
It is another factor that affects on page SEO as search engines avoid redirecting users to unavailable sites. They can remove such sites from their index temporarily or permanently. It is the job of web hosting provider to ensue your website is available all the time otherwise it can harm your online reputation.
3) Website security
You should take every possible measure to secure your site and the hosting provider should also do the same thing. An unprotected site is more prone to hacking and malware infection and if any such thing happens it may result in domain blacklisting and de-indexing.
4) SEO knowledge
Your hosting provider must be aware of SEO and its basic rules so that they can identify the tasks that are not good for SEO and can avoid them.
Robots Meta Tag
Robot Meta Tag is used to give instructions to the web spiders. It is implemented on a page to page basis by incorporating a meta tag in the head of an HTML file. It was proposed in 1996 at the W3C workshop and its use was described in December 1999 in Appendix B of HTML 4.01.
Robots meta tag plays an important role in on page optimization as it is the robots meta tag who tells the search engines how to treat the content of a page.
Basic Syntax: It has a very simple basic syntax.
<meta name="robots" content="instructions to be followed">
In the syntax, you can put different values as a place holder as we have written "instructions to be followed" as a placeholder. The different values can be index, noindex, follow, nofollow, all or none-thing.
Implementation and meaning of Robot meta tags:
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
This tag says "Do not index the page and do not follow the links on the page". It is used to instruct the web spider not to index the page and not to follow the links to other pages". So, your page will be dropped out of the search index and rest of your page will not be crawled. This tag is mostly used when a site is in development mode and the developers don?t want the spider to pick the page for indexing.
<META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">
This tag says "Index the page but do not follow the links on the page". It instructs the spider to index the given page and not to follow the links to other pages. Thus, your page will be included in the search index but the link path to other pages will not be created.
<META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW">
This tag says "Do not index the page but follow the links on the page". So, the spider will not index the given page but will follow the links to other pages, i.e. your page will not be included in the search index but a link path to other pages will be established.
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
This tag says "Index the page and follow the links on the page". So, the spider will index the given page as well as follow the links to other pages, i.e. your page will be included in the search index and a link path to other pages will be established.
301 Redirect
302 Redirect is an HTTP status code. It is a web server function which manages the complete or permanent redirection of a page. It tells the users and search engines that the original page is no longer available and all the information is shifted to a new page.
Thus, 301 redirect helps a website to redirect its users and search engines to its latest version from its old or original URL.
404 error
The 404 error message is an HTTP standard response code which indicates that client is able to contact the server but the server is not able to find the page requested by the client. Thus, it simply means that the webpage you are trying to reach cannot be found on the server. Errors 404 usually arise due to a wrong link on your site or if you have removed the requested page.
