[Infographic] Understanding SEO Fundamentals Will Make You a Better Web Designer
By Caroline Reder
Jul 25, 2016
So, you are sitting with a client and they ask you the dreaded SEO question because hey, everyone pretty much knows that their placement in search rankings matters these days and moreover, the buzz word “SEO” rolls off the tongue oh-so-smooth making your client seem just a little bit more educated in embarking on this project to take their presence online.
Why dreaded? Well, I’m not sure where you went to design school, but that definitely wasn’t something in the curriculum.
SEO is something that you pick up along the way; between podcasts, random articles and the occasional agency stint or two, or three. It’s something acquired, not learned and certainly doesn't come naturally to visual thinkers; to start researching words and phrases using tools like Google Trends and Moz, let alone consider content mapping (wait, what’s that?).
In this day and age, it’s simply not enough to design a visually interesting, responsive website. As a web designer, you must be able to design for conversion and craft a website that sets your clients up for success in search rankings. After all, what’s the point of designing a website for a client that no one can find? You might as well print your website out, hang it up around town and call it a day.
Taking a cue from The Hitchhiker's Guide to the Galaxy, don’t panic! We’ve got you covered with this in-depth SEO guide for web designers.
Table of Contents
Want to embed this infographic on your website?
Why SEO is Essential for Web Design
There’s a delicate balance between SEO and web design. Too hardcore SEO-oriented and your client’s website turns into a soulless robot; too little an emphasis on SEO and you’ll be lost to the black hole that is 6 billion other websites. When 60% of all organic clicks go to the top 3 search results, it’s clear how important SEO is for web designers.
Striking this balance is really all about a deeper consideration of the overall user experience. It’s about creating a website that people can find and navigate with ease and presenting visitors with an added value through content that will keep them clicking and coming back for more.
Try asking yourself some of these basic questions:
Can your client’s website be found?
Check to see that you submitted an XML sitemap and look over your H-tags and metas to make sure that there are targeted keywords present. Also make sure that all pages can be found by double checking the robots.txt.
Does the website load fast?
Make sure that all images are optimized, that compression is enabled, reduce redirects and remover embedded media.
Will visitors be able to easily navigate to all corners of your site within three clicks?
First off, make sure you are using text navigation and that all main pages are featured prominently. Then take a look at your internal link structure to make sure there are a few internal links per page.
Have you optimized every page?
On-page SEO doesn’t begin and end with simply throwing in H-tags, keywords or even internal/external links. It is how you employ them. Target keywords such as your client’s brand name and the market they are in should definitely be included in the meta title/description and preferably towards the front - they should also be in the first 100 words of text. URLs should match these titles, separated by hyphens and all lowercase. Links should be added if they are meaningful and if they really add something to the content. Simply put, make sure there is intent behind every addition to your page.
Is the site accessible on mobile devices?
Ensure that your website is responsive and that layouts adapt to their relative screen sizes.
Usability, UX & Content are all a Part of the Ranking Equation
I think we’re all familiar with the experience of searching for a term and automatically clicking the first result - below the ads of course - entering the site, scanning for a second or two, then thinking “yea, no” and promptly returning to the results page. Alternately there’s that ah-ha moment when you find a website that you not only stay on for more than a few minutes, you add to your bookmarks or Pocket and then share with your friends on social media.
Google now, more than ever, is looking at these patterns of behavior and how visitors interact with your website. Are they staying on your homepage or returning to the search results because they couldn't find what they wanted or worse, your site wouldn’t load? Are they continuing to click? Are they commenting? Are visitors sharing your website to social media?
Search engines know if a website is easy to navigate, provides relevant information, is designed for a range of screen sizes - all part and parcel of usability and a good UX. They are also able to read signals of quality content. Through user engagement metrics, linking patterns and machine learning, engines are able to discern quality and relevance, further refining the complex process of ranking websites.
But, in the end, we are talking about engines. While they cannot view an image or watch a video the same way a human would they can get close and this is where SEO will never lead you wrong so don’t forget your metas, keywords, internal links and social sharing buttons.
Glossary of SEO Terms
301 Redirect
This type of redirect is a HTTP status code communicating to engines that a certain page has permanently moved to a new location. They are extremely helpful if you moved an old website to a new domain, visitors are accessing your website through multiple domains or, if you are merging two websites as 90 - 99% of “link juice” is passed on to the new page.
404 Error
A 404 is a client-side error. It is what a visitor sees when they try to reach a non-existent page on your website (maybe this page was moved, deleted or they typed in the wrong URL). Designing a custom 404 page will help visitors find the information they are looking for, or provide alternate content on your website and help improve an almost always net-negative experience.
Alt Text
Alt text, not to be confused with alt title, describes what’s on a given image and the function of that image on the page. Not only is adding alt text be important for SEO purposes, it is important for accessibility and impaired persons.
<img src="image.jpg" alt="Your Image's Description" title="the title of your image"/>
Anchor text
Anchor text is the clickable text in a hyperlink. The link can lead to another page on your website or an external page but, for SEO, it is best that this text be relevant, relative to the content to which you are linking.
<a href="http://www.anchortext.com">Your Anchor Text</a>
Bounce Rate
Bounce rate (not exit rate) represents the percentage of single-page sessions or how many people entered your website and then left without clicking to anywhere else on your website. A high bounce rate can be caused by a number of reasons including incorrect implementation, site design and user behavior.
Canonical
For SEO, canonicalization refers to redirecting requests for multiple URLs to a single dominant version. Part of the HTML head of a web page, this tag tells search engines that this page should be treated as a copy of the intended URL. For example, you may arrive on the Webydo homepage from the following URLs:
- https://www.webydo.com
- https://www.webydo.com/index.html
- http://webydo.com
We can use the canonical tag so that visitors will end up at our preferred address (the first) which all of the links and content metrics the engines apply will be credited towards this URL and not diluted into two places.
<link rel="canonical" href="https://www.webydo.com" />
Crawler
A web crawler is an Internet bot (also known as spiders), that systematically searches the web retrieving HTML documents and recording the information and links found on the pages for the purpose of indexing, or web spidering, sites. These results are in turn used for search engine results.
Duplicate Content
Either substantial blocks of content or even identical content that appears in more than one place is considered duplicate content. Without canonical tags or redirects, it’s difficult for search engines to determine which version is the most relevant for a given search query and may cause them to exclude links and penalize your website. Make sure every page contains original, relevant and quality content.
External Links
An external link is one that point to a location outside of your domain. Lining out to relevant, external domains helps search engines better understand your niche market and increased the trust and quality of your on-site content, positively affecting SEO.
Heading Tags or H-Tags
HTML header tags range from H1 to H6 and are in order of importance. Use one H1 tag per page and use H2 and H3 to denote subsections on the page and in general, it’s suggested not to skip from say H1 to H3 without using H2.
<h1>Your H1 Tag Looks Like This</h1>
Image Optimization
Images are often one of the heaviest elements of a given web page - often the make or break when it comes to site speed as they account for most of the downloaded bytes. While there is no single answer on how to best optimize images, finding the optimal image settings requires examining format capabilities, quality, pixel dimensions and more.
Internal Links
An internal link connects one page of your website to a different page on the same domain. Not only does internal linking aid in website navigation, it also defines the overall usability and hierarchy of a website. From a search engine's’ perspective each page has its own authority and rank. Kissmetrics offers a killer article on everything you need to know about internal linking.
Keywords
Individual words or phrases, keywords are what Internet users enter into search engines to find matching and relevant results. Understanding what keywords your client should use can be the key to driving targeted, free traffic to their business.
Meta Tags
HTML meta tags are data tags that relay your page’s title and description to search engines. While the text in these tags are not displayed visually, on your website, it is parsable and gives browser's information about your page.
<head>
<title> This is not a meta tag, but required anyway and should include a target keyword </title>
<meta name= "description" content="A concise description of your page's content falling between 130 - 156 characters">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
Robots.txt
The robots exclusion protocol (REP), or robots.txt is a text file webmasters create to instruct robots (typically search engine robots) how to crawl and index pages on their website.
Robots.txt is a text file that directs crawlers how to crawl and index pages on your website. It may be used to:
- Block all crawlers from all content
(User-agent: * Disallow: /) - Block a specific crawler from a certain folder
(User-agent: Googlebot Disallow: /no-google/) - Block a specific crawler form a certain page
(User-agent: Googlebot Disallow: /no-google/your-blocked-page.html)
Robots Meta Tag
Adding a Robots Meta Tag allows you to specify a particular page not to be indexed or specific links on that page followed. The NOINDEX value mean do not index this page while INDEX indicates the willingness to be indexed. FOLLOW versus NOFOLLOW refers to the links on a page and breaking or allowing the link path from your site to other pages.
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">
<META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW">
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
Sitmaps
A Sitemap is a file that tells search engines about the pages of your website, specifically relating to the organization and hierarchy of how you’d like it to be presented. Sitemaps are essential in signaling to search engines new or changed content to help ensure that the content is indexed faster, not to mention that they help the content creators (you or your client) to establish their stake as the content originator in the case of syndicated or curated content.
Schema
Schema is a type of microdata that enables search engines to parse and interpret the information contained within the pages of your website more effectively so that they, in turn, may serve up more relevant results in search queries. It’s essentially like offering up a virtual business card to search engines with everything they need to place you in the search engine results pages.
Brought to You by Webydo.
See how Webydo fits into your design workflow and business.
Request A Live Demo
Caroline Reder. Full-time Content Manger at Webydo, communications professional and news junkie. Part-time surfer. Follow her on Twitter
Blog Menu
