Search Engine Optimization Techniques

This is a presentation I gave at Work - ITWorx - for my colleagues, introducing them to the wonders of Search Engine Optimization.

The Transcript for the presentation:

Search Engine Optimization
by Michel Habib

Agenda

•    SEO, What? Why? And Who?

•    Search Engines Magic, How do they do it?

•    Google Page Rank Secret Formula.

•    Optimization Techniques to Rank #1 in Search Engines.
•    Picking Powerful Keywords.
•    Getting your pages into the Search Engines.
•    Create Pages That Search Engines Love.
•    Avoid Things that Search Engines Hate.
•    Using Link Popularity to boost Page Position.
•    Tools You can never SEO without.
•    References
•    Questions


What is SEO?

•    Search engine optimization (SEO) is the process of improving the volume or quality of traffic to a web site from search engines via "natural“ search results.

•    Typically, the earlier a site appears in the search results list, the more visitors it will receive from the search engine.

•    If the site appears in the first search results page, it has a greater chance to be visited, since few people make it to the second page, and rarely make it to the third page

•    Note: Google can show only    up to 1000 results in any search
query.


Why is    SEO Important?

•    2008 – Internet users in the United States carry out almost 10 billion searches a month at the major search engines.

•    About 50% of all web site visitors reach the site through a search engine.

•    August 2007 – 750 million people carried out 61 billion
searches on the world’s top search sites.

•    Search Engines are the single most important source of new visitors to web sites.

•    Search Engines represent an inexpensive way to reach people.


Who needs to know about SEO?
•    Marketing Team

•    Development Team

•    Graphic Designers

•    Webmasters

•    Actually Everyone need to know about SEO


Search Engines Magic

•    Search Directory, Search Engine and Search Site,.

•    The Big 5 – Google [60%], Yahoo, MSN Live [Bing],
Ask.com, Open Directory Project [www.dmoz.org]

•    Search Engines use applications called spiders [or bots] that crawl the web and index every single useful page

•    In 2008, Google Claimed to index 1 Trillion pages.

•    In 2006, analysts expected that Google has 450K Machines, scattered in 72 data centers.

Google Page Rank Secret Formula
PR (A) = (1 – d) + d (PR (t1) / C (t1) + ... + PR (tn) / C (tn))

•    PR = PageRank,    A = Web page A, d = A damping factor, usually set to 0.85,    t1...tn = Pages linking to Web page A, C = The number of outbound links from page tn

•    Page Rank is a page ranking system.

•    Page Rank is created by Larry Page and Sergey Brin, founders of Google. The algorithm was presented in a paper while at Standford University.

•    When doing a Search Query, Page Rank is only one part of the equation, Page Relevance is also an important factor.

•    How to increase Page Rank?
–    Get many links from High Rank Pages.
–    Have many pages in your site.


Case Study

•    Atef Owns a Travel Agency for Egypt Destinations.

•    Someone told him he can get many customers from the Internet

•    Atef Created a web site www.AtefAgency.com and put
all his Agency’s Programs online.

•    He waited for 3 months, but didn’t get a single contact
from the web site.

•    What went wrong?



Optimization Techniques to Rank
#1 on    Search Engines


Getting your pages into the Search Engines.


•    Find out how many of your pages are indexed:
–    site:www.AtefAgency.com

•    Submit your site to major search engines.

•    Put links to your site from external sites.

•    Submit an XML Sitemap.

•    Submit to Search Directories – Yahoo and Open Directory.


Picking powerful Keywords
•    Think like your prey.

•    Identify the obvious keywords.

•    Look at your site’s access logs.

•    Examine competitor’s keywords.

•    Spelling mistakes, calender or calendar or calandar or calander?

•    Synonyms.

•    Use Keyword tools, such as Google Keyword Analysis Tool,
Wordtracker [no arabic support]

•    Tip: Picking very generic keywords will increase competition over them, narrow down your keywords, find your niche.


Create Pages that Search Engines Love
•    Pick a domain name that has some of your keywords in it.
•    Pick one or two keyword phrases per page.
•    Use the <Title> tag to optimize your page’s Keywords.
•    Watch for Keyword density, don’t overdo it.
•    Have a clean URL structure, avoid meaningless parameters.
–    http://www.AtefAgency.com/page.aspx?id=1315&sessionid=trUIERiuwerIUI
123123123 – Really Bad !!!
–    http://www.AtefAgency.com/Egypt/Luxor/Karnak-Temple - Good!
•    Create a good Description and Keyword Meta Tags
•    Use H1,H2,H3 Tags in your main titles.
•    Use ALT Tags to define your images.
•    Use descriptive Keywords in Anchors –
–    Click Here - BAD
–    Luxor Travel Packages - GOOD.
•    Create a good navigation structure and sitemap.


Avoid Things that Search Engines Hate.

•    Frames are Trouble, avoid them.

•    Stay away from Flash and Java Menus

•    Do not embed text in Images

•    Do not Use inline Javascript

•    Do not Use inline Styles

•    Too many parameters in your URL
–    http://yourdomain.com/march/index.html?&DID=18&CATID=13&ObjectGroup_ID=79

•    Keyword Stuffing

•    Hiding Keywords and links

•    Duplicating sites to appear multiple times in search results.


Using Link Popularity to boost Page Position.

•    Find out how many ranked pages link to your site:
–    link:www.AtefAgency.com

•    The more Sites that link to your pages, the more Search Engines will trust your pages and rank them higher.

•    Make sure that Link Text contains relevant keywords to your pages.

•    How Powerful is that?
–    Type in yahoo: miserable failure
•    how does it link to George Bush Biography page on the White House Site?
–    Type in Google: click here
•    Why is that linking Adobe Acrobat Reader download page?

•    What is a Google Bomb?


Tools You can    never SEO without.
•    Webmaster Tools for the major search engines:
–    Google
–    Yahoo
–    Bing

•    Google Keyword External Tool
–    https://adwords.google.com/select/KeywordToolExternal

•    Alexa    Toolbar – Site Analysis and Ranking

•    Google Toolbar – Page Rank

•    WordTracker – but not for Arabic Keywords.

•    Firebug – Analyze Page’s Structure and keywords.

•    Google Analytics

•    Sawmill


References
•    SEO for Dummies    by Peter Kent – third edition

•    Adsense Secrets 4 – Joel Comm

•    Internet Articles about SEO

•    Google Webmaster Help

14 Tips for Great User Experience and Website Design

Introduction

I have a website with a terrible User Interface, from graphics design to user experience. I doubt anyone coming to the site would want to come back again [but they do!] unless they really really need it .
I just decided to give the site a face-lift, and I considered hiring a professional to re-design the interface. Being the terrible perfectionist I am, I doubted a local designer would understand the elements of user experience or consider balancing a killer design with a performance tuned website. Knowing myself, I called up some friends to get some good resources on UI Design and User Experience Best Practices.

Spending few days, reading, summarizing and processing these resources, i started working on a concept for my Website UI upgrade, i came up with something, which i know is far from perfect. However i know it's 1000% better than the old design, and I learned a lot about User Interface Design and User Experience which i wanted to share with the community.


The Site

• Site URL is http://www.tadwina.com
• The site is a Regional Blog Aggregator, focusing on blogs in the middle east, with 20K-100K daily views.
• The Main Site's users speak the arabic language, are less than 25 years old.
• The site's rank is 597 in Egypt according to Alexa.

The Challenges

• There are no references to similar websites in the region. International aggregators [Technorati, BlogHer, Networked Blogs] are built around differnt concepts.
• On the Website, there are thousands of blogs, half a million posts, 10 different and distinct ways to slice the data, with unlimited combinations. All these compete to show on the home page.

TIP 1: Blocking Out Homepage Components Using Microsoft One Note, which is an amazing tool for organizing your thoughts, i started blocking out the Homepage :-
we have the following Components:-
- Posts, Blogs, Bloggers.
 and the following Filters on these components:
- Countries, Cities, Language, Gender, Categories, Sections and Tags.

and the following views of these components:-
- Latest, Features, Top Views, Last 24 hours, Favorites, Real Time , Editorial Picks.

and on the home page we would also need:-
- Ads, Logo, Seach, Navigation System, Social Aspect, About the site

Blocking out the Homepage

TIP 2: Use a Grid System.
A grid system is a guideline for graphic designers to layout their compositions in an organized way, it is a concept that applies to all sorts of art, and existed hundreds of years before the web era.
I used the 960 Grid System [http://960.gs] as you can see in the image above, as you can see it gives you a visual guide to block your components vertically. 960 refers to the widest browser area in a 1024 wide screen, which is now considered as the standard where more and more users are upgrading from the 800*600 resolution.
This presentation is an excellent resource on using 960 grid system for web design.
http://www.slideshare.net/huer1278ft/grids-are-good-right

Figure 1 - Initial Design

TIP 3: The Golden Ratio(φ)
This Magic Number is always linked to proportional beauty and is used in web design by dividing the page into proportionally pleasing areas, it can be approximated to the rule of third, where you always try to break your designs by thirds to make them visually appealing, or use the percentage of 28.27% [61.73%] to be more compliant with the phi value of 1.62.
I used that to break the homepage vertically, but I didn't try that horizontally to be honest

TIP 4: Above the Fold.
The Fold is a terminology used in newspapers, and above the fold means all the content that you can read when the newspaper is folded. Same concept applies to Web Design, where above the fold means all the content you can see before you scroll the page. if you look at figure 2 below, i put a double line horizontally to indicate the fold, the first one at 550 pixels, and the other at 600 pixels, considering a screen resolution of 1024*768 [assuming the screen has the browser header and the Windows toolbar which eat another 150 pixels]
You can see that the fold is right at the end of the Feature Area, so it guarantees that at least one section of the site appears to the user without being cut down.

Figure 2

TIP 5: Web navigation Conventions.
This might sound very obvious, but it's very important. a site needs the following:-

1. - Site ID - Usually a logo and a catch line summarizing what the site does. in our case, that's the logo at the top right [it's an arabic site if you haven't figured that out already], and a catch line saying 'home of the arabic blogs'
2. - Primary Navigation  - Menus or tabs in a constant accessible location across all pages.
   I used Tabs for primary navigation, and put that at the top of the page right below the logo. i had 2 main groups [Blogs, Posts and Bloggers] and [Images, Videos], everything else is secondary.
3. - Secondary Navigation - in my case i had first to realize how to break the primary groups of my site in a way that appeals to the users and allow them to find what they want by browsing the menu. I figured that i had to dissolve all boundaries that relate to countries, gender, language, and simply use user's interest into different categories [art, technology, politics, etc...] to break each of the main site's components [blogs,posts and bloggers]. Major sites like Technorati do this.
   The users will still find ways to navigate through countries, gender and language, but in a different way.
4. - Navigation to Utilities - Services, Site Info and User, these are utilities that are common to sites regardless of their domain, and are neded in the main navigation.
   
5. - You Are Here indicator - using Highlighted Tabs, and arrow/color indicators you can indicate where you are on the site. Breadcrumbs are an excellent way to indicate where you are, but i still didn't figure out where to put that [yet]
   
6. - Page Name - Every page needs a name, maybe the homepage only doesn't, because it's obviously doesn't, i never saw a page with the title homepage inside the page body.
   
7. - A way to Search - Not everyone likes to browse, some people are link Dominant, some people are search Dominant, and a search box is very important to any website, ours is at the top left area - as simple as a search box and a search button, i could add search categories [blogs, posts, bloggers], but for now i am trying to just simplify it, why make the user think? the search engine should be smart enough.
   
8. - a Way Home - this is a reset button, i want to go back to where i started. a linkable logo, a home icon are the traditional conventional; you can even have both!
   

Navigation Conventions

Tip 6: Color Theory to the rescue
I am terrible with colors, i am an engineer i am not an artist ! well, the keyword to that is - color theory. and again, as Golden Ration proved to be a mathematical answer to Proportional beauty, along came the color theory, a whole science that describes the theory beyond the harmony and relation of colors.
You can find tons of online tools to create your own color palette, but of all, i liked the Adobe Kuler tool.
http://kuler.adobe.com/
For my website, i picked Orange and Blue, and started creating my own palette, Orange is a color of vitality, energy, and it works best with so many other colors, while blue is a color of elegance and its a standard for the web [Facebook!]

If you wish to better understand Color Theory, i recommend this article [3 parts].
This is a series of articles by the amazing Cameron Chapman
Color Theory for Designers

Adobe Kuler for Color Palette Creation

 Tip 7: Design pages for Scanning, not Reading.
As indicated by Steve Krug in his famous book "Don't Make Me Think", people don't read pages, they scan them. And based on this concept, he defined 5 points to a successful design for scanning, not reading:-

• Create a clear visual Hierarchy
• Take Advantage of conventions
• Break Pages into clearly defined areas
• Make it Obvious what's clickable.
• Minimize Noise

 I made the following to apply this principle:-

1. Depend on Spaces and Grouping to create a visual Hierachy, the Feature Area for instance is separated from top navigation, from the area below it and next to it. at the same time, the Feature Components are closely attached as one group. same for the listing of latest posts below the feature area. They are narrowly spaced.
2. Scan the small image below, and even without knowing the language or even seeing the small font, there are certain areas you will scan and stop at, namely: the feature area at the top, the big orange titles of each post, and the left section numbered 1 to 5 [in arabic] with a clear blue background, for the top blogs. If you do so, then i succeeded at making you stop and look at the feature, the post titles and the top 5 blogs by scanning the page.
3. I want the users to click on the Read More link of every post, to do that, i put it in big orange color, put a background color behind it to define its scale, and highlight it with an orange arrow, i tried to make it inviting yet not distracting.
4. The design has 2 main colors, blue and orange, complemented by a filler color, gray. while i have green in my palette, but i eliminated it from early iterations to keep away any noise. 
5. users love tabs, they understand what they mean naturally, i use that convention heavily in the main navigation, in the latest posts below the feature image, in the feature image itself [numbered 1 to 6] and in the top blogs area. it might be a problem that i am showing the tabs visually differently in each one of these, i certainly need an expert opinion about that...

Full Design

TIP 8: Fitts' Law
Fitts' Law , proposed in 1954, suggests that  the time required to rapidly move to a target area is a function of the distance to and the size of the target. Yes, i know you are asking for an example, here is one. you have a large page and at the bottom of it there is a paging area with the numbers 1 to 10, using a very small font. You can imagine the torture required to move your mouse quickly to the bottom of the page then start pointing it accurately to click a certain page number without hitting the numbers next to it. ha?
And the answer is simple, make the clicking area bigger or smaller [proportional to where the mouse was before that action], users do not have patience, and the 10 other competing websites are only a click away.

Fitts Law

TIP 9 : Color Coding
Color Coding makes a visual contract with the reader, you sign a contract with the reader that whenever he sees that colors it means something, before reading what's inside.
I am using color coding here for the Blog Categories, where each category is assigned a different color. currently using this on the home page for each post area, by adding a color coded post category right below the post image. the pointy rectangle is also becoming a standard in web 2.0 websites.

Color Coding

Tip 10: Do not under-estimate the power of Footers!
I still didn't give the footer enough time in my design, so i believe i can still make it better. Being at the end of the page doesn't make it less important than the header and here is why:-

Footer

1. Search Engines process the footer and do not ignore it, so whatever relevant information you put in there is picked up by the search engines.
2. It is a great place you could put information about your site's mission and purpose, a small sitemap, your copyrights, privacy and valuable other information.
3. some users scroll down to the footer, believe it or not, and if you don't have any attractive links over there, they are going to leave the site. you could put links to popular pages, random pages, search box, or even a link to the top of the page for those lazy readers :)
4. You will be surprised some readers even start reading a page from the bottom up, similar to newspaper readers who prefer to read the newspaper from the end to the beginning, strange but true

TIP 11: Design for Search Engine Optimization
SEO would require a complete article to talk about it, but here are quick tips to maintain SEO in your design:

• Use Relevant Text in the correct areas. Use a text driven navigation menu [Javascript rather than flash] to ensure the search engine will process all important words. in our case here, the first navigation level has the words [blogs, post, bloggers, images, videos]. The second level has all categories [politics, sports, technology, art, stories, etc...]
• Use Large Text to make important phrases stand out, such as post titles, feature titles, and guess what, TAGS. doing that will tell the search engines that these are more important than others.
• Use your keywords on your homepage to tell search engines that these are important. my target keywords are used alot [without spamming of course] in the navigation menu, titles of different areas and links to other pages. i also use my keywords in the side area that gets replicated for all the site's pages, this has a huge weight when your site has hundreds of thousands of pages.
•  Make your navigation hierarchy URL friendly, search engines love URL Friendly websites.
• Check all Links on your home page, make sure that link text is relevant to the page it is linking to, use keywords for the page it is linking to. for example, don't use a 'Click here' text link to go to the video blog pages. name it 'Video Blogs' Page. this increases the weight of the page a lot.

TIP 12: ADS = Food
if you depend on Advertising for making a living out of your website, then you already know that placing ads on your page is an art and science job, and screwing it up will screw up your business.
Here are some tips for placing Ads to fit in your design:

• Select carefully where you put your ads. putting your ad at the top of the page is number one place for getting the top revenue. if i tell you where else to put your ads, then i would be lying to you! you have to pick all the places that get the most attention. for me this is the top of the page and the left side area. I use google ads reports to experiment different places and settle on the most beneficial ones.
• Do not put too many ads. first of all, putting many ads means more distraction to your readers, they will spend a lot of time figuring out where your content is, and can end up abandoning your site completely.
• Blend your ads in your content. and i don't mean here to cheat your readers thinking that your ads are part of your content, no, there is a thin line here in between. Making an Ad stand out as an Ad will make readers automatically skip it without even looking. Blending an Ad in your site will make your readers look at it, know that it is an AD, then decide what they want to do next.
• Use Relevant Ads to your readers. with Google Adsense you can now ban certain ad categories.
• If you are using Contextual Ads from Google Adsense, place them in proximity of your content. I put an Ad at the top of the page and have my navigation right below it, including all my keywords. I also have another one on top of my tag list.

TIP 13: The Social Network - Trust your friends not your sites
your friends will watch something, you are going to watch it, no matter how good or how terrible. The more people will share links to your site, the better traffic it gets, the keyword here is SHARE.
Share on Facebook, share on Google Buzz, share on Twitter, all with different names: Like, Recommend, Share, Tweet, Buzz, Proxalominate [i wouldn't be surprised if that turned out to be a name]
I am using Facebook Connect to sign in users, they do not need to create another account on the site. they can instantly gain access to personalized information by simply signing in to their Facebook, isn't that nice?
They can also share any post or any blog using this little social widget right below the post.

Tip 14: You May Read the following books as well
The Smashing Book - is a collection of articles on Web Design
Principles of Beautiful Web Design - has a lot of concepts behind design
Don't Make Me Think - full of examples on user experience





Conclusion
I hope the tips above are useful , and if you have any questions, any additional tips, you are most welcome, i appreciate your feedback.

Technology Trends Report

I made a little research during the past week to get updated with the hottest IT technology trends.I came up with the following short list:

* HTML 5 - is the next big thing, not only on desktops, but also on Cell Phones. Major Companies are already racing with their Beta Browsers, and showing off what they can do. IE9, FF4, Chrome 6, you name it. What this new standard can do is really mind blowing, from html video,audio tags, 2d/3d drawings, geolocation, client storage and database, full duplex communication, javascript api, you name it!

http://slides.html5rocks.com/#slide1

* Cloud Computing - not exactly the newest technology, but is proven that it is here to stay. While software as a service was an introduction to a new era of how we do business, Infrastructure as a service [IaaS] is the logical complement to SaaS. No standards exist yet, but many giants such as Amazon, Force.com, Rackspace are in the lead. Clould Computing not only changes the infrastructure, but also changes platform architecture to ensure highest scalability.

Interested to know how top players scale to serve billions of pages? http://highscalability.com/

* Geo-Location, geolocation, geolocation. The world of Startups has gone crazy about Geolocation! It’s like the keyword to success, allowing businesses to make use of User’s Physical Location. Geo-Location startups such as Foursquare, Gowalla, BrightKite are enjoying a great success. Social Networking Giants are joining, adding the term ‘social’ in Geo-Social, Facebook Places is the latest addition to the pool, with a brand new dimension in providing Online to Offline Services.

http://www.slideshare.net/mmpartee/geolocation-geolocation-geolocation http://mashable.com/2010/08/24/the-state-of-the-geosocial-universe-infographic/

* Social Networking - The Social Factor is key to the success of any online business. Google is now battling to add the social layer to its myriad of applications. Whole new set of million dollar startups evolved around the viral beast provided by facebook. new business categories spawned around it, such as Social Gaming [coming next].
* Social Gaming - Although Facebook did shut all the dollar gates in the face of Social Gaming, there is still a great potential for this Category. Enough to say that Ron Conway - an Angel Investor - has Social Gaming in his Megatrends Investment Guide. Zynga, maker of Farmville, funded with over a half billion dollars in the past 3 years, and still on a roll. Are you ‘social’ game?
* Tablets - it is true that a big war is coming in the tablet industry, with 6 or more platforms competing in the market, providing the users with a new fancy portable touchy experience. RIM is coming to the game with its blackpad, Dell just announced it’s own tablet, IPad is already there backed by 3 million users, Google will make a later entry with its new OS. it is time to pick a side and start making this tablet app before someone else does now!

http://www.crunchgear.com/2010/09/11/a-massive-war-is-approaching-as-the-tablet-market-cannot-sustain-six-separate-platforms/

* Android and IPhone Apps

I cannot stress more how clever is the apple’s app store business model, a user won’t mind paying 99 cents for an iphone application, and if you make this killer app that you sell to a 100,000 users, you become an instant success. it must be a lot of competition out there, but ideas never end, do they? if you dont get what i mean, check the double rainbow application.

* Google Instant and the future of SEO - Google Instant is still being understood by the user community, but it is making changes to the concepts of Search Engine Optimization. SEO remains as a key factor in getting more visitors to your websites, web and Mobile.
* XBox Kinect - Microsoft is about to strike in this holiday season with a new breakthrough in the console competition. you are now the controller, with this XBOX 360 addon. With great powers, comes great games. Gaming industry is a multi million dollar business, but still you can have your shot at it while it is still booming, there is some talk about supporting indie developers, yuppieee.

http://www.examiner.com/video-game-news-in-atlanta/xbox-360-kinect-will-support-indie-developers