"Why do websites that look great nearly always have SEO that sucks?"
This is the question I set out to answer during my recent Mozinar about designing for SEO.
To be a true king of the SERPs, you are, of course,
going to need more than a well-designed, search-optimised website. You
are probably going to need a ton of social mentions, quality links,
citations and co-citations, etc. The problem with these ranking factors
is that they are difficult to accomplish in volume and generally require
a lot of work to achieve, and, subsequently, the vast majority of
websites don’t have them.
You can, however still achieve big wins with great design and on-page optimisation
Whats the problem?
The problem is simple. Websites that look amazing
typically offer little opportunity for on-page optimisation and
conversely pages that are well optimised will often compromise the
design and user experience.
This creates a chicken and egg scenario - what is the
point in having a website that looks great if it can’t be found? And is
there any point of being easy to find if the website isn’t engaging?
How can we build sites that look amazing and are engaging, yet still maintain SEO performance?
Enter the webfont
Webfonts from the likes of Google, Font Deck, Typekit,
and Fonts.com have been around for a couple of years and offer a great
way to give a website style without compromising crawlability. They form
the fundamental structure and underpinning of any well-designed,
well-optimised site.
To add visual impact, designers will add graphical
elements to websites such as banners and calls to action. These elements
are usually created as images so the designer can use gorgeous fonts,
add type effects such as drop shadows, gradients, and a whole host of
other treatments that form part of the designers toolkit. Websites need
these kind of graphics, as they make websites engaging, they improve the
UX, and they make the user much less likely to bounce.
Take the graphic below, as great as it looks there is too much
information to include within an Alt-tag. Also it is difficult to
emphasise and prioritise the information within an alt-tag as it is just
plain text. 
By using a combination of webfonts, HTML, and CSS, it
is possible to retain the beauty and achieve good SEO by creating all of
the text elements within this banner as “live text.”
Not only can the live text banner now look great, but
they can also be marked up with H1’s, body type, bold text, and updated
dynamically. Search engines will just see this as standard HTML. Best of all, these banners or graphics can be even be marked up as rich text using schema or microdata.
Design for optimisation
The biggest hurdle in building great looking websites
that also have great performing SEO attributes is uniting these two
disciplines. Designers focus on sites that look great and create a good
user experience whilst being engaging, whereas an SEO typically wants a
site which is very crawlable and one which ranks well.
If the design and SEO teams gain an appreciation of
each others' requirements, the results can be innovative and
outstanding. Take the example below: these panels are for a fashion
retailer, the one on the left was visualised by the designer, in terms
of UX this panel is great, it shows a model wearing the product,
explains through the use of well positioned type exactly what a user can
expect to see on click through. The trouble is, from an SEO
perspective, this panel does not cut it.
An SEO is going to need something more like the panel
on the right hand side. It has a clear, defined header, possibly an
<h1>, followed by some great long tail text. Its clear that from a
UX perspective this panel falls well short of the mark, the panel on
the left will get a lot more click throughs than the panel on the right.
One potential solution to this problem is a mouse-over. Initially when
viewed, the panel will look as it does on the left hand side (exactly as
the designer want it), yet when a user rolls over the image the panel
changes into what you see on the right hand side (exactly what the SEO
wants).
The beauty of this solution is the user experience and
click thru are maintained and as all of this text is live text, it is
crawlable and very accessible to robots, giving the search engines
everything they need to index the site.
The expandable div
Another great way of incorporating indexable content
into minimalist page design is the expandable div. It can deliver big
SEO and UX wins by making relevant (and crawlable) text visible on mouse
click.
Take the example below: frequently, these kind of product panels are
represented as images, and they do a great job of engaging the user by
offering a visually rich single click method of navigation.
With the exception of some alt-text, these kind of panels offer very little for search engines to crawl.
By adding an expandable div to these panels, it is
possible to present a host of SEO opportunities. Clicking on one of the
items above can now provide a compelling description of this product
category, include additional imagery to aid the purchase process and as a
result increase conversions and user engagement. But perhaps the
biggest bonus of the expandable div is that we can provide search
engines with so much additional long tail text to index.
The inclusion of expandable divs within web pages are
not only great for the user, but also offer incredible opportunities for
indexable content.
The concealed weapons!
Calls to action, trust signals, billboards, and all
other page elements will often contain the kind of messages we want
google to crawl, yet in most cases, these will be represented as images.
As a result, discounts, free delivery, next-day delivery, and other
offers are not being crawled.
Create all of these elements with webfonts, CSS and
HTML so that spiders and bots can crawl them. Do we really want messages
such as “Free Delivery,” “10% discount,” or “SALE” to be hidden from
search engines?
The following items contain great sales messages, and
all of them have been built using webfonts, CSS, and HTML so are all
fully crawlable.
Reference:-http://www.seomoz.org/blog/designing-for-seo
No comments:
Post a Comment