In the web design business there is a bit of an impression that search engine optimization (SEO) and high quality design are inherently incompatible. The notion is that clever, highly interactive websites are difficult to SEO. Likewise, the idea is that a focus on SEO requires a level of simplicity that precludes better looks and innovative functions. The question then arises, “How do we bring quality SEO and sharp web design into harmony?”
Graphics Work Well with SEO
If a website embeds text into graphics, it is impossible for a search engine crawler, such as Googlebot, to discover the text. The majority of new visitors to your website, and by extension your potential converts, arrive using search engines. What is a website owner to do to achieve a look that combines graphic design excellence with top SEO work?
The answer is webfont. Webfont is an innovation that has been around a few years but is still struggling to gain traction with web designers. In the style sheet for a website, the designer needs to use the “@font-face” invocation. The design links the remotely hosted font in the headers. A modern browser will find the font and display it.
Webfonts can be used with any HTML elements that SEOs prefer. Add the webfont of your choice to your H1 tags. Voila! Now you have SEOed the heck out of your text and made sure it is visually appealing.
Nest your SEOed Content in Expandable Elements
You have a block of text that is critical to your SEO needs. However, you don’t want to beat your users over the head with the text. How do you split the difference between interface and SEO?
Build your text into hidden HTML elements, such as DIVs. Give the element the CSS properties to hide it, such as “display:none”. Using JavaScript, when the user clicks on a link or an image CSS can change on the fly to display the hidden text. Googlebot can see the text when it indexes the site. But your end users do not see the text unless they actively seek to view it.
The Ugly, Old-Fashioned Way
If all else fails, there is the simple, old-fashioned way of handling optimizing graphic text for SEO. Use the ALT attribute within your image tags. It’s not the slickest solution. But it is the old stand-by. Googlebot will recognize the ALT attribute text, although this is generally seen by SEOs as less optimal than other methods that contain the SEO content within a text-friendly element, such as a DIV.
The Ugly, New-Fashioned Way
If your site demands the use of more advanced AJAX features, Google encourages a method to allow Googlebot to parse the text produced when your site pulls content asynchronously. It’s not pretty. It’s called a hashbang.
A hashbang (typed as “#!”) allows you to pass the AJAX request as “example.com/page#!whatever”. This points Googlebot toward the request “example.com/page?_escaped_fragment_=name=whatever”. That’s ugly. Try to reserve it as a nuclear option when other solutions fall short.
Design and SEO Can Coexist
It takes a bit of work. But with the right combination of tags, webfonts, and JavaScript it is possible to pull together a fully featured website that employs gorgeous design and tight search engine optimization. Open up to learning a few quick tricks and soon you’ll have everyone amazed at your web mastery.
This article was written by Dino Gomez and Sheldon Armstrong, a regular contributor here at INFOtainment News. They write this on behalf of Dinomite SEO, your number one choice when looking for San Diego Video Production. As a company that understands the importance of SEO and design for your site, they are sure to give you the best service possible. Check them out today!
Add comment