Copyright 2010. www.anubavam.com. All Rights Reserved. Page 1
Contents Overview 3 What is SEO? 3 Role of a Developer in SEO 4 SEO friendly URLs 4 Page Title 5 Meta Tags 6 Page Heading 7 Amplify the First Paragraph 8 Highlight keywords in page 8 Title for Links 9 alt attribute in image 9 SEO and User friendly URLs 10 Avoid multiple URLs access for the same page 10 Page weight 10 Custom 404 Page Not Found 11 301 Redirect 12 Sitemap for SEO 12 Nofollow for external link 13 Restrict the use of Ajax and media content 13 Internal Linking 14 RSS feeds 14 Social Bookmarking 15 Block JavaScript of users 16 Conclusion 17 Copyright 2010. www.anubavam.com. All Rights Reserved. Page 2
Overview Do you have to make an important presentation and impress your boss on a fairly new topic tomorrow? What is the first thing you would do? Simple, you would just Google the phrase for immediate search results! Googling or Binging has become a very common part of our day to day life. People use the search engine for anything and everything they want, ranging from locating the nearest dentist s office to searching for a job. The Web has become the rich source of knowledge for the common man today. It is the new age Guru. At present 28.7% of world population or roughly 2 billion people use the Internet for searching information. This statistic signifies the importance of the Search Engine. In the world of the World Wide Web, the Search Engine is synonymous with a classic automobile attached to a turbo charged jet engine that reaches your destination in a matter of few seconds. This paper discusses how a developer can fine tune this engine by applying different SEO techniques to deliver the required results to your audience. What is SEO? The abbreviation of SEO stands for Search Engine Optimization. SEO is the process of improving the quality of traffic to a web site or to a web page. There are plenty of search engines available today on the World Wide Web. The most popular search engines are Google, Yahoo, Bing and Ask. Search Engines are basically tools which helps us to find what we want in the Internet world in an easier manner. When we enter a key word all search engines mostly displays a number of pages. The general human tendency is to click on the first few pages of the displayed result to find what we want. If we do not find the required information we seek in these pages, then only we will scroll down to the other pages. So this signifies the importance of having your website / webpage appear in the top few pages in search engine results display. Demo As you can see in the above image the reason why a few websites are appearing at the top of the list for the phrase AndroidPeople is because they followed some SEO ground rules while creating their web pages. We must follow w3c standards in HTML markup and CSS and also take advantage of some HTML tags. We can see details of these in the next step. When the web site is ready, next job is to submit them in search engines. SEO optimizers generally perform this task. There are many steps that can be taken to make your website / webpage more attractive on a search engine. This paper addresses some of the things which a developer can do from his end to ensure that the webpage ranks better if it contains the phrase searched by a user. Let us see how it happens in the following sections. Copyright 2010. www.anubavam.com. All Rights Reserved. Page 3
Role of a Developer in SEO In order to create a web page, all web developers should follow the well established HTML and w3c standards in CSS too. For a better understanding an example is given below. Just while trying to insert image inside with <a> tag, and succeeded using div and css class. <a href= http//mywebsite.com/ title= My site ><div class= Bg-image > </div></a> This is not valid, because we can t put <div> in <a> tag. We can instead do it this way <a href= http//mywebsite.com/ title= My site ><img src= site-logo.png alt= site name ></a> we recommend or <a href= http//mywebsite.com/ title= My site ><span class= Bg-image > </span></a> (we can also replace div with span). Also ensure that the page layout is user friendly so as to stimulate the users to visit the website again. SEO friendly URLs URL stands for Uniform Resource Locator. URL reveals where an identified resource is available and the mechanism for retrieving it. Here is the example for an URL http//mywebsite.com/ While using this URL from different web browsers like Internet explorer, Firefox, Google Chrome and more, it is helpful to find source system (server) in World Wide Web. The rule to be followed for creating it to make it more SEO friendly is given below Do not create a URL with special characters (@#$%^&*!<>?\) http//www.google.com/url?q=http%3a%2f%2fmywebsite.com%2fmyp@ge.html&sa= D&sntz=1&usg=AFQjCNH_tqyX47Oo51SZQEgiQDh1khaF7Qhttp//www.google.com/ Copyright 2010. www.anubavam.com. All Rights Reserved. Page 4
url?q=http%3a%2f%2fmywebsite.com%2fmyp@ge.html&sa=d&sntz=1&usg=afqjc NH_tqyX47Oo51SZQEgiQDh1khaF7Q http//mywebsite.com/myp@ge.html We must replace the above URL with some other character. For example, the user can replace it with the ASCII value of the character as denoted below http//www.google.com/url?q=http%3a%2f%2fmywebsite.com%2fmyp-64- ge.html&sa=d&sntz=1&usg=afqjcng1pf8gi4pri1x6cgrmpovjr1i2jwhttp//mywebsit e.com/myp-64-ge.html (@ s ASCII value is 64). Do not use blank spaces (Space Bar in keyboard) in a URL. http//mywebsite.com/myerror! Hyperlink reference not valid.error! Hyperlink reference not valid. Replace the blank space in the above link with an underscore ( _ ) or hyphen ( - ). Replacing the blank space with a hyphen makes it look as denoted below http//mywebsite.com/myerror! Hyperlink reference not valid.page.html It is also better to use keywords specified in the URL wherever feasible. Keywords are nothing but the phrase that will be searched by the target users in different search engines. Page Title http//mywebsite.com/my-seo-keyword.html Do not forget to create a title for your webpage. This is a very simple thing to do and hence should not be overlooked. The code shows below how a title tag can be added to a page within the header tag. Code <head> <title> My page title </a> Copyright 2010. www.anubavam.com. All Rights Reserved. Page 5
</head> Browser display Also do not use special characters while specifying the title. The characters, - and _ can be used, if required. Create a title which is specific for and summarizes the page content. Try to place as many keywords in the title as possible. Meta Tags Make it a practice to always add meta tags in the page header tag. It is a must to add two main meta tags to make your webpage SEO friendly. Those tags are Keywords The SEO keywords for your site Description This meta description often appears in Google search results to describe the link Meta tags are to be added in header tag itself. The code which denotes this is given below Code <head> <meta name="keywords" content="keyword1, keyword2 " /> <meta name="description" content="here include description about current page" /> </head> As most ASP.NET developers use the master page, it is always a good practice to include a space for the header section in it. This can also be used in the child page. The code to execute this is given below Copyright 2010. www.anubavam.com. All Rights Reserved. Page 6
Code In the master page include <head runat="server"> <aspcontentplaceholder id="head" runat="server"> </aspcontentplaceholder> </ head> In the child page include <aspcontent ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <title>my page Title</title> <meta name="keywords" content="keyword1, keyword2 " /> <meta name="description" content="here include description about current page" /> </aspcontent> In the background code include Here we are adding the keywords Meta tag. Page.MetaKeywords = keyword 1,keyword2,keyword 3 ; Page.MetaDescription="meta description here"; Page.Title = "My page title"; //we can head page title too Added routing concept in ASP.NET 4.0 web forms too (before it in ASP.NET MVC only) Page Heading Copyright 2010. www.anubavam.com. All Rights Reserved. Page 7
It is always recommended to use the H1 tag for creating a page heading. Avoid using the div tag as a page header. It is always a good practice to have only one H1 tag per page. Users can use H2 - H6 tags for sub-heading and can be used as many times as required. Search engines give high priority for H tags. In order to apply to any CSS, it can be done on H tags for a better look and feel. Demo Do not use <div class= title >My page heading</div> Use <h1>my page heading</h1> Browser display Amplify the First Paragraph The first paragraph is the most important paragraph in a web page. This is because search engines read the first paragraph and they assume that it represents the summary of the page/article. Hence it is necessary to have the most important keywords of your page in the first paragraph itself. Also, search engines will automatically take the first paragraph as meta description in case it was ignored in order to add meta description in the header. Code <p> This is summary of the page with SEO keywords. </p> Highlight keywords in page Copyright 2010. www.anubavam.com. All Rights Reserved. Page 8
The SEO process will be beneficial if the SEO keywords on a page are highlighted. Users can make use of the <b> or <strong> tags. Search engines also accord priority to bold words. <p> This is page content with SEO <b> keywords </b>. </p> or <p> This is page content with SEO <strong> keywords </strong>. </p> Title for Links It is better to take advantage of the title attribute in the hyperlink tags. Whether they're incoming (from other sites) or outgoing links (to other sites), it is important for the anchor text to contain a description of where the link is leading. This is even more important for search engines because it indicates its crawlers where the link is going. So avoid using words like Click or Click Here in the title text. The title text should be less than 55 characters. <a href= contact-us.html title= Contact us > Contact us </a> alt attribute in image The alt attribute should be used to describe an image. Because search engines cannot read images, it will read the text in the alt attribute only. <img src= company-logo.png alt= company logo /> Also the alt attribute helps the browser to show alternate text for the image in situations when the wrong src is used. Copyright 2010. www.anubavam.com. All Rights Reserved. Page 9
SEO and User friendly URLs It is always optimal to use friendly URLs in your sites. Most developers create pages with query strings. But it is not always appropriate to have more than two parameters in the URL. The developer can take advantage of URL rewrite feature. Rewrite means translating the parameters to a directory-like structure. http//mywebsite.com/blog.aspx?p=2 -- Dynamic URL http//mywebsite.com/blog/post/post-title -- Static URL / Friendly URL Avoid multiple URLs access for the same page. It is a good practice to avoid multiple URLs access for the same page. If we browse the same page with different URLs, it will be marked as duplicate content by the search engine. So just follow only one URL across the site to link to that page. We can access a site s home page with an URL as specified below http//mywebsite.com/index.html (or) default.aspx OR http//mywebsite.com/ The same page can be accessed without a page name too, as given above. But the same notation should be adhered uniformly throughout the website. Page weight It is good to create page with light weight from a SEO standpoint. Hence heavy media content in a page should be avoided. Developers can also make pages weigh less by creating style sheets and script files separately. If we use style sheets we can avoid inline styles too. Copyright 2010. www.anubavam.com. All Rights Reserved. 10 Page
Custom 404 Page Not Found When we browse a URL that no longer exist, the web server sends back a standard 404 Response. This informs the browser that the requested resource does not exist in server. A sample of this reflects in the browser is shown below Browser display We can handle this 404 error on the server side itself by showing a custom page or we can just redirect to the home page also. This can be handled easily in ASP.NET by adding a few lines in the web.config file. Code <configuration> <system.web> <customerrors mode="on"> <error statuscode="404" redirect="404-page.aspx" /> </customerrors> </system.web> </configuration> So when a person is browsing your website stumbles upon a broken link, then they will be redirected to 404-page.aspx page. The URL in browser will be shown as below. Browser URL view http//mywebsite.com/404-page.aspx?aspxerrorpath=/page/nopage.aspx Copyright 2010. www.anubavam.com. All Rights Reserved. 11 Page
301 Redirect Suppose a developer creates a page with a file name, for instance demo.html as shown below Demo This file can be accessed like this in the browser http//mywebsite.com/demo.html If the developer changes his mind later on and renames the page to redirect-demo.html the URL of the page will also change as given below http//mywebsite.com/redirect-demo.html But if the website s audience has bookmarked the old URL or if it is already cached in search engine results, then one definitely does not want it to be a broken link. So ideally, you need to have the old page. Just do a 301 redirect to the new page. The 301 status code shows the browser that the page moved permanently. It is still not a great idea to rename your pages frequently; you should avoid it in general. If you did not use redirection for any URL, then the custom 404 page will handle it, if you have created a 404 page for your site. private void Page_Load(object sender, System.EventArgs e) { Response.RedirectToRoute( newlyadded, new { category = new }); //Response.RedirectPermanent("~/newurl.aspx"); } The redirect can be done in the IIS also. ASP.NET 4.0 gives importance to SEO too. Sitemap for SEO SEO Sitemap is an XML file that contains all the links of your website in a single location. This will be submitted to search engines and used by search engine optimizers. Copyright 2010. www.anubavam.com. All Rights Reserved. 12 Page
It is always better to have a new sitemap. We should regularly update new pages in the sitemap file for search engines to display the latest pages. Having a sitemap also benefits the users by viewing your website to quickly find the resources they are looking for. Browser display Nofollow for external link Nofollow is <a> tag s rel attribute value, used to instruct some search engines that a hyperlink should not influence the link s target ranking in the search engine's index. So, we can add nofollow as a value for the rel attribute. Demo We can use a friend s site link in our current site ( mywebsite.com ). This is enough to link to any web site. <a href= http//our-website.com/ title= our website friend site > this is my friend s web site </a> But it is better to add nofollow for the links. <a href= http//our-website.com/ rel= nofollow title= our website friend site >this is my friend s web site</a> Restrict the use of Ajax and media content Search engines cache plain text only. It will not take into account any multimedia content. So avoid using flash content for menus. One more important point is to make limited use of Ajax. As Ajax content will load web pages dynamically, search engines will not cache those contents. So take advantage of Ajax after the user has logged in. Copyright 2010. www.anubavam.com. All Rights Reserved. 13 Page
Internal Linking Links are the vehicles for search engines to find pages throughout a web site. Web developers can further improve a page's whole ranking capabilities by linking internally to several pages. Internal links should be placed within the body content of a page and use <a> (hyperlink) text that includes the linked page's main keyword. Normally, a sitemap will contain links to every page of the site. Also do not add more internal links in just one page. Having links from similar sites is very, very useful. It indicates that the competition is voting for you and you are popular within your topical community. For example, just planned to put another page link in home page <a href= keyword-page.html title= add keyword here >check this page</a> RSS feeds It is always good to have a feed for your site. Feeds are used to alert the users about site updates. Feeds can also be used to boost site hits and improve traffic. Web developers can update the site activities in feeds automatically. It is also better to add feed links in the head tag. So, browsers will also know about the site feeds and will highlight the subscribe buttons. Demo Copyright 2010. www.anubavam.com. All Rights Reserved. 14 Page
For RSS <link rel="alternate" type="application/rss+xml" title="web Site name - RSS Feed" href="http//mywebsite.com/rss.xml" /> For ATOM <link rel="alternate" type="application/atom+xml" title="web Site name - ATOM Feed" href="http//mywebsite.com/atom.xml"/> Place the above links in the <head> tag. Social Bookmarking ( ) This is a powerful method to boost your site hits. Just add the most popular bookmarks links in the page. So many third party web sites provide the bookmarks script which can be used. It is good enough have the most popular bookmarks like Facebook, Twitter, Google Buzz, Yahoo Buzz, Digg and Delicious. How to add and how does it work? We need to form the URL by following its own formation. All bookmarks URLs follow their own structure to form the URL How to form bookmark URLs? Today we have the option to use many bookmarks. But let us denote a few bookmark URLs format here, which are value additions on the site. Copyright 2010. www.anubavam.com. All Rights Reserved. 15 Page
Social Networking Facebook Format URL http//www.facebook.com/share.ph p?v=4&src=bm&u=[link]&t=[titl e] URL example http//www.facebook.com/sharer.php? v=4&src=bm&u=http//mywebsite.com/& t=this is for share in facebook demo Twitter Delicious LinkedIn http//twitter.com/home?status=[li nk-and-short-line-about-page] http//delicious.com/save?jump=yes &v=4&url=[link] http//www.linkedin.com/sharearti cle?mini=true&url=[link]&title=[t itle]&summary=[short-line] http//twitter.com/home?status=http//myw ebsite.com/, this is for share in Twitter demo http//delicious.com/save?jump=yes&v=4 &url=http//mywebsite.com/ http//www.linkedin.com/sharearticle?mi ni=true&url=http//mywebsite.com/&title =my page&summary=this is for share in linkedin http//www.stumbleupon.com/submit?url= http//mywebsite.com/ http//www.google.com/bookmarks/mark? StumbleUpon http//www.stumbleupon.com/subm it?url=[link] Google http//www.google.com/bookmarks bookmark /mark?op=add&bkmk=[link] op=add&bkmk=http//mywebsite.com/ Yahoo http//myweb2.search.yahoo.com/m http//myweb2.search.yahoo.com/myresult bookmark yresults/bookmarklet?u=[link] s/bookmarklet?u=http//mywebsite.com/ Digg http//digg.com/submit/?url=[link] http//digg.com/submit/?url=http//myweb site.com/ Google Reader Yahoo Buzz Newsvine http//www.google.com/reader/link?url=[link]&title=[title]&snippet= [Shaort line] http//buzz.yahoo.com/buzz?target Url=[Link] http//www.newsvine.com/_tools/se ed&save?u=[link] Note Bookmark URL must have less than 255 characters only. http//www.google.com/reader/link?url=ht tp//mywebsite.com/&title=my page&snippet=this is for google buzz demo http//buzz.yahoo.com/buzz?targeturl=htt p//mywebsite.com/ http//www.newsvine.com/_tools/seed&sa ve?u=http//mywebsite.com/ Block JavaScript of users It is better to block the user s java script option in a page. For example, the comments section on a blog post/article. Some users may take advantage of the javascript to open popup windows during the page loading time. Other visitors to the site may not be very pleased with such pop-ups. So it is always better to block the javascript for users. Most of the text editors (Rich Text editors) block scripts by default. Copyright 2010. www.anubavam.com. All Rights Reserved. 16 Page
All the above mentioned points can be used to develop SEO friendly web sites. Developers may get more information with the help of search engines. Cliché! Conclusion Using a search engine helps developers to improve website traffic and page rank by adopting various approaches like keyword optimization, content title, Meta Tags, SEO friendly URLs, internal links, RSS feeds and social media usage. Developers can benefit by employing various techniques that will allow an organization for effective web presence that helps in their brand promotion, brand building and reputation. If a firm integrates SEO optimization techniques in their website, it can save lot of cost, effort and create a powerful marketing tool for business development. Developers should adhere to the well defined w3c stands in HTML and CSS which form part of SEO rules for creating web pages. Copyright 2010. www.anubavam.com. All Rights Reserved. 17 Page