In this blog, you’ll learn about:
- What SEO-friendly web development is
- How WordPress and general ecommerce sites differ from others
- How to structure a website on mobile and desktop devices
In the digital age, your website is like your storefront. You want people to stop in, and you want to keep them interested so they convert into customers. So, how do you attract customers to your site? How do you build a website that represents you well and helps grow your business? With SEO-friendly web development, that’s how.
Here’s an introduction to SEO-friendly web development and seven basic guidelines to help you get started.
What Is SEO-Friendly Web Development?
Before we go any further, what exactly is SEO-friendly web development? How does it work? Let’s go over the absolute bare basics.
You’re browsing the internet using an application called a web browser. That could be Chrome, or Firefox, etc. When you type a website’s domain name into the URL bar, your browser sends a request to the web server that’s hosting that site’s files. Your browser then downloads those files, consisting of HTML documents, images, and videos. Finally, it renders them on your screen.
HTML and other languages used to display the files you’ve downloaded are called “front-end technologies” because they face the user. As you do things like submit forms or enter credit card info, the data you’re exchanging with the server is managed by server-side languages called “back-end technologies”.
You can think of it like the front-end and back-end workers at a restaurant. The front-end workers, like the hosts and waitstaff, manage the intake and delivery of customer requests. The back-end workers, like the kitchen staff, process those requests for the front end.
Web development is building the architecture of your website, like designing the floorplan of the restaurant and staffing it with workers. Doing this in an SEO-friendly way means setting things up to let search engines crawl and rank the site, attract users and provide a good user experience. It’s like designing and managing your “restaurant” to attract good reviews from critics, bring in customers and serve them well.
What Is SEO On-Page Optimization?
Let’s say you already have a site with some content. You’ve established the general layout and how to organize the pages. The way you label your site’s content is already starting to make sense to search engines as well as human visitors.
Some of your content might already be SEO-friendly, but some may be falling behind in terms of ranking. SEO on-page optimization is the process of ensuring that each of a page’s elements works in the interest of SEO at some level: text, buttons, images, headings – everything.
Your images should have alt text and titles that include keywords. Don’t settle for the automatic titles your camera generates. Go out of your way to change them into titles that make sense.
A human might see a pizza, but search engines only make sense of key terms. Phrases like, “Best Pizza Near Me,” sound a lot better to a computer than, “IMG_67493221.” The same goes for alt text: “A pizza glistens with sauce and grease in a dim room.”
Always remember that factors beside 800-word articles can work in the interest of SEO. You shouldn’t skimp out on other items, like images, just because they seem peripheral in comparison.
How Can I Handle SEO for Websites Step by Step?
Without further ado, here are five guiding principles for SEO-friendly web development that you can use to create a website that ranks well and attracts leads:
- Create crawlable site structures and URLs
- Target keywords in content and tags
- Use redirects when changing content around
- Utilize Schema markups for rich snippets
- Optimize your site for mobile
After reading this blog, you’ll know a bit more about how to SEO optimize an article and improve sitewide SEO.
1. Create Crawlable Site Structures and URLs
A big part of SEO-friendly web development is making it easy for search engine crawlers to navigate so that they can assess it and index it in search rankings. Your first step should be to design your site structure, URLs, and navigation in a logical way to make it easy to understand.
Site Structures
Imagine the crawler like a critic that comes in to report on your restaurant and convey what it’s like to potentially interested consumers. What impression would that critic get if it’s unclear which door to enter through, there’s unclear signage about whether to seat yourself or wait to be seated, and the menu is confusingly organized so it’s hard to order?
Poor structure makes it harder for them to assess you and will likely affect the user’s experience as well. As a result, the “critic” won’t recommend you as much as they otherwise might, no matter how good of content or “food” you serve.
To address this, your site should be structured in a logical hierarchy. The best analogy for this is a filing cabinet. Your site is the cabinet itself. The drawers are categories like “Products,” “Services,” and “About.” The folders within are subcategories, and the documents within them are pages for individual products or services.
For example, our Web Design page is the file in the Services drawer of the Frontier Marketing filing cabinet. We find it helpful to write out site structures like this during website designs:
- Home
- About
- History
- Team
- Products
- Product Subcategory
- Product
- Product
- Product
- Product Subcategory
- Product
- Product
- Product Subcategory
- Services
- Service
- Service
- Service
- Portfolio
- Contact
- Blog
URL Structures
Next, you have to label those pages correctly so that the crawlers can navigate them. Bots and users alike should be able to tell what will be on a page due to a hierarchical URL structure with consistent and predictable naming conventions.
When you create a new page, the URL should fit in logically with the rest. For example, if an auto shop adds new pages for dent removal, engine service, and brake lights, the URLs should be something like:
- autoshop.com/services/body-work/dent-removal
- autoshop.com/services/repair-work/engine-service
- autoshop.com/products/brake-lights
As you can see, you can tell exactly what pathways you follow to get to those pages and how they’re organized. The words, separated by hyphens (not underscores), make it easy for a crawler or a user to figure out where they’re going and what’s in store for them.
Navigation
Finally, you have to make these structures easy for users to navigate when they’re actually on the site. How do you arrange and label your links? Where do you direct users’ attention? This includes text links, the on-page content itself, and design elements in the template you’re using.
Make it as easy as possible to navigate your website structure so users can find what they’re looking for with as little thought as possible. Otherwise, that logical structure won’t do its job.
2. Target Keywords in Your Content and Tags
The next step to creating a site that’s easy for bots to index, and thus easy for customers to find and use, is keyword targeting. Keywords are the key terms that you want to rank for in search results. If you want to rank for “shoes,” then your site should feature the word “shoes” so that it appears when people search for that term.
Effective on-site optimization starts with including your keywords in your website’s content, title tags, and meta descriptions.
Keywords in Content
When featuring keywords in your site’s on-page content, it’s important not to “stuff” the content with keywords in unnecessary and unnatural places. Crawlers use machine learning to try and assess the relevance and usefulness of your content, not simply count the number of times you use the keyword. Keep in mind that you should be writing organic and relevant content for both bots and readers.
That said, here are places throughout your content where you should be trying to feature that page’s target keyword:
- The title, as close to the beginning as you can.
- The first paragraph of copy.
- At least one of the H1, H2, and/or H3 subheadings breaking up the copy.
- Multiple times throughout the body text, including variations. We try for about one per 100 words, though it’s more important for them to appear naturally than to hit a specific keyword density.
- In at least one alt attribute of an image on that page, such as the caption, description, or alt text.
- Once in the URL.
- Once in the meta description tag.
One place you shouldn’t be using keywords is in the anchor text for hyperlinks pointing to other pages of yours. That’s called keyword cannibalization and dilutes the page’s SEO value by redirecting it to another page.
Keywords in Title Tags and Meta Descriptions
Your title tag is maybe the clearest signal you give to a search engine regarding what your page is about. It should be 55-60 characters long, feature the target keywords as close to the start as possible, and still be readable and impactful for the user.
You can also brand your titles by including your brand name. Just be sure to separate these parts of the title with pipes (the | character).
Your meta description is the text that appears under your title on the search results page. Though it doesn’t directly influence your rankings, this is the advertising copy you use to entice users into clicking on your page.
It’s important to use your keyword here because Google will bold it, signaling to the user that this result features what they searched for. Keep the meta description to about 120-130 characters, feature the keyword early in the text, and try to hook the user into wanting to read the rest of the page.
3. Use Redirects for Changing Content Around
Often, when you’re moving around content or creating new content, you’ll end up with multiple pages with the same or similar content. This causes confusion for search engines, so it’s best to eliminate duplicate content and use redirects when changing things around.
If you temporarily move content somewhere else, or copy pages to a subdomain, or create new URLs for your content, the crawlers will treat these pages as duplicate content and penalize you. It doesn’t help that these multiple pages will be competing with each other for the same keywords and SEO rankings.
Instead, you should reduce these pages to a single strong page. A key part of this is using 301 (permanent) and 302 (temporary) redirects. These will automatically redirect users and bots from old URLs to new ones. That way, that page gets the full SEO value it deserves and users don’t have to deal with 404 errors and dead links.
Those 404 errors are just one type of crawl error your site may encounter. It’s too deep of a topic to cover here in detail, but Google has useful resources for learning how to deal with these and other crawl errors.
4. Utilize Schema Markups for Rich Snippets
One of the SEO trends we observed at the start of 2017 was that search engine results pages (SERPS) were increasingly focused on using Schema to display rich snippets. This trend has continued, so it’s wise to use Schema markup to help search engines understand your site content.
Rich snippets are search results with extra elements besides the URL, title and meta description. For example, if you search for a recipe, many results will have star ratings, pictures of the dish, calorie counts, preparation times, etc.
Schema markup lets you label the pieces of your content to give them context and help Google understand how it relates to other content. For instance, in your About page you can use Schema markup to indicate which pieces of content show your address, hours, etc.
This helps Google organize that information and potentially display it in a rich snippet on the SERP. That’ll not only boost your rankings, but also make you more attractive for users to click on.
5. Optimize Your Site for Mobile
Mobile-friendliness is one of the top factors that Google is pushing web developers to focus on. So, for your web development efforts to succeed, you have to make your website mobile-friendly.
It may surprise you to learn that Google now considers the mobile version of your site to be the primary, “real” version. This means that’s the version it uses for indexing. Why? Because more than half of all internet traffic now comes from mobile devices.
If you make your website with desktop displays in mind and skimp out on mobile users, your site will suffer for it.
A good place to start is to enter your domain URL into Google’s Mobile-Friendly Test. This test will measure your site’s mobile-friendliness and provide suggestions for improvement.
A big part of mobile-friendliness is on-page loading speeds. Google expects your above-the-fold (ATF) content to load in under a second, and 40% of mobile users will abandon your page if it hasn’t loaded in three seconds.
You can optimize your load speeds for mobile-friendliness in a number of ways, including:
- Optimizing image sizes or hosting them on a content delivery network (CDN).
- Utilizing browser caching to reduce the number of HTTP requests.
- Minimizing the size of your ATF content so that it loads within Google’s timeframe.
- Minifying code to improve caching and reduce bandwidth usage.
- Using Google Accelerated Mobile Pages (AMPs) so that Google stores the page in a dedicated cache to serve instantly later.
6. Improve Ecommerce SEO by Focusing on Keywords and Product Pages
In comparison to general SEO, optimizing ecommerce sites to generate the most conversions has some extra bells and whistles. Beyond keywords and hyperlinks, you need to develop an intimate understanding of what customers want and how to grab their attention.
Write Keywords for Different Intents
Accordingly, when you’re doing research for a blog on an ecommerce site, not only should you note consumers’ intent, but you should also create keywords and phrases for different types of intent.
One user might have informational intent, looking for how-to articles, factual answers to fundamental questions or purchasable solutions to a problem. Another user might have commercial intent, browsing among specific products online. The user with commercial intent has already intended to buy something. The question is, “What?”
Each stage of the marketing funnel requires its own key phrases. Informational intent is for the top of the funnel, while commercial intent is for the bottom.
Focus on Optimizing Product Pages
Every page affects how well your site ranks among search results, but product descriptions require more scrutiny, as they carry more weight. After all, you’re selling something, and you need to be extra sure that someone’s willing to buy it.
Helpful reinforcements for product pages include unique photos you’ve taken yourself, isolating or emboldening calls to action and including testimonials. As you revisit product descriptions, look for opportunities to include keywords as well as minute details that distinguish you from competition.
7. Take Advantage of WordPress Tools for SEO and Beyond
WordPress is a lot more than a tool for generating content. With the Yoast plug-in, it can also be an SEO tool that evaluates your content’s ability to rank and attract visitors. The free version is powerful enough to make sure your content is easy to read and let you know if you have too few or too many instances of a keyword. It even evaluates how well a picture’s articles adhere to SEO.
Yoast aside, don’t forget to use other facets of WordPress. In particular, categorize and tag your posts. Keep categories general and tags specific. Each post should fit into one category and have 2-5 tags.
Also, mind your metadata. Make sure custom slugs are short enough. 4-5 words are the maximum. Your slug should identify the primary keyword rather than the entire title. Meta descriptions should be no more than 130 characters, and titles should be no more than 60 characters. Finally, all pieces of metadata should include the primary keyword once.
Get Help from a Dedicated Team of Experts!
This is a lot of info to take in, and each of these sections is only a starting point that could have many more posts dedicated to it. So, why tackle this all on your own? The best thing you can do for your website is to get experienced professionals to support your web development efforts.
Frontier Marketing has designed and maintained websites for numerous organizations, including both businesses and nonprofits. Check out some of our website designs in our portfolio, and be sure to ask us if you have any questions about our SEO and web development services!
Editor’s Note: This blog was originally published in May 2018 and updated in March 2023.