Most graphic and website designers have a general knowledge about what search engine optimization (SEO) is and why it’s important. However, many still think that SEO is not relevant to the design process or can be implemented after the website is designed. Unfortunately, both of these beliefs are false.
How Web Design Impacts SEO
Website design and search engine optimization go hand in hand. If a designer ignores SEO best practices when creating a website design, this can negatively impact the site’s future SEO. Similarly, if SEO is implemented on the website with complete disregard for design best practices, it will negatively impact the user experience.
While it’s crucial for web designers to consider SEO when creating designs, it’s not essential that they have a comprehensive understanding of SEO. Rather, most website designers simply need to understand SEO best practices for design and keep an eye on how design is impacting SEO and vice versa.
SEO Best Practices for Design
The core function of search engine optimization is to tell search engines what your website is all about and make it easy for them to serve up the website to people searching for information.
Below are a few basic things to keep in mind as you design your next website.
Image Format and File Size
Did you know that Google and other search engines penalize sites that load slowly? The most common reason a website loads slowly (also known as “pagespeed”) is because of the images. Images that are too large or the wrong file format will choke pagespeed, negatively impacting SEO AND causing a poor user experience.
Start by choosing the right type of image format:
- GIF – Use if your image needs to be animated
- JPEG – Use if you don’t need a high image resolution
- PNG – Use if you need high image resolution (Source: Moz)
Next, make sure you are sizing the images properly. Don’t rely on a developer to resize the image. If it’s a thumbnail, make it a smaller size. If it only needs to be 700 pixels by 500 pixels, size it as such.
Need more in-depth information? Read more about image optimization from the Google development team.
Image Naming
Every designer has their own process for naming images. Many designers follow a naming convention that includes the client name, project or webpage, and either a date or the image dimensions. What does all this tell search engines? Absolutely nothing!
While you may use your own naming conventions for the image files you store on your server or computer, you need to optimize the names of the images for search engines for several reasons. First, the images on the website will be indexed and shown for relevant searches on Google and other search engines. Second, the image names will be read by screen readers for users that need different accessibility.
For these reasons, it’s important to apply more practical names and/or names that contain keywords. Now, it’s OK to name an image something like “company-homepage-main-accounting-firm.” This example includes the company name, the page location (for internal reference), the placement on the page (main image), and the keywords accounting firm. This tells search engines what the image is and gives them clues on how to index it. It also gives clues to anyone using a screen reader about what is on the page.
Image Alt Text
As website designers, we tend to have a lot of images for each project we work on. Naming the image files so they are SEO-friendly is one thing, but including alt text seems like an additional step. Before you dismiss this best practice as too much work, alt text helps quite a bit with SEO and is worth the additional effort.
While you likely want to follow a simplified naming convention for image files, alt text gives you a chance to really describe the image. Again, this is beneficial to SEO and accessibility. In many cases, the alt text may be a more comprehensive description of the file name.
Using the same example as above, if the homepage image for the accounting firm’s website is a group of individuals sitting at a table discussing a financial plan, you can include all that in the alt text. For example, great alt text might be “accounting team discussing next year’s financial plan.”
Incorporating Header Tags
Header tags on a website are instrumental to the optimization of each webpage. If you aren’t familiar with a header tag, it’s the H1, H2, H3, etc. on the page. A common way that designers inadvertently sabotage SEO is by replacing headers with images, which is bad for SEO.
Another common issue is not including header tags in the design or inverting the stylistic order (making the H2 visually bigger than the H1, or the H3 bigger than the H1). While you likely have a good design reason for any of the above, keep in mind that header tags are critical to SEO as they contain the most important keywords for the page and cue search engines and users on what the page is about.
For example, if someone is reading a webpage but the H3 is visually larger than the H2, they may jump to the H3 and skip over the H2, thinking it is more important. However, the search engine will do the reverse, thinking the H2 is more important than the H3. This can lead to confusion or misidentification of what is important on the page and negatively affect SEO.
A best practice is to:
- Always include an H1 on a webpage and make it clearly visible.
- Include H2, H3, and H4 if it is logical for the copy on the page.
- Design the header tags so visually they are descending in size (and importance).
Hierarchy in Navigation
When it comes down to it, website navigation is not the sexiest or most exciting part of website design. However, when it comes to web design, the navigation must be more functional than beautiful. This doesn’t mean that you can’t use interesting visuals for the navigation, it just means that it needs to follow logic.
There are a couple of things that website designers do that drive SEOs crazy, but design practices that affect SEO negatively are ignoring hierarchy in the navigation and including topics in the navigation that are dead links. When designing the navigation, ensure that all the subpages under the main navigation are clearly labeled and easy to access. While you may wish to simplify the navigation, search engines expect the navigation to follow logic and include all subpages.
Below is an example of the navigation for my agency’s website. When a user is on the website, everything listed in the navigation is clickable and links to a page. There is no duplication and there are no dead links. It all functions as it appears on the page. It would be very confusing to a user or a search engine if, for example, the services tab didn’t link to the services page or didn’t link to a page at all. In addition to being confusing, that type of example would lead to visual clutter.
Best SEO Advice for Web Designers
These five best practices are basic things website designers can incorporate into their designs to set a website up for SEO success. This is not an all-inclusive list, so if you want to dive deeper into how you can positively contribute to optimizing your designs for search engines and the user experience, I suggest following an SEO source like Search Engine Land or Search Engine Journal for the latest tips from SEO experts. You can also follow the Google Developer’s blog, but these first two are more accessible for non-developers or us creatives.
About the Author
Kara Jensen is the Creative Principal and founder of Bop Design, a B2B marketing and web design agency. At the agency, she pours her creativity into the conception and art direction of client marketing initiatives. Dedicated to communicating each client’s unique business value, Kara forges connections with target markets through strategic design and high-impact marketing concepts. Connect with her on LinkedIn.
Author: Spyre Studios