The SEO Guidebook for Graphic Designers for The Web Design Process 

Your client needs and wants SEO and as a graphic designer you need to be able to meet that need and this SEO Guidebook will help.

The SEO Guidebook for Graphic Designers for The Web Design Process

Do graphic designers need to know SEO?

As a web designer should SEO be part of the initial web design process?


These are questions I see pop up on LinkedIn and in design forums almost every day. Often for larger organizations, developing a website or creating a social media campaign, graphic designers and web developers work closely with SEO experts to optimize their content, but how does everyone else handle it? Many graphic or even web designers find themselves in need of and SEO Guidebook of sorts.

Click here to jump down to a super handy SEO Guidebook in infographic form.


Design, marketing, SEO… all of these fields have very distinct rules, tactics and strategies that it takes years of experience to master. Unfortunately, all of these fields have a fair amount of overlap, interweaving and careful coordination to create an effective outcome for the business which can be confusing for both the business and the service providers. For clients, having a clear understanding of what services are going to be provide during the web development is essential and for designers having an SEO guidebook to help them along would be super beneficial.


In web design, a common scenario is for a small business owner to approach a web designer to build their new site. What that business owner really wants is a web presence, something to drive traffic and generate leads — a tool to grow that business. It’s also very common for people new to the world of online marketing to think that the design of a website is “all-inclusive”, meaning “I get my website built and then it shows up on Google and I start getting web traffic.” Any good graphic or web designer knows it doesn’t work that way, but that doesn’t mean that the site shouldn’t be designed with the best foundation to achieve SEO or marketing goals. That’s exactly why it’s important for designers to have an understanding of SEO and be able to design a website with the best opportunity to achieve SEO success.


Long story short, I guess when I hear graphic or web designers ask if SEO is important for them to know… the answer is YES.


If you’re providing a service, a good rule of thumb is to ask yourself, “is this important to my client?” If the answer is yes, then it should be important to you as well.


The foundation of design, marketing and SEO is to deliver unique content, that unique brand message that draws customers in. With that understanding this SEO guide for designers will provide critical insight into SEO fundamentals for the web design process of creating search engine friendly content.

In this SEO guidebook, we will cover some key SEO terms and basic rules that designers should know.

page divider

Top SEO terminology with definitions


  • A keyword – A word or phrase which users type into the search boxes to find specific businesses or information. We need to add the top keywords to web pages and efficiently into content to make the site easier to be discovered.


  • Keyword density – The frequency as to how often a keyword should be used on the web page. If the keyword density is too high, then it may adversely affect the page rank.


  • Page rank – Google determines the popularity and trust associated with a page link by assigning a rating between 0 & 1.


  • Link building – Linking external sites to your web page. Having more number of links from high profile pages can increase trust and in turn page rank.


  • Meta description – The text as a description about your webs page displayed on the search engine result pages.


  • 301 redirect – A server redirect, which is ideal to remove duplicated content.


  • Indexing – Adding page details of web pages to search engine indexes.


  • Alt text – The short description added to an image or graphic. It needs to be done correctly to ensure its discoverability as search engine bots will not understand an image as such.


  • Bot (search engine spider, crawler, search robot) – An algorithm based program which scans each webpage content to determine the page ranking of each.


Optimizing a design requires significant time and effort. It will be ideal to incorporate the SEO skills into the design services you offer to ensure optimum online benefits. Often times, businesses new to web development or online marketing aren’t aware of what they need. While you, the web designer, can implement structural best practices such as; responsive mobile friendly design, SEO optimization plugins like Yoast SEO for WordPress, and setting up the correct title tags you may be relying on the client to provide content.


If you’ve been doing this for any length of time, getting quality content from a client is like pulling teeth. Since content will be one of the driving factors for successful SEO, if you’re struggling in this area, one thing you can do is simply make the client aware of it’s importance on the front side making sure the client has an understanding that the responsibility of producing content is theirs. Another option is to outsource seo copywriters that you can offer up as an additional service.


page divider

SEO Guidebook for Designers Part 2: Fundamental SEO rules designers need to stick to.


SEO rules for designers


Ground-rule: Don’t cheat, be genuine


If you think that you can outsmart the Google algorithms with your smart cheats, you are wrong. Google has streamlined its algorithm to valuate web pages highly over the last several years, and you cannot fool Google. Be aware that there are SEO Services offering up cheap and fast benefits. If you’re not well versed in SEO tactics, stick to making sure that you’re offering up the best on-site protocols for your client.


Rule #1: Work closely on keywords


Keywords are important for navigation and user intent. You need to be aware of keywords and phrases that potential customers would identify with. Use them effectively, but judiciously along with other words and phrases related to them naturally. Incorporate them effectively in sentences, headlines, descriptions, links, and alt texts.


Rule #2: Content first


Content is always the king in terms of SEO and designers should also focus on the quality of various types of content as text, images, infographics, videos or anything along with the overall aesthetics of the design. Even if you create the most beautiful and elegant site, it will not be admired by users (as well as by search engines), if the site doesn’t have any worthy content as people want.


I’m sure that most of you have heard that “content is king” so many times that it’s lost all effect. So, how important is content?


Content affects SEO on so many levels the most important probably being search rankings. Just take a look at Google’s placement of “featured snippets” in the search results page.

featured snippets


Rule #3: Structured Data


Structured data or what I like to refer to as “coding your content” is the specific mark up that you should implement as part of your design structure. There’s a common misconception that structured data produces featured snippets like the example shown above. That’s not true but, it is very helpful to add structured data to your content especially for eCommerce websites.

structured data markup


Using markup to enable rich product results lets you attract potential buyers while they are searching for items to buy on Google or images that include products you sell. Maintain the accuracy and freshness of your product information, so your customers find the relevant, current items they’re looking for.


Rule #4: Clean code


In SEO, clean code is the most searchable code. Use a reliable text editor to build your web pages and learn how to create clean HTML codes. The conceptual structure to be followed is navigation, then H1 tag, and next to the first paragraph. Include descriptive tags whenever possible. Also use the syntaxes as ‘UL’ for the lists, ‘H tags’ for the headings and subheadings, ‘P’ for paragraphs, and ‘STRONG’ for bold text. Also, try avoiding overuse of Divs.


Rule #5: URL Structure


You’ve probably heard the term search engine friendly URL by now. If not, it’s important to make sure that the site you design has them! URL’s are more than just a path, they are your site’s core naming convention and they are crucial to providing users and search engines context as to what the page is about.


Following are two example sets of URLs: webdesign/mobile-friendly

You can see that the second set of urls doesn’t really make a lot of sense and is certainly not helpful in telling the user or search engine what the page is about. This type of structure is a common default for may CMS platforms such as WordPress, but can be easily customized.


Rule #6: Meaningful links


Search engines pay close attention to links and the keywords used for links to define it accurately. So, avoid the conventional “see more” or “click here” types of links. The link text should give a clear idea to the user as to where (what kind of content) it will take and what they can expect.


More relevant the link texts are, more findable and popular the page will be. However, avoid going overboard and building links to mislead the users to land on something irrelevant.


Rule #7: The role of title tags

role of title tags

Each page of a website should have an appropriate title with the site name and a short description of the page. Altogether, the ideal title text length is 60 characters. You can try to include a keyword also as this is what appears on search engine page results and give the users a snippet of information.


Rule #8: The Role of Social Sharing


Adding social share buttons is one of the easiest things to ad to a website and is often overlooked by designers. Typically, business owners new to the process only think about their social channels, but it’s their viewers who make this this simple and often overlooked feature beneficial to a website’s seo.


  1. It allows you customers to share your content, products, images.
  2. It makes it easier to build social reviews and brand mentions.
  3. It allow your website to gain “natural inbound links”.




Rule #9: Cut Down Load Time


a) Cut Down on Flash Animations

While they may look nice, Flash animations can add some serious latency to your website. This doesn’t necessarily mean that you should avoid them altogether, but rather keep them to a minimum. Cluttering your website with a Flash-based intro, Flash ads, Flash pop-ups, and other Flash elements can take a toll on visitors’ bandwidth, slowing down their load times to a crawl.


b) Choose a Reputable Host

Your choice of web host will also play a role in your website’s speed. Opting for a cheap shared plan by some fly-by-night hosting company will likely come back to haunt you. Sure, you may save a couple of bucks initially, but you’ll lose far more in terms of visitors and sales. Spend the extra money by signing up for good hosting plan from a reputable, trusted web host.


c) Enable GZIP Compression

Wouldn’t it be great if you could compress your website’s files instead of forcing visitors to download the original, oversized file? Well you can, thanks to a special type of compression technology known as GZIP. Using this technology, you can compress large pages so they are smaller, and thus take less time to download. According to Yahoo, GZIP can reduce download times by as much as 70%.

To enable GZIP compression, add the following code to your site’s .htaccess file:

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

<files *.html>

SetOutputFilter DEFLATE



Pro Tip: You should be cautious when editing your .htaccess file and save a backup before making any edits. If you don’t feel comfortable making these changes, hire someone who knows what they are doing. For more detailed information about how to edit your .htaccess file click here.


d) Enable Browser Caching

Browser caching allows visitors to store parts of a website locally within their web browser rather than downloading the entire page/file each time they attempt to access it. If you are using a content management system (CMS) like WordPress, you can download one of the many browser caching plugins for your website, such as WP Super Cache or W3 Total Cache. If your website doesn’t feature a CMS, you can enable browser caching via the .htaccess file.




Remember search engines are meant to find what humans search for. So, the best way to make your designs findable for search engines is to make it so for real humans. Your job as a designer here is not to create a unique and creative solution to a problem. This problem is to serve your users with the best of what they want to thereby making your creation more popular and acceptable.

If you want to take a piece of this SEO Guide for designers with you, check out the infographic below, courtesy of Webydo, or better yet, bookmark this page and come back again :)


a graphic designers guide to seo