Website design is a never ending, there is innumerable number of websites and hardly can you compare one website with other in terms of design, images and color combinations. Ever wondered how a design can be so unique, no it’s not unique it’s only that you cannot find your drop of water in the large ocean. But Internet world has grown to such a large extent with majors like Google, yahoo and MSN, that original content and Technology is always appreciated.

2. Why we need this session?
 This session outlines some guidelines that we should
adopt during design and development phase.
 Suggested practices will reduce the time and efforts
taken to develop SEO friendly websites
 It will also reduce the burdens of resources engaged in
SEO and development or maintenance.
 Before you read this session you need to be familiar
with SEO. Please use this as a reference.
http://moz.com/beginners-guide-to-seo
Copyright © GMR Web Team

3. Components of A Website
 CSS
 URL
 Logo
 Header & Footer
 Navigation
 Site Banner
 Session ID
 Links
 Images
 META Data
 Headers (H1, H2)
 Canonicalization
 Redirects (301/302)
 Query Forms
Copyright © GMR Web Team

4. CSS (Cascading Style Sheets) Requirements
 Website should use minimum CSS
 Maximum Number of CSS <= 4
 No inline styles
 Cross browser compatibility
 Cross platform compatibility (Win, iOS, Android)
 W3C Validated CSS
Copyright © GMR Web Team

5. URL
Copyright © GMR Web Team

6. URL Continued.
 Depth – Number of subfolders (less than four)
 Width – Number of characters (no problem)
 Subdomains 0r Subfolders?
 Subfolders are better as subdomains are considered a
different website by Google
 Page Names – Descriptive (keyword rich)
 No underscores (use hyphen [-] instead)
 If dynamic URLs are mandatory, keep number of
variables used in query string to less than four
 Use extension less URLs (wherever possible)
Copyright © GMR Web Team

7. Logo
 Clear placement
 No H1 on logo
 Logo file name should be descriptive
 Logo should have accurate ALT text
 Uniform logo across platforms (web, social, offline)
Copyright © GMR Web Team

8. Header and Footer
 Designed with user’s preferences in mind.
 Put links like “About Us”, “Contact Us” here rather
than using in main navigation.
 Place Social Icons in both Header and Footer
 Put Significant Page URLs in Footer
 Use Copyright, Privacy, Terms etc. in Footer
Copyright © GMR Web Team

9. Navigation
 Convenient for visitors.
 Crucial information on home page.
 Important information and navigation controls visible
without scroll
 Every page should be reachable from at least one static
text link
 Link depth should not be more than three.
 Avoid Script based navigation
Copyright © GMR Web Team

10. Banner
 Lightweight
 Images should have proper description
 All slides should link to relevant page
 Dynamic banners (if possible), so that we can change
it frequently without much efforts
Copyright © GMR Web Team

11. Session Id
 Should not appear in URL (causes duplicate content)
 Session IDs are best kept in cookies rather than URLs
 Session IDs can prevent link value from being passed
to page if included in URL
Copyright © GMR Web Team

12. Links
 Proper inter-linking
 Descriptive and Relevant Anchor Text
 All links covered in HTML/XML Sitemap
 Refer to all practices for SEO Friendly URLs
Copyright © GMR Web Team

13. Images
 Good to include high quality images on website
 Images should be optimized
 Should have relevant ALT & Title attribute
 Include Height and width attribute
 Low image size (30 to 120kb, resolution 72dpi)
 Use Image compression or CSS Sprite for optimization
 Choose a descriptive image file name
 Put all your images in a folder called ‘images’
Copyright © GMR Web Team

14. META Data
 Title (up to 60 characters)
 Description (up to 150 characters)
Keywords – No ranking benefits (but suggested use)
 Most important factor for SERPs
 Make sure to develop a mechanism to add META
details on all web pages of the site.
 Inclusion of Facebook Open Graph, Twitter Cards, and
Google+ publisher attributes
 Use Schema Attributes
Copyright © GMR Web Team

15. Headers (H1, H2)
 Very important for ranking
 Only one H1 per page (use primary keyword)
 H2 as per page content
 No H1 on Logo
Copyright © GMR Web Team

16. Canonicalization
 Important aspect from SEO point of view.
 Google assumes abc.com, www.abc.com and
http://abc.com as different URLs
 Use “rel=canonical” wherever required
Copyright © GMR Web Team

17. Redirects (301/302)
 URL redirects impact the performance of websites.
 All permanent redirection should be 301
 302 should be used for temporary redirection
 In case of redesign, preserve URLs
Copyright © GMR Web Team

18. Accessibility
 Page access - Make sure that the robot.txt file isn't
accidentally blocking important pages
 Block inappropriate pages – Some pages should not be
indexed, for example incomplete pages or confidential
pages
 404 errors - try to reduce the amount of 404 errors to a
minimum
 Site speed - Faster is better.
 Mobile accessibility - Google recommends a responsive
design.
Copyright © GMR Web Team

19. Some Do’s and Don’s
 Do’s
 Have valid HTML
 Use 301 redirects for moved pages
 Use custom 404 errors for missing pages
 Keep CSS in external include files
 Block indexing of tags/ categories in blogs
 Don’ts
 Require cookies to serve important content
 Allow broken links
 Use images, Flash, or JavaScript to display important text
 Make content only accessible through forms or other elements that
require human action
Copyright © GMR Web Team

20. Extra Reading
 Web design guidelines:
https://support.google.com/businesssitebuilder/answ
er/1657560?hl=en
 Design and Content Guidelines:
https://support.google.com/webmasters/answer/3576
9?hl=en#1
 Technical guidelines:
https://support.google.com/webmasters/answer/3576
9?hl=en#2
Copyright © GMR Web Team