Good day DPers.. I'm a newbie on SEOing a site. Just a question.. Is there any process to follow before SEOing a site? what are the steps? any guides? If there is the same thread like this one please MOD delete it immediately. Thank and more power DP.
Pick out the topic of your site. Find good keywords with little compettion if you can. Make site search engine friendly and use keywords in site. Submit site to search engines and directories. Trade links and advertise.
Contrary to popular belief and accepted conventional wisdom, search engine optimization should be done before you write one line of code. Afterall, a big part of SEO is actually marketing - in this case, you're marketing the Web site to search engines. And the best way to market to the search engines is to market the Web site to your potential visitors and customers. So how do you do that? Pick a topic you want your site to discuss (or a product/service you want your site to sell). Plan out the major sections of the Web site (home, about, news, contact, and so on are good places to start). Write the content for the pages and sections of the site bearing in mind what keywords you want to write. If you don't know how to this, go to your local public library and borrow a copy of "Web Copy That Sells" by Maria Veloso. When you're done writing the content of each page, look at the content and see how much of the "fat" you can remove. Users generally prefer text that is short, sweet and gets right to the point. If you're going to be talking about items in a list, use a list (as I am here). When reducing the weight of your page content, make sure you keep the content as naturally flowing and organic as possible, without shooting yourself in the foot or removing any keywords you want to target (remember to keep the keywords relevant to the topic you're writing the page about or the product/service you're promoting, reviewing or trying to sell - again, "Web Copy That Sells" by Maria Veloso will show you how to do this). Review your page content again. By now it should be short, sweet and to the point. Your visitors will thank you (since they don't sit down and read, they skim), and if your keywords are still naturally apparent (in other words, they blend in well with the document), then you're 1/3 of the way there. Once that's out of the way, and you've chosen how your Web site will look (the graphic design process, which fortunately has NOTHING to do with search engines), you will have to focus on the site's development. It doesn't matter a bit if you use static HTML, XHTML, PHP, ASP, Perl, Python, or even my dog Larry (ok, I made that last one up). All a search engine is going to see is the HTML (or XHTML if that's what you're using) and the text content. Search engines have gotten better at indexing .pdf files and are now starting to be able to index Flash files, but for the purpose of this post I'm going to concentrate on plain old (X)HTML. So let's get started. As for the HTML, use the least amount of clean, semantic and valid HTML markup possible. Web pages follow a natural flow order of header, menu, content, sidebar(s), and footer. Structure your Web pages like this whenever possible. While search engines may not care one iota if your pages are constructed with semantic markup or layout tables, your users will benefit from the use of semantic markup (since it'll be easier to access the page from a Web browser, screen reader, braille device, mobile phone, PDA, or whatever comes along in the next few years) - and it'll mean less work for the search engines as well (piggy-backing on the "human effect"). While really not a tip, I have to say this anyway; following the advice in the previous point will also help ensure that your pages load quickly (especially for dialup users such as myself). Which is a bonus, since if the page loads quickly, you won't be wasting as much time getting the visitor's attention (meaning you'll be more likely to keep them at your Web site longer - which can easily lead to conversions of regular repeat visitors or even customers), which can lead to other Web sites linking to yours later on (it also makes it easier for the search engines to get to the chewy content goodness in your pages as well). Use headings appropriately (again with the semantics!). H1 is for the page title, not the site title. Don't use more than one H1 heading per page. If you think need more, then that means the page in question probably has two or more topics that are competing for attention, and thus should be separated (one topic per page). H2 through H6 should be used when necessary, and always use at least two of them in the same nesting when you do (a great example of this at work is your local newspaper - pick one up and read an article or two). Title and longdesc attributes (title="text goes here" and longdesc="more useful tooltip text than you can shake a fist at goes here") are good places to place keywords, but make sure the keywords you use are appropriate to the page in question - and the section of the page you are placing them in. If it looks unnatural, it probably doesn't belong. Remember, title attributes are like tooltips - great sources of additional information. Just don't abuse them (if you're going to use them in your menu, try not to place keywords in them, just provide a brief description of what the page is about instead). Same goes with image alt="alternative text" attributes. Use the alt attribute to identify what the image is about (if you're selling puppies, and you have a picture of a Jack Russell Terrier in your page, have the alt="" text identify the picture as a Jack Russell Terrier puppy). Note in my example in this bullet point that I used some keywords with the attribute. Supposedly, someone's going to be looking for Jack Russell Terriers (or "rat dogs" as I like to call them - hey, you don't like it, blame it on Gene Hackman's character from the movie "Crimson Tide"); in this case, the keywords "Jack Russell Terrier" would be picked up in a search engine result, and if given enough weight, can even drive human visitors to the Web page in question. I know I'm beating a dead horse here, but don't forget about semantics. If you have only a sentence or two, don't use a <p></p> element block to mark it up. Either leave it alone, or use something more appropriate (depending on the situation, it may either be a DIV or a SPAN). Mark up your menus (and other lists of links) as unordered lists. When adding classes and IDs, keep semantics in mind. Just because your sidebar may be on the left today doesn't mean it will be tomorrow (if you change the design). So don't use "leftcolumn" for your sidebar, just use "sidebar" instead. If your sidebar contains nothing but advertisements, mark it up as "advertisements" or "ads" instead. As for the menu, I prefer to identify the list menu (the primary site navigation) as "menu" rather than "nav" or "navigation". There are some common "SEO Myths" that the crackpots and frauds will try to sell you on (like with the rest of their snake oil offerings - which are just that - snake oil). Some of the leading ones are "content first page design" "multiple H1s per page" and keyword stuffing. Let's look at these real quick and learn why they're about as reliable as spreading butter on a burn wound. Content First Content First Web design centers around keeping the page content as close to the top of the Web page as possible. While I don't disagree that this can help the search engines (it does - as I've said before in other threads), what "content first" in this sense does is puts the content before the menu - sometimes even other page elements like the header (which, along with the menu, should be the only things between the content and the top of the page, unless you want to include helpful links like those to a site map, FAQ or help page, or a search box). Yes, the search engine spiders will have to go through the links to get to the content, but as long as your menu isn't as long as the Brooklyn Bridge, it won't matter to the search engines, since they'll still get to the content and will be able to index all of the page content (what the page is about) anyway (which is doubly true if the page content is short, sweet, and to the point - which I talked about earlier in this post). If you want to help your visitors get to the content right away (while still having the search box/menu between the header and content), then include a skip link between the header and menu. It's really simple, and looks like this: <div class="skip"> <a href="#content">Skip to Content</a> </div> Code (markup): The DIV is around the link because inline content cannot be a direct descendent of the body tag in Strict HTML or XHTML DOCTYPES. Also by using a class of "skip" on the DIV container, you can style the "skip to content" link to appear when hovered over (you can see this in action over at www.molly.com if you don't believe me; just hover over the header). If you have a DIV container wrapping your page's content, then you can safely remove the DIV container and apply the class to the anchor instead. The path #content will lead the visitor (or search engine) to the DIV container with the ID of "content" on the current page. I chose "content" for the ID value because that's what the main page content is. Whether you're selling tickets to a Cubs game, CDs of Rush's latest album "Snakes and Arrows" or blogging about how much the Fantastic Four movie sucked (if you thought the movie was great, you can replace "sucked" with "rocked" if you want), the DIV that holds the page content should have an ID that you can refer to with the skip link. Now, if you want to see an example of a Web site that has so many links and other detitrus that it will take a search engine or mobile user FOREVER to get to the content, check out my city's Web site (no I did not design it, but I will be giving them a cleaned up version of the HTML and CSS code free of charge to fix the mess) at http://www.aurora-il.org. Turn off the CSS in your browser, or take a peek at the source code (right click, "view source"). That's a LOT of links - most of which shouldn't even be there. Especially the left side menu's links (those should be after the content, and positioned on the left side using floats and negative margins). The top menu is pushing it, but I've seen worse, and since they actually serve a purpose, I can forgive that. Multiple H1 Headings H1 should be used to identify the title of the Web page. Which means it should be used once and only once. This particular element is often abused as the Web site's title, even though that job should be left to a DIV container with an ID of "header" with an IMG element inside it (containing appropriate alt="" text; I also advocate using an empty title="" attribute to overcome an IE bug, but that's one of the few times I suggest breaking my rules about Web semantics) for the actual logo (other branding, like a background, can be applied to the DIV via a stylseheet instead). If you're using more than one H1 heading, you're either abusing the search engines like Jacko would... -- ok I'll shut up , not using the element properly, or have two or more topics on the page that should be divided into separate pages (this will also help prevent keyword dilution, which I'll talk about later). One H1 heading per page, and that's it. As for other headings, use them as needed, but always maintain an outline-like structure when using them. Here's an example of what I mean. [b]H1 Heading[/b] [b]H2 Heading[/b] Ooh, yummy page content. I wonder if I can have cake and ice cream with it. Ooh, yummy page content. I wonder if I can have cake and ice cream with it. [b]H3 Heading[/b] Speaking of cake and ice cream, Oberwies Dairy has the best ice cream in the Midwest. Speaking of cake and ice cream, Oberwies Dairy has the best ice cream in the Midwest. [b]H3 Heading[/b] But where will I get the cake? I want to have my cake and eat it too! But where will I get the cake? I want to have my cake and eat it too! Oh well, I guess I can still have ice cream for breakfast tomorrow morning. Oh well, I guess I can still have ice cream for breakfast tomorrow morning. Oh well, I guess I can still have ice cream for breakfast tomorrow morning. [b]H2 Heading[/b] Speaking of cake and ice cream, I like chocolate cake and neopolitian ice cream. Especially when watching the Cubs and Bears beat up on everyone (including each other, in Carlos Zambrano's case). Speaking of cake and ice cream, I like chocolate cake and neopolitian ice cream. Especially when watching the Cubs and Bears beat up on everyone (including each other, in Carlos Zambrano's case). Speaking of cake and ice cream, I like chocolate cake and neopolitian ice cream. Especially when watching the Cubs and Bears beat up on everyone (including each other, in Carlos Zambrano's case). Code (markup): See how neat and structured that is? (Please forgive the wacky comments, they're just illustrative fluff.) If I had, for example, one H2 and two H3s, I'd look at how the page's content was written and re-write if necessary so I wouldn't need to use the H3s (I'd probably replace them with H2s if the content was appropriate). Also, if I had two H2s but one H3, I'd get rid of the H3 entirely if I couldn't get another sub-section of content related to the content identified by the H2. Keyword Stuffing Keyword stuffing is a rampant problem. Often times you'll see sites stuffing keywords for things that have absolutely nothing to do with the Web page. Other times you'll see relevant and appropriate keywords, but you'll also see too many of them. How many is too many? Usually when you have more than three in a single element (excluding paragraphs) or attribute. If it looks unnatural to you (as a regular user), then you're probably using too many of them. When you do use keywords, make them blend in with the content as much as possible (you should have done this before you even sat down to write one line of code or let your WISIWYG editor barf up the code for you). For example, last year I wrote a post elsewhere on DigitalPoint's forums about how to use PHP and server side includes to make it easier to maintain a Web site over time. Take a look at that last sentence. Notice how I used "PHP" and "Server Side Includes" in the link? Those are keywords that are included naturally in the link to reinforce what the link is about. I also didnt' stuff the link to the gills with keywords either. Just two (in this case "PHP" and "Server Side Includes") was all I needed. And chances are you probably didn't realize it. Also remember that having too many keywords can dilute the strength of the keywords you have. Just like with sugar, a little bit to the child is good, but if you give the kid too much, he or she will be bouncing off the walls for hours, causing you unneeded aggrivation. Same with the keywords, except that the overabundance of them will have the opposite effect. Instead of bouncing off the walls and drawing attention to the page, they'll just sit in the corner wondering why they're not wanted. The Truth About PageRank Speaking of links, don't forget that page rank is all about links. Google has a preference for natural links (like the one I gave in the above paragraph) and will give them more weight. The more natural links pointing to your Web page, the higher your page rank will be. The more links pointing from your page to other pages, the lower your page rank will be. Ideally, you want MORE links pointing to your page than you want pointing out. Bear in mind this works for EACH page, not your whole site or domain. Google doesn't care about your whole site's PR (which doesn't exist) - it weighs pages, not sites, afterall. One thing I like to do, and this has far more to to do with usability than search engine optimization (the search engines will benefit from the human-first approach, which confuses many people and convinces them that the search engines prefer this approach when they really don't care either way) is to include natural, relevant links to other pages of my Web site in my page content. I'm not talking about the menus, or a sitemap here. I mean organic links, like the one to the PHP/SSI tutorial I wrote last year. Obviously, the link would lead to a page on my site that was related to (and relevant to) the page I'm linking from (for example, if my page is about teaching people how to review movies, and I have a review of "Pirates of Carribean 3" elsewhere on my site, I'd probably link to the page as an example of how to write an effective movie review), rather than something totally unrelated. What I'd be doing is giving some weight (or credibility) to the Web page I was linking to. While this will bleed some PR (PageRank) from the current page, if you link your own pages into a "web" of pages (responsibly, don't over-do it), it'll balance out in the end, and you may (doesn't mean it always will) even enjoy a net profit on your individual pages' PR before the external links to your pages start coming in. What about META tags? 5-10 minutes at most. They're practically worthess, but they're nice to have, since they will remind you what keywords you're targeting. Unfortunately this means your competition will too, but you can't win them all. Spammers and black-hatters abused these elements so much that the search engines give them about as much weight (and credibility) as a bouncer at a private nightclub gives a person who's name is not on the guest list. Ok, now that all that's out of the way, and your site's done, go out there and promote it. Submit the site to the search engines (preferably by hand, it only takes a couple minutes), include a link to the site in your forum signatures, comment on blogs (leaving a link to your site in the "Your Web site" form input field if it's related to the blog and not otherwise spammy). Don't worry about buying links or submitting to directories - Google's actually discounting "paid links" (they're even suggesting people report paid links to them), and most directories aren't worth submitting to anyway (especially if you have to pay). If you find a couple reputable free directories to submit to, go ahead and submit your site to them (since you won't be losing anything) and spend your advertising/marketing/promotion dollars (or euros or yen or rubles, or whatever currency you use) elsewhere. Traditional marketing and advertising (there is a difference between the two) will kick in at this point. Don't expect quick results (though you CAN get them if you follow my advice), since "quick results" can be lost just as quickly. What I suggested above is a proven method for long-term sustainable growth, which is what you want anyway. It's better to be strong and stable for a long time (like a light bulb) than to be like a shooting star - you get noticed quickly, but you'll be gone just as fast if you choose the latter. After that, just continue writing quality content that others will kill to link to, continue promoting your Web site to the public, and you'll most likely be fine. Then, and ONLY then, can you worry about optimizing your site for the search engines - oh wait, no you won't, since you'll have done that already without even realizing it.
Ok, I'm supposing you want an example of what I mean by a Web site layout that has the header, search form, menu, content, sidebars and footer, right? Ok, the code isn't 100% perfect, but I'm going to give you one of my sample three column layouts that I'm going to use once I tweak a few things (it's just positioning with floats and negative margins, no images, which need to be added later via CSS). Internet Explorer has a few problems with the search form and the menu interacting when the text is resized (not to be confused with page zoom), but that can easily be corrected by using a negative margin to push the search box above the menu's row with CSS. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Three Column Layout with Horizontal Main Menu Site Template</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="keywords" content="Keywords go here" /> <meta name="description" content="A description of this page goes here." /> <style type="text/css" media="screen,projection"> * { margin:0; padding:0; } html, body { height: 100%; } body { background: #EEE; color: #000; font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif; } #container { min-height:100%; /* squashes an IE 7 bug */ } * html #container { height:100%; /* IE 5.x and 6 treat height as min-height */ } #header { background: #FCF; color: inherit; height: 80px; } #wrapper { float: left; padding-bottom: 32px; width: 100%; } #search-form div { background: #CCC; color: inherit; float: right; height: 2em; } * html #search-form div { position: relative; right: 3px; } #search-form input { float: left; margin: 0.25em; padding: 0 0.4em; } * html #search-form .submit { margin: 1px 0 -1px 0; padding: 0; } *:first-child+html #search-form .submit { margin-top: 1px; padding: 0; } #main-menu { background: #CCC; color: inherit; height: 2em; /* IE Haslayout - fix double margin */ line-height: 2em; list-style: none; } #main-menu li { display: inline; white-space: nowrap; } #main-menu a { background: #0E0; color: inherit; float: left; height: 2em; margin-right: 1px; padding: 0 0.5em; text-decoration: none; } #main-menu a:active, #main-menu a:focus, #main-menu a:hover { background: #FF8; color: #000; } h1 { background: #FFF; clear: both; color: inherit; font-size: 1.75em; line-height: 1.8em; } h2 {font-size: 1.5em;} h3 {font-size: 1.05em;} h4 {font-size: 0.95em;} h5 {font-size: 0.85em;} h6 {font-size: 0.75em;} #content { float: left; margin-bottom: 0.5em; width: 100%; } #content .section { background: #CCF; color: inherit; font-size: 1em; height: 1%; /* triggers hasLayout in IE 5/6; ignored by other browsers due to lack of height definition in #content */ margin: 0 14.5em 0 9.85em; padding: 0.5em; } #content h2 { background: #CCF; border-bottom: 1px solid #000; color: inherit; margin-bottom: 0.2em; padding-bottom: 0.25em; } #sidebar { background: #FFD; color: inherit; float: left; margin: 0 0 0.5em -14em; padding: 0.5em 0; width: 14em; } #sidebar h2 { background: #FFD; border-bottom: 1px solid #000; color: inherit; margin-bottom: 0.2em; padding-bottom: 0.25em; text-align: center; } #sidebar p { padding: 0 0.5em; } #secondary-menu { float: left; list-style: none; margin: 0 0 0.5em -100%; width: 9.75em; } #secondary-menu li { float: left; padding-bottom: 1px; } #secondary-menu a { background: #FCC; color: inherit; display: block; padding: 0.25em 0.5em; text-decoration: none; width: 8.25em; /* IE will mouseover highlight but not let you click link in 'non-text' area unless you set width */ } * html #secondary-menu a { width: 9.25em; w\idth: 8.25em } #secondary-menu a:active, #secondary-menu a:focus, #secondary-menu a:hover { background: #FF0; color: #000; } #footer { background: #8EF; color: inherit; float: left; font: normal 12px/16px tahoma, verdana, arial, helvetica, sans-serif; margin-top: -32px; padding: 8px 0; text-align: center; width: 100%; } </style> </head> <body> <div id="container"> <div id="header"> <img src="#" width="300" height="80" alt="Web Site Title" /> </div> <div id="wrapper"> <form action="#" id="search-form" method="get"> <div> <input type="text" id="search" name="search" size="25" /> <input type="submit" class="submit"value="Search" /> </div> </form> <ul id="main-menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> <h1>Top Level Heading</h1> <div id="content"> <div class="section"> <h2>Second Level Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. </p> </div> <div class="section"> <h2>Second Level Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. </p> </div> </div> <div id="sidebar"> <h2>Sidebar Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. </p> </div> <ul id="secondary-menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </div> </div> <div id="footer"> <p> Copyright © 2006-2007, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved. </p> </div> </body> </html> Code (markup):
No problem. I figured I'd stick it in my signature so others could benefit from it as well. One thing I did forget to include was how to determine which keywords to use, but that's like coffee - everyone has their favorite brand.
EXACTLY. The whole content before SEO, content before presentation approach does often seem lost on people who want silver bullet fixes for instant traffic because their crap site is little more than click-through link-whore advertising for pay bullshit instead of having unique content of value to the target audience. (*** note *** there's a difference between advertising for pay and advertising TO pay - the former being more than a bit sleazy, slimy, dirty and the province of con-artists and wannabe script kiddies - and the driving force behind the ORIGINAL dotcom bust) In a number of ways, the more radical SEO tricks are the same thing as the silver bullet fixes to make "But it works in Firefox" websites work in other browsers. It's a sleazeball shortcut, and like most sleazeball shortcuts they break the moment you turn your back. But some people cannot be bothered to actually put work and effort into a project, churning out crap using a crutch then claiming to be a 'professional' - there's a reason things like Frontpage, Dreamweaver, Joomla and Wordpress are popular after all.
UPDATE: My reply to the original poster now has its own thread. http://forums.digitalpoint.com/showthread.php?t=413544 Also note that the post has been cleaned up, edited, and modified, and that the new thread takes precedence over my above post in this one. All rights and restrictions stated in the new thread also apply to my posts here (in this thread).