So you are in the process of designing and developing a website and you want to adhere to the best SEO practices (good idea).
There is a plethora of good SEO tips and guides on the web to get your brain juices flowing, but we have compiled these essential 5 SEO DOs and DON’Ts to keep in mind when designing and developing a new website.
If you want your website to show up in the search engines (like Google, Yahoo, and Bing), you have to make sure you’re following the 5 tips below. Remember, "80% of success is showing up" (Woody Allen).
Without further ado, here are five SEO Considerations When Designing a New Website:
Don’t construct the entire site from images or flash
Google cannot index text within images and websites that are heavily flash dependant are not very search engine friendly.
Therefore, if you want your site to be indexed by the search engines, it is vitally important that you do not rely entirely on flash or images.
We aren’t suggesting that ditch flash and images all together. The web would be a very bland and boring place without them. Instead, try to use images to "enhance" your site such as using image sprites for buttons or rollover effects or a nice gradient for your sites background.
Flash can be a beautiful thing to have, especially a nice animation with sub-navigation functionality on an index page. Another option which is becoming increasingly popular is the use of the jQuery library to create animation effects using primarily JavaScript and CSS.
The benefit to using jQuery over Flash is that the text inside div’s are search engine friendly and can be read by spiders. Another great benefit of jQuery is that it is a very lightweight alternative to Flash. A jQuery animation effect script and its components total size are relatively small (depending on the image size, compression, and quality). Flash on the other hand is generally a bit larger. And lastly, many mobile browsers, namely the iPhone & iPad, do not yet support Flash technology. JQuery is developed in JavaScript and is compatible on many more mobile devices for the time being.
Another thing to keep your eye on is HTML5 markup accompanied by CSS3 and JavaScript. Not only is HTML5 a step in the right direction towards a better website information architecture it also has many of the animations capabilities of flash when coupled with some JavaScript. HTML5 and CSS3 are popping up more commonly on the web and many speculate that it will replace Flash in due time but that has yet to be confirmed.
DO:
• Use images and flash to enhance your website
• Use engaging flash animations
• Use image sprites (slivers of images such as gradients that repeat using CSS)
DON’T:
• Rely 100% upon flash for your website
• Use large images (100kb+)
• Forget about CSS3 and javascript as an alternative to flash and animated gifs
Be Descriptive in Your Meta Tags and Descriptions
While Google may not necessarily boost your rankings for optimized meta descriptions, it is very important to be descriptive and unique when writing them.
Why? Because the meta description is what displays under each link in the search results page.
Having an eye catching, unique and descriptive meta description can lead traffic to your site over your closely ranked competitors. Not to mention, the search engines look at the meta description.
A Good description:
Looking for a kitchen design and remodeling company in the Baltimore, MD area? Click here to request a free estimate!
A Bad Description:
We are the best at Kitchen Design, Kitchen Remodeling, Kitchen Redesign, Kitchen Costs, Kitchen Contractor in Baltimore, MD.
DO:
• Describe your pages services/websites purpose
• Include a call-to-action (##"Learn More" or "Click here")
• Incorporate keywords in your description
• Include your location if you only operate in certain areas
• Check your spelling!
DON’T:
• Use boring "informational language"
• Overstuff your description with your keywords
• Forget the value proposition to your visitor (##e.g.## "Request a free estimate")
The point is that while you’re taking the time to redo your website, also take the time to look over your content and refresh your meta data!
Find a Balance Between SEO Tactics and Usability
SEO and usability are equally important aspects of a well thought out website.
While getting traffic to your site is important, an entire focus on SEO over usability will make your site a nightmare from both an aesthetic and functionally perspective.
On the other hand, having a beautiful looking that works perfectly is great – but if no one visits it, what good is it?
Balancing the SEO tactics and usability practices differs from site to site. For example, a website for a government department such as a DMV will have a higher need for ease of use because of the wide audience of users who will come to the site. While a site for an IT company may result in an audience more geared towards web-technologies and trends.
There are other benefits to having a good usability from a lead conversion aspect as well.
Bloated and messy content on a site can give a user the impression that the site was "quickly thrown together" or unprofessional. This in turn can cause a sites "bounce rate" (a statistic of traffic abandoning your site after only one page view) to increase.
So how do you balance well written, relevant, optimized content with strong usability practices?
DO:
• Try using lists (<li>) and highlight the key topics offered for each page.
• Use headlines (HTML tags such as <h1>, <h2>, etc…) to transition in your content.
• Make it easy for your user to perform a desired action (such as filling out your contact form or calling you).
• Put your phone number in the upper right of your site and/or in your footer (make sure to use text for this so the mobile users can "click-to-call").
• For the designers in the crowd: try a clean page layout using divs instead of tables to separate the chunks of content in a pleasing way.
DON’T:
• Have all of your content link off of the main navigation of the site
• Have broken links or forms that don’t work (check for broken links with Xenu)
• Put too much content on the homepage (use a javascript or HTML5 rotator instead)
The truth is that there is not one justified answer concerning this issue. Due to the nature of the web, there can be hundreds if not thousands of ways to accomplish the same task in HTML/CSS. Not to mention that with jQuery and upcoming technologies such as CSS3 and HTML5 the possibilities are even broader.
The key to a good balance is to display the content in a way that is pleasing to the users eye and at the same time is good enough information for the reader to stay entertained or ‘stuck’ in the content. After all, if a site’s content is not helpful or interesting to its readers, then what good has the site’s SEO actually accomplished?
Use a CMS with Blogging Functionality
What does BLOG stand for? Better Listings On Google… just kidding, well, not really!
This is an important tip. As stated before, web technologies are growing and evolving everyday. Creating a site a page at a time can get exhausting and unorganized when sites grow over time.
Luckily for the web developers in the world the CMS market has been rapidly evolving and there are many open source options available.
So what is a CMS?
CMS stands for Content Management System. Its purpose is pretty much what it sounds like: managing your website’s content.
The top 3 open source (free) CMS options at this time are WordPress, Joomla, and Drupal. Each has its own unique way of operating but they primarily have very similar functions. In short, CMS = Smart Choice.
So how can using a CMS improve your SEO?
• It (for the most part) produces clean and valid CSS/HTML
• It Can help improve HTML to Content Ratio
• They easily give the ability for dynamic content (content that changes)
• Allow blogging functionality for introducing fresh content for search engines & visitors
• They provide tools / plug-ins / modules for managing meta tags per page
• They can improve a pages loading time
We highly suggest using a CMS for your site. They are different than conventional methods of site development but are very easy to pickup and learn.
We’ll keep this one simple:
DO:
• Use a CMS – specifically WordPress (there is a reason why it powers more than 10% of all the websites in the world)
DON’T:
• Leave your web designer with 100% control over your website.
Have both an XML and HTML Sitemap
Sitemaps are GREAT for search engine spiders. They allow the spider access to every page on your site from a single page. All the major search engines also allow webmasters to submit an xml sitemap of their site to increase indexing speeds.
While this is a simple practice, I continue to see webmasters forget to put a sitemap up from time to time.
So why use both? The simple answer:
• HTML sitemaps are for your visitors.
• XML sitemaps are for the search engines.
How do you make a sitemap you ask? There are so many ways:
• Hop over to http://www.xml-sitemaps.com and let them do it
• If your site is relatively small, just make one by hand (don’t forget to us <li>’s – maybe check out how other websites that you admire do their sitemap)
• Recommended: use a plugin or module with your CMS that will dynamically create and maintain your sitemap (and even submit it to search engines when you update your website)
DO:
• Have both an XML and HTML sitemap
• Use a script, plugin, or module to dynamically update your sitemap every time a page is added or modified
• Have a user-friendly layout to your HTML sitemap by showing hierarchical pages
DON’T:
• Make a sitemap once and never update it again
• Hide your sitemap somewhere on your site so no one can find it (instead, link to it from the footer)
• Have broken links on your sitemap (remember Xenu)
Enjoy!
Designing and developing a website should be fun!
Don’t get bogged down trying to do everything PERFECTLY the first time. Instead, have a friend give you feedback along the way.
If you have any questions about these tips or about other advice you’ve received lately, leave us a comment.
This post was written by Ioannis Giannaros and Derek Cavaliero of the Internet Marketing Firm, WebMechanix.
You may also like…
An Introduction to HTML Prototyping →
A Collection of Useful Web Design Wireframing Resources →
A Collection of Printable Web Browser Sketching and Wireframe Templates →
15 Javascript Web UI Libraries, Frameworks and Toolkits →
25 UI Inspiration and Design Pattern Resources →
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices →
25 Free Pictogram and Symbols Sign Icon Sets →
Illustrator Template Toolbox for Web, Mobile and App Developers →
20 Free Web UI Element Kits and Stencils →
No comments:
Post a Comment