It’s hard enough trying to get your users to visit your website without having to worry about whether your website is good enough to get traffic in the first place.
As a web developer, we know you already have a lot on your plate – designing layouts, programming code – but don’t forget that it all starts with good old search engine optimization.
There are a million-and-one things that go into building a well-designed, well-optimized website that provides a good user experience while also being discoverable by search engines. SEO + web development come together to make that happen.
Web developers are usually more concerned with getting a website to work properly than how to get people to visit it. If you’re a web developer and want to take your SEO web development skills to the next level then this guide will help you cultivate your expertise.
We’ll cover how to optimize your site for SEO from the day you begin development and bring your website to its full potential and offer useful resources to help learn more about SEO in the context of web development.
The longer you neglect your website’s SEO, the harder it’ll be to deal with when your website’s SEO issues become too big and too numerous to ignore.
Why Is It Important for Web Development Teams to Know SEO?
Peter Kent is a world-renowned SEO and online marketing expert, the author of “SEO for Dummies,” and is considered one of the world’s leading experts on search engine optimization. In his Udemy course on SEO training for web developers on Udemy, he puts forward that websites should be designed with SEO in mind, and an SEO infrastructure needs to be put in place the moment development on a website begins.
When a user types a query into a search engine, the results that appear are based on key factors including relevance and authority. Relevance refers to how closely the website content matches what the user searched for. Likewise, authority is based on how trustworthy the websites are.
When a website is optimized from its initial stages, web developers can increase the chances that it is relevant for users’ queries and trusted enough to rank higher in SERPs. Even if you’re not an SEO analyst yourself, you should still be familiar with the basics of SEO and why it’s important for both small businesses and large enterprises.
Developers Are Rarely, if Ever, Trained in Basic SEO Standards
Many web developers don’t have the luxury of being trained in even basic SEO. Web development and online marketing skills – of which SEO is one – are very different skill sets that, typically, are managed by different teams in different departments.
Because of this, it’s common for development teams to focus more on the functionality of the website itself instead of on winning the favor of search engine algorithms.
The temptation to have a completed website up and running so you can get traffic and revenue as quickly as possible is understandable, but this is short-term thinking versus a long-term strategy, and it may harm your business later on.
Other web developers acknowledge the importance of SEO standards but don’t understand optimal ways to apply them. They may take the initiative to learn, but marketers and web developers often have very different personality types – marketers being more creative or social and developers being more analytical and inward-looking. Specializing in one and then cross-training in the other requires some major mental gear shifts that would be difficult for anyone.
That makes it difficult to know what developers should focus on without having to overload them with information. You may know theoretically how to build a functional and well-optimized website that has a good UX, but that’s very different from rolling up your sleeves and actually coding one from scratch yourself.
Problems Arise When SEO Issues Are Buried Under Legacy Code
A common problem with enterprise websites is for development teams to just build on the foundation of the current website without fixing its original issues in the same way you might put a fresh coat of paint on a house to cover up a termite problem.
When SEO issues like poorly-optimized title tags, confusing website architecture, or non-compressed images become buried underneath walls and walls of code that no one has touched or even looked at in years, it makes it extremely difficult to find the original roots of the problem. This causes SEO analysts to dig through code that they may not understand in order to attempt to identify problems.
Without the guidance of the web development team, they can also risk destroying a website’s UX for the sake of making it run 1/10th of a second faster if they don’t test their optimizations in a closed-loop staging environment.
In most corporate environments, the web developers and the marketing team act independently as if they were separated by a brick wall. This ultimately leads to bad websites that are slow, buggy, confusing, and have nonexistent rankings and traffic.
It’s therefore in the best interests of the developers and the SEOs to work together and learn from each other. That begins by understanding how your web development choices affect your website’s overall SEO health, from the design choices at the top right down to the individual lines of code.
Web Developers Should Have a Seat at the Marketing Table
The relationship between marketers and developers often includes marketers making (sometimes very large) requests of developers, which can lead to pushback and, at times, a web development vs SEO attitude. Both sides need to remember that the end goal is a higher quality site that users want to visit and Google brings to page 1. That’s what needs to happen for devs and marketers to enjoy success.
The goal for marketers should be that devs are proactively working with SEO professionals, not fighting them for control of the site. The best results happen when the SEOs and the developers take a collaborative approach as part of a strong SEO team.
Web developers who are knowledgeable about SEO are best positioned to diagnose and fix web issues. They know better than anyone what bloated or unused code needs to be simplified or removed for a page to be crawled, an image to be compressed, and a title tag to display properly on the SERPs. Marketers can’t always see all of the technical details involved in search engine crawling, indexing, and ranking of a site before it’s too late to do anything about them.
Hiring a technical SEO consultant who understands the complexities of both web development and SEO can help you catch issues before they even cause problems.
If you want to ensure you don’t have an SEO disaster on your hands, web developers should be involved in all stages of the website creation process. This includes understanding how to configure URLs, apply canonical tags, set meta tags, identify Javascript issues, and more.
Developers should also get involved when changes are made to a website, which can sometimes disorient search engine crawlers. For instance, with WordPress, adding new plugins or making core edits can change how your site renders in the eyes of search engines.
SEO Tips for Web Developers
Now that we’ve covered why web developers must be trained in basic SEO, here are some of the most common ways you can optimize your websites to achieve better rankings in the SERPs.
Website Performance and Page Speed
A study done by Akami Developer has shown that 47% of consumers expect web pages to load in two seconds or less and 53% will just go somewhere else if the site takes more than 3 seconds to load.
The same study also reveals that people are less likely to complete a transaction on websites that take more than 3 seconds to load, resulting in a loss of half of their revenue.
To ensure that your website is operating at optimum speeds, you should:
- Compress files and images
- Compress and minify CSS, JavaScript, and HTML
- Improve server response time
- Remove render-blocking JavaScript
- Implement dynamic rendering of Javascript using tools like Prerender.io
- Use browser caching to your advantage
- Using a CDN for faster and more reliable use of your site
Every technical SEO expert and web developer should understand that loading times are critical for both rankings and conversions. It’s important to note that when Googlebot crawls your page, it doesn’t always wait for all the JavaScript to load before indexing. Leveraging Javascript rendering tools like Prerender.io can make sure that Google will access all of your content and links since it renders pages in advance.
Page speed tests can help you uncover issues that would be otherwise difficult to diagnose. Here are a few resources that can help you optimize your site speed:
- PageSpeed Insights: Provides suggestions to improve your page for both mobile and desktop.
- GTMetrix: Provides a grade for page speed, suggests ways to improve the page load time, highlights how many requests are being made by your site, suggests what is slowing down your website, gives Google Page Speed insights recommendations, etc.
- Pingdom: Provides a grade for speed, shows you how many requests are being made, what elements are slowing down your site, and so on.
- Webpagetest: This allows you to run various tests on page speed through different locations around the globe.
- Google Lighthouse: Provides website performance testing and analysis based on best practices outlined in Google’s Web Fundamentals. It’s also integrated into Google Chrome Developer Tools making it easy and convenient to use.
Most of these page speed test tools also offer suggestions on how to boost your page speed.
However, this is just the beginning of an ongoing process – monitoring speed will help identify problem areas that could arise over time. Continuously optimizing your page speed and performance is an ongoing necessity.
Website Structure and Organization
Google prefers websites to be well-organized and have high-quality content that offers value to its users. A website site structure extends to its tags, its metadata, categories, and navigation menu. That means you need to take advantage of the HTML tree structure to help Google find important pages and generate sitelinks.
A proper website structure allows you to:
- Generate site links that are used to create connections to other related websites and pages. This, in turn, will boost your rankings and help users find your site on the SERPs.
- Improve site crawling and indexing making the most out of your crawl budget.
- Improve site speed and performance by eliminating over-usage of scripts or CSS files which can slow your website down.
Here are some steps you can take to plan your website architecture with an SEO focus in mind:
- In the planning stage, map out the hierarchy of your website. This will help you to identify the structure of your website and let Google know that certain pages are directly related. Also, you’ll be able to view the navigation and layout from your users’ perspectives.
- Use tag management systems to help streamline your efforts and create efficient structures for content tagging.
- Keep the main categories to a minimum. The main categories appear in the upper fold of your website and they should be used to show users how they can interact with your site.
- Write your site navigation in HTML or CSS. Javascript navigation can hinder search engine crawling.
Metadata and URL Structure
Metadata can include titles, meta descriptions, and URLs. This is what helps search engines understand the content better. A meta description is an HTML element that describes the web page within search engine results. The optimal character length for a meta description is 150-160 characters, and it is an important driver of click-through rate (CTR).
Meta descriptions should be written within the context of a user’s search query. Don’t just write a text description about your website, instead, write something that relates specifically to the user’s desired search result as it will boost the CTR.
The URL (Uniform Resource Locator or web address) of your web pages is just as important as the metadata. It must be short, simple, and definitive, contain relevant keywords, and should use hyphens instead of underscores or spaces.
Here are two examples of SEO-optimized URLs:
With these examples, you can see:
- A primary keyword is placed at the beginning of the URL
- It’s short and gives a clear indication of what the page is about.
- A hyphen separates keywords instead of underscore or space.
Lastly, your URL should also relate to your logical website structure and navigation.
XML Sitemaps and Robots.txt
An XML sitemap is a text file that lists all the pages of your website and other content within the site. It allows Google to easily navigate your site, recognize new pages, notify search engines of any changes or updates, and track any potential errors.
Sitemap files should be submitted to Google via Search Console and reside in the root directory of your website’s server.
Here is an example of a simple XML sitemap of a URL:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/foo.html</loc>
<lastmod>2018-06-04</lastmod>
</url>
When creating an XML sitemap, follow these best practices:
- Add only canonical URLs
- Use uniform, qualified URLs. For example, if your homepage is www.example.com/foo, the canonical version should not include any directories or subdomains such as example.com/shop or www.example.com/shop/socks.
- Google disregards <priority> and <changefreq> values
- For media such as images and videos, add the image file extensions to the sitemap on <image:image>
- Include a link to your sitemap on each page of your website, in particular on your homepage.
- To prevent duplicate crawling, don’t add sessions ID to the sitemap
- If you want to serve alternate URLs for additional languages or regions, you may include hreflang in either a sitemap or HTML tags to indicate
- For non-alphanumeric and non-Latin characters, use UTF-8 encoding
- Sitemaps can include up to 50,000 URLs or have a maximum size of 50MB. If your sitemap is larger than this, you’ll have to break it up into smaller sitemaps.
- If the <lastmod> value is always accurate, Google will use it. The <lastmod> value can be used to indicate when the page was last updated.
XML sitemaps are great for organizing your pages, but they do have some limitations. To get the most out of them, you also need to create a robots.txt file.
Robots.txt is an important factor in the Googlebot crawl process. It allows you to specify which pages, groups, or directories you want to be crawled and indexed and which should be excluded. The robots.txt file is a text file placed in the root directory of your site and tells search engines how to behave when crawling your pages.
International SEO and Language Targeting
An important factor in web development and SEO is making sure your website can be easily accessed by users across the globe. That’s why your website must follow website localization and international SEO best practices – especially if your audience is global.
If you’re developing a website for an international brand, you might need to ensure its pages are translated into the appropriate languages, that the locale is set properly, and that your website’s language target matches a user’s geographic location.
Similarly, if you’re working on an eCommerce website, you’ll also want to make sure currency and currency formatting matches that of the user’s locale regardless of their physical location
The first step is to identify whether you want to offer different languages or redirect users to local URLs based on their language and locations. To do this, consider your target market and customer base, then you can identify which languages or cultures you need to support.
Consider whether subdomains or subdirectories would be the best option for your internationalization needs. Breaking content down by language and location could reduce the crawl budget issues and improve page speed while also improving performance and user experience. Subdirectories are the preferred method because they require less work rather than optimizing multiple domains.
An example of a subdomain is shop.example.com while a subdirectory may look like this example.com/shop.
ccTLD or country code top-level domain allows you to use a specific country code top-level domain such as .us for users in the United States, or .uk for those in the UK. It gives you the advantage of offering country-specific content without requiring you to maintain separate websites or subdomains.
You can check out this full list of ccTLDs and their availability with different domain naming systems.
Use Hreflang tags to tell Google and other search engines about the language and region of your target audience and which URLs they should index and show to users. Search engines must be able to distinguish multiple language versions of the same page so they know which version of a page each user is supposed to get.
Hreflang tags can be placed in different areas of your website.
In the page header, use the following HTML tag to tell Google the different languages and regions for that page.
<link rel="alternate" hreflang="lang_code" href="url_of_page" />
Here is an example:
<head>
<title>Widgets, Inc</title>
<link rel="alternate" hreflang="en-gb"
href="https://en-gb.example.com/page.html" />
<link rel="alternate" hreflang="en-us"
href="https://en-us.example.com/page.html" />
<link rel="alternate" hreflang="en"
href="https://en.example.com/page.html" />
<link rel="alternate" hreflang="de"
href="https://de.example.com/page.html" />
<link rel="alternate" hreflang="x-default"
href="https://www.example.com/" />
</head>
For the HTTPS headers, you can use the following format:
Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...
Here’s an example for German speakers from both Switzerland and anywhere.
Link: <https://example.com/file.pdf>; rel="alternate"; hreflang="en",
<https://de-ch.example.com/file.pdf>; rel="alternate"; hreflang="de-ch",
<https://de.example.com/file.pdf>; rel="alternate"; hreflang="de"
For sitemaps, here’s an example of a sitemap containing two URLs:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://www.example.com/english/page.html</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="https://www.example.com/deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="de-ch"
href="https://www.example.com/schweiz-deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="en"
href="https://www.example.com/english/page.html"/>
</url>
<url>
<loc>https://www.example.com/deutsch/page.html</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="https://www.example.com/deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="de-ch"
href="https://www.example.com/schweiz-deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="en"
href="https://www.example.com/english/page.html"/>
</url>
</urlset>
In the past, developers would use URL parameters or JavaScript to redirect users to the appropriate page, but Google recommends using hreflang tags instead. The HTML link element rel=”alternate” hreflang=”x” is used for marking up alternate language versions of web documents. You can place this element in three sections in the source code of the header on every page, the HTTP header on web server control pages, or within XML sitemaps.
JavaScript SEO Tips and Tricks
JavaScript is a programming language that may be an integral part of your web app’s architecture and design, but that doesn’t mean it can’t be used for SEO. Here are some Javascript SEO tips and tricks to keep in mind when developing a website with Javascript:
- Use Javascript in a way that doesn’t block Google from crawling it
- Use the HTML of your webpage to create a complete, crawlable index. If Javascript is blocking search engines from crawling any part of your website, it will only receive the content you want to be indexed on Google
- JavaScript isn’t turned off in all search engine bots by default. You can change this in settings for some bots, but not for others
- Ensure any code you write with Javascript follows best practices for developing web applications and does not break search engine crawlers
- When it comes to SEO, make sure that your links are set with the correct HTML anchor tags and anchor text. The href attribute must contain the URL of the page
- Use tools like Prerender .io to help with the dynamic rendering of Javascript web pages
You’ll benefit from optimizing the Javascript as it will improve the indexing of your website and enhance the user experience.
Image Optimization
People process images faster than they do words, so images can often make an emotional connection with your users in a way that pure text content can’t. The tradeoff is that images take much more data than words to process and render, which is why they can slow down your page speed. That’s why you should optimize your images to reduce file sizes in order to improve loading time.
The first step is to make sure your images are large enough for the resolution they need to display correctly while being compressed as much as possible without depreciating the image quality. You should also make sure that their file sizes are not too large and use a proper file format, such as JPEG, and PNG for logos.
Once you’ve made sure your images are set with the appropriate size and format, you can move on to optimizing their file sizes which will reduce page load time. To do this, you can compress your images with tools to optimize file size.
You must also include relevant keywords in your images’ file names and alt text. Virtually every search engine reads this information, so you should include relevant keywords to inform search engines what your images are about.
When you follow these tips and tricks for optimizing images, they will be search engine friendly and ready to take on Google.
SEO Resources for Web Developers
There are a variety of resources that can help web developers be better SEOs, and help teach marketers how to better talk to and work alongside web developers.
Here are just a few to start with:
Google: Search for Web Developers
One of the best resources for web developers to learn SEO is Google itself. Google has an SEO web development resource center for those who want to learn more about SEO-friendly web development. If you’re looking for information on how to optimize for search engines, their SEO guide for web developers is a good place to start.
It includes everything you need to know about how search engines crawl your website, index content, and the best SEO tips for web design.
For more up-to-date information on SEO, check out Google’s official blog page which is updated regularly with posts about web development and SEO. It’s the ideal starting point for aspiring Google SEO developers.
Google SEO Starter Guide
This is a comprehensive guide to help webmasters improve their SEO by showing what you can do to make sure your site is crawled and indexed correctly and how to effectively use tools such as Google Search Console.
It’s one of the SEO cheat sheets for web developers looking to develop an SEO strategy that will give them a competitive advantage on search engines.
This SEO checklist for web developers has everything you need to know about the SEO basics, including how to establish your business or website on Google, how to choose the most relevant keywords and so much more.
Moz Beginner’s Guide to SEO
If the Google SEO Starter Guide is too much for web developers to take in, check out the Moz Beginner’s Guide to SEO. This is a free SEO checklist for web developers that covers all of the basic information you need to know about SEO.
This guide is great if you’re also looking to brush up on your SEO developer skills before trying new SEO tips for web design. It covers everything from how search engines crawl web pages to effective ways to build links that boost rankings. It’s sure to be a useful reference for web developers that want to learn more about SEO.
Get Started with Google’s Recommended Solution
SEO is no longer effective unless you’re constantly working on and optimizing your website, even after a good SEO infrastructure is put in place from the beginning. That’s where Prerender comes in.
Prerender is one of Google’s recommended solutions for prerendering JavaScript pages. We offer innovative solutions such as dynamic rendering, complete caching of pages, and transforming single-page applications into HTML pages.
By using Prerender, your websites will be crawled and indexed faster, and you’ll boost overall user experience. Plus, it’s free for the first 2,000 pages. Get Started Today For Free.
