Designers and developers of 2016 need to know SEO principles. But WHY? – you may ask. The answer is simple: it is good for you and your client. If you add an ’SEO-friendly’ tag to your resume and market your service with this feature, the better it will be for your business.
Now, the problem with web design and SEO is that they change rapidly. The things that were considered trendy and ’must-know’ back in 2011 are probably slightly outdated by now (and by slightly, we mean really, really old). In accordance with the aforementioned, we present you a guide to designing SEO-friendly websites in 2016.
What is SEO and why do I, a designer, care?
Search Engine Optimization (SEO) is a set of procedures which involve applying certain rules (governed by the so-called SEO ranking factors) onto websites that help them become more visible and searchable on the SERP (search engine results page).
It usually involves a mixture of on-site, off-site and technical procedures which, combined together, help the site be found by search engines (such as Google, Bing, Yahoo, Baidu, Yandex etc.) and, of course, the users in need of website content (information, services, products).
If you are launching a site, of course you want it to look nice, but what is more important – you want your website to be visible. Sure, having a pretty Behance/Dribbble-like site is awesome, but having one that brings a lot of traffic and generates conversions – that is an artform indeed. And the main job goal of an SEO expert.
However, web designers of today need to acknowledge that designing with SEO in mind is something that benefits both their clients and them, the designers, just as equally. The advantages of this approach are numerous, such as customer satisfaction, retention, higher sales rates, and a better web, only to name a few.
Designing for SEO
If you are too busy to study Moz’s Beginner’s guide to SEO (we recommend reading it anyway), here is what you need to keep in mind when designing for SEO purposes:
1. Content and keywords
Besides backend and frontend, textual content – namely, words and phrases – is what holds your website and helps it climb up the SERP pages.
Some call it keyword usage, some say the context is important, but what is essential is that, if your business is a small shoe shop, you simply cannot rank your website for, say ‘women’s shoes’ if you do not mention this exact phrase on the website!
In the past, it was enough for a site to rank high on the SERP via keyword stuffing – but those days are over. Today, websites need to design their content with a clear intention – to provide value and bring something new that is better than anything else on the market. Today, you need to use keywords in your links, headers, body text, text headlines, as well as meta data and alt tags (learn more about alt tags below).
Speaking of words, it is very important that your website fonts are readable by search engines. For example, Google offers a free directory of 808 font families, called Google Fonts, that are safe to use and easy to read by their bots. Learn how to use them in our Guide to Google Fonts.
2. Crawlable images
What may surprise you is that Google does not ‘read’ images. It does not have eyes, it is a robot – it just reads code. However, what Google can see (read) are alt tags. Alt tags are the search engine’s eyes.
Therefore, every image should have an alt tag with the description of the image and with a properly used keyword. This means that you should not name the images on your website generically, or even worse – like this: “899adgroalbfh” – this is gibberish for both the human and robotic eye. Instead, name your image with a pretty name, such as “black-leather-womens-shoes-on-sale.”
Note the usage of minuses in place of spaces – minuses are more readable than spaces, and it is advisable not to use ‘exotic’ diacritic characters and umlauts, such as č, ć, đ, š, ä, ö, ü, etc. because the search engine will write pretty much the same gibberish instead of them like in the example above.
3. HTML
Even though HTML and coding are a part of a developer’s job – designers need to focus their attention onto page titles, too. Titles do not only serve the purpose of categorizing a site. They help users (people who search for stuff on the Internet) and search engines, as well.
Titles need to contain a keyword and be concise (about 50-60 characters) and as informative and direct as possible – inspiring users to click on the link. The usage of H1, H2, and other tags, as well as highlighting portions with bold and italics is also important when it puts the most important portions of text upfront.
A clear URL structure is crucial for SEO. Never create randomly generated gibberish-like links because they will ruin all your efforts. Instead, your site needs to have a clear URL structure, with meaningful text which helps the user (and search engine crawlers) to read what is on the site.
4. Sitemap
Search Engine Land columnist Janet Driscoll Miller reminds us that “in an age of content syndication, a well-maintained XML sitemap is key to establishing your site as the original source of your content.”
XML sitemaps have proven to be very helpful in terms of crawlability and giving an overview of the general organization of the website. They can help search engines get through thousands of pages on a site easily and, in return, help all that content rank better (thus avoiding Google Panda or Penguin hits).
Leaving room for one on your site is simply a smart practice and imperative.
5. Social links
They say that, in today’s world, people and brands that do not use social platforms practically do not exist. This is true for websites in a scale beyond your wildest dreams. Social media integration is a section of your website that you need to think of in all the phases of its design.
Starting from a draft wireframe, over adding social buttons and connecting them with your site, all the way to claiming and verifying them on those sites and, of course, Google.
Mind you that links in general are what help your site rank higher, so it is important to get links from high authority sites – and make sure not to give away your authority by adding rel=”nofollow” attribute to a site that you do not wish to send your signals to.
Wrapping things up
As you can see, this is just a beginning. Designing for search engines is a difficult task when you do not know anything about it. However, when you get acquainted with the basic things like the aforementioned, the only thing you wish to do is learn more. And we encourage you in this effort to make the world (wide web) a better place.
