SEO Fundamentals for Web Designers

There’s no question that search engine optimization, or SEO, is a major consideration for any website. When your website is optimized for search engines, your pages are more likely to show up in search results — which means more traffic, more sales, and more ad revenue.

The trouble? Many website owners don’t think about SEO until the website is already live and the design is already complete, failing to integrate a manual outreach strategy. If you can start the optimization process during the design phase, it’s easier to build pages that support the site’s overall SEO efforts.

Mobile-Friendly Designs

As a web designer, the most important thing you can do for SEO is to create a mobile-friendly version of the site. After all, in 2018, Google announced that it would be using mobile-first indexing. That means that it will be looking at your website’s mobile version first as it’s deciding how to rank pages.

What does that mean for you? You must have a version of your website that’s designed specifically for phones and tablets. This must be a responsive design — in other words, the site must automatically load the mobile version whenever a person accesses it using a mobile web browser. Elements of a strong mobile-friendly design include:

• Clear navigation: On a desktop website, you can offer two menus with multiple options. On a mobile browser, you’re more limited. Consider creating two or three buttons for your main calls to action. Then, put your other navigation links in a “burger” menu (the three horizontal lines that expand into a menu when tapped).
• Appropriately-sized images: The mobile version of your site should resize images to be proportional to the mobile screen. That way, they create a strong visual effect without taking up the entire screen.
• Button size: When a person uses your mobile website, they’re probably clicking with a finger rather than a mouse pointer. Your buttons should be large enough so that a user can tap them easily.
• Font size: Make sure your font is easy for users to read on a small mobile phone screen. If they can’t read it, they’ll click the back button immediately, which can negatively impact your SEO.
• Videos: If you’re embedding videos in the website, don’t use players that won’t work on mobile devices. For example, Google specifically requests that web designers don’t use Flash.
• Duplicate content between desktop and mobile: When you’re designing a mobile website, make sure that it contains the same information as the desktop site. That way, the user gets the same experience on both versions.

Not sure how your designs are working on mobile devices? Google offers a Mobile-Friendly Test to help. Once your developer has the page uploaded, simply enter the URL into the test to find out how it holds up. This is an important resource — it’s free, it comes directly from Google, and it can give you immediate feedback to help you improve SEO.

Use Headings and Subheadings

When you’re designing a website, the look and feel of each page is important. Before you turn to images and special fonts, consider SEO. One of the most effective things you can do to optimize the design is to use headings and subheadings on each page. This does several things in your favor. It helps Google decide if your page is relevant — if your primary keyword appears in the H1 tag, as well as an H2 and H3 tag, it lets Google know that the content matches what users are looking for.

Headings and subheadings also improve the user experience. They allow readers to quickly skim your page to find out if it provides what they’re looking for. Since internet users have notoriously short attention spans, a clear page hierarchy can keep them on your site longer.

Do you write page titles for your websites? It’s important to be accurate with the title tag. This tag tells search bots what your page is about; Google uses this tag to determine whether the rest of the page is relevant to the title. Usually, it’s a good idea to use your SEO keywords in the title of each page. If you need more help optimizing content, a company like LD Sydney SEO can help.

Optimize Website Navigation

Your website’s navigation structure is a big part of SEO. As the website designer, this isn’t always up to you — you might be working with clients who determine the structure of a site. Whenever possible, however, Google advises you to create a hierarchy. In other words, don’t throw all of your link options at the user at once. Instead of giving the user 10 links on the homepage, consider offering just 4 or 5.

From there, you can present additional information in what Google calls a

”naturally flowing hierarchy. In other words, you can help users find the information they need on an intuitive path. If you’re building a website for a marketing company, you might present three links on the homepage: Portfolio, Services, and Contact. Under the Services link, you could offer a list of services, each with links for a page about that service. That way, it’s easy for potential customers to find what they’re looking for. Don’t go crazy with the link structure; it should not take too many clicks to get to the right information.

When it comes to the design of the navigation itself, it’s a good idea to use text rather than images. That way, Google’s search bots can read your navigation structure. Google specifically advises against using a navigation plugin. You can also help with SEO by building a page that’s specifically dedicated to the navigation of your whole site. A simple link tree shows users — and Google bots — exactly what they can find on your website.

SEO-Friendly Images

As the web designer, you’re probably in charge of formatting and placing images into the site — something that can have a big impact on SEO. When your images are optimized, it helps Google rank your pages higher. As the designer, these are some basic SEO guidelines:

• Select clear, visually appealing images to keep your readers on the page.
• Use standard formats for all images. This ensures that all internet browsers can read and display your images. Google recommends JPG, GIF, PNG, BMP, and WebP formats. Your filename extension should match the file type — in other words, you shouldn’t name a PNG file “imagename.jpg”.
• Resize the image to 72 dpi; then, use the minimum pixel width and height that you need for the website design. This keeps images clear but reduces the file size. Smaller files load faster, which helps with SEO.
• Use your SEO keywords in each image. If you’re writing a page about pool cleaning in Miami, for example, you might have images named “pool-cleaning-Miami.jpg” and “Miami-pool-cleaning.jpg”. This tells Google that your text and images are relevant. Your filenames should not be overly long or contain entire sentences.
• Keep in mind that Google prioritizes images. Graphics that are bigger and higher up on the page are considered more relevant and important than tiny images at the bottom of the page. You can capitalize on this by using a large featured image named with your primary keywords.
• Include ALT text for each image, and be sure to use variations of your target SEO keywords. However, it’s important not to stuff the keywords into the ALT tags; instead, use them naturally.

Improve Page Speed

Page speed, or the time it takes your pages to load, plays a role in SEO. Imagine that a user clicks on your page in list of search results. The page takes more than 10 seconds to load. During that time, the user gets bored, so they click back to the search results and choose another link.

How can you improve the page speed during the design phase? To start, you can opt for a design that’s not overly reliant on large images. The more images your page has, the longer it takes to load.

Are you creating a CSS for the website? Make sure it’s as minimal as possible; don’t include any code that isn’t absolutely necessary for your website..Take out any commas and spaces you don’t need. It’s also a good idea to eliminate any comments within your code. That way, users don’t have to weight for bulky code to load every time they navigate to a page.

Since Google wants to help developers and designers create faster websites — after all, faster load times mean happier users — it offers a tool to help you analyze your website speed. This page speed tool tells you exactly how you can optimize your design to speed up the site. While some factors will be out of your control as the designer, this tool can help you spot CSS issues and image-size problems.

Think About Website Usability

At the end of the day, Google and other search engines care about delivering a great user experience. After all, they want to retain users. If people can’t use your website, they’re unlikely to stay — and eventually, Google will figure out that users are leaving quickly. What does that mean? Your website is unlikely to rank well.

As a designer, you can do a lot to help with usability. Some factors include:

• Beautiful, uncluttered designs
• Clear calls to action
• Readable fonts
• Consistent branding
• Simple navigation

As you’re designing, think about what the users need. Then, make sure that information is highly visible and easy to find. In most cases, the most important details, buttons, and images should be at the top of the page. That ensures that users can get the gist of the page without scrolling or reading big blocks of text.

Search engine rankings are a competition between your website and all of the similar sites on the internet. When you start thinking about SEO during the design phase, you automatically have a leg up on other websites. With a little forethought and up-front effort, you can design a site that supports other SEO activities and builds a foundation for search engine success.