What Frontend Developers Need To Know About SEO
What Frontend Developers Need To Know About SEO
So you’re a frontend developer, with your fancy setup and expa(e)nsive screen, bla bla bla. Let's talk about your role in SEO.
So you’re a frontend developer, with your fancy setup and expa(e)nsive screen, bla bla bla… 🫡
You wield your code like artists with their brushes, crafting user experiences that are both visually stunning and functionally seamless. I’d say that’s enough responsibility for one human, but on the other hand, let’s pause for a moment and ponder—does your responsibilities end at pixels and layouts? Maybe, maybe not.
I've found myself in situations where I've had to tweak frontend code to meet the standards of Search Engine Optimization (SEO). And this is not because the developer didn’t do a good job; it’s just that not many frontend developers actually pay attention to these things.
You could argue that SEO is not within your scope of work, and that’s a valid point, but I believe with great power comes great responsibilities. In most cases, most of your clients will have no idea what SEO is, so if you’re building a website for someone as a frontend developer, it’s your mission (should you choose to accept it), to understand basic concepts of SEO and apply them within your development, and that’s one of the things that’ll make you stand out of the crowd.
So here we are; based on my experience around SEO and frontend development, I will be the man in the middle of the bridge, telling you, the frontend developers, what the parties on the SEO side want to see on a website. And I promise to keep it as short as possible so you can get back to writing your codes, nerd 🤓.
Note that this might not apply if you’re developing a project that doesn’t require SEO, e.g., a user dashboard.
To give a quick run-through, here’s what we’ll be discussing:
Mobile Friendliness: Cos’ it’s 2023, not 2003.
Make URLs and paths clear and simple.
H1, H2, H3, H4, H5, H6… these tags are not for fancy.
Speak to search engines using structured data and schema markup.
Optimise images appropriately.
Write clean codes as neat as a pin.
Simplify navigation & sitemap for easy exploration.
Use meta tags to provide a glimpse of your webpage.
Links must be intentional.
Make webpages FAST like Usain Bolt.
1. Mobile Friendliness: Cos’ it’s 2023, not 2003
Because you (as a developer) work on a desktop (some of you even have larger-than-life screens 😀), the first webpage version you develop is always the desktop version before making it responsive. With that, it’s easier to unconsciously give more priority to how the desktop version of a webpage looks.
However, aside the fact that 92.3% of internet users access the internet using a mobile phone, Google now uses mobile-first indexing. This means that when Google considers to rank a website or not, it predominantly crawls the mobile version of the webpage first — using a smartphone agent.
This implies that if your site sucks on mobile, it doesn’t matter how it looks on a desktop; Google might not rank it well. It's like wearing fancy shoes but hiding them in the dark; nobody will see how cool they are.
Therefore, put more intentional effort into making sure the mobile version of a webpage looks good and responsive on different devices.
HINTS:
1A. You can use this mobile simulator extension to test webpages across various devices quickly.
1B. Use relative font sizes (em, rem, vw) to ensure text remains readable across different screen sizes.
1C. You can include the viewport meta tag in your HTML to ensure proper scaling and rendering on mobile devices. But this doesn't apply in every case.
1D. You can use CSS media queries to apply different styles based on screen width breakpoints.
1E. You can use responsive images with the srcset attribute to serve different image resolutions based on device capabilities.
There’s more to mobile responsiveness, but these are the ones I can think of right now. Be sure to read more on it.
2. Make URLs and Paths clear and simple
The URL of a webpage plays a significant role in SEO (Search Engine Optimization). During development, here are some factors to pay attention to:
2A. Keep it Short: While descriptive, keep URLs as short as possible without sacrificing clarity. There are some words on the SEO streets that the shorter the URL, the better your ranking chance. And why could that be? Because Google loves good user experience. And a shorter URL means it’s easier for the user to memorise, if they need to.
⛔ Don’t do this: https://website.com/our-pricing-and-fees.html ✅ Do this: https://website.com/pricing 2B. Include Keywords: Ensure that the main keywords of the page are included in the URL.
⛔ Don’t do this: https://example.com/?product-id=1203✅ Do this: https://example.com/product-name 2C. URL Capitalization: If your URL has uppercase letters and a user links to lowercase letters, it could end up as a 404 error - a rare occurrence, but it does happen.
Quick solve? Enforce casing & redirect from one version to the other. I strongly recommend all lowercase all the time.
⛔ Don’t do this: example.com/Test✅ Do this: example.com/test And ensure example.com/Test redirects to example.com/test.
2D. Hyphens (Dashes) vs Underscores: Search engines see hyphens as spaces (e.g. “how-to-fry-goat” is “how to fry goat”). Underscores are seen as… underscores. Therefore, avoid using underscores in URLs.
2E. Canonical URL: Often referred to as the "canonical tag" or "rel=canonical", is an HTML element used in web pages to indicate the preferred version of a URL when multiple versions of the same content exist. So, if you have two pages with very similar content, to avoid confusing search engines, you can indicate which page search engines should rank, using a canonical tag. Here’s an example:
3. H1, H2, H3, H4, H5, H6… These tags are not for fancy
H1, H2, H3, H4, H5, and H6 heading tags… are arranged that way according to the order of importance in SEO, and it’s very easy to use them loosely if you’re unfamiliar with their role.
Ideally:
3A. H1 tags denote the most important text on a page, such as the main or hero title. It should only be used ONCE, based on personal preference.
3B. H2 and H3 tags are commonly used as subheadings. They’re used for important texts that support the title. Any text in H2 will be seen as superior to the text in H3, according to how search engines work.
3C. Finally, H4, H5, and H6 tags may provide further structure within subsections. I commonly advise developers not to go beyond H3 or H4 unless it’s a long page.
3D. Simpler Heading Structure: There are words on the SEO streets lately that the simpler your heading structure is, the higher your ranking chances. Here’s how it was illustrated, and you can follow the conversation here on Twitter.
3E. Font Size and SEO: The font sizes you use on a web page are mostly just aesthetics and do not affect SEO. If you use 14px for an H2 subheading and 18px for an H3 subheading, Google still considers the H2 subheading as superior.
4. Speak to Search Engines using Structured Data and Schema Markup
How does Google know that the webpage in the screenshot below has 1,665 (4.3 stars) reviews on it?
It’s called structured data.
Search engines aren't mind-readers, and they don't see web pages like we do. When you want a search engine to understand something on your webpage, you can't just hope it figures it out magically. So, you have to give it a nudge in the right direction. That's where structured data and schema markups come into play.
It is an extra code added to web pages to provide search engines with specific details about the content. And it enhances search results by showing rich snippets with more information, like ratings or prices.
In layman's terms, it’s a way of telling search engines, “This is what this is”.
For instance, if you’re designing an event invitation page, and you want search engines to see the content as the event's details, then you have to include the Event Schema. And voila, you’ll have something like this in search results:
Another instance: If you’re designing a job post webpage, and you want search engines to see the content as the details of the job, then you have to use the Job Schema. And voila, you’ll have something like this in search results:
There are many more use cases; you can check them out on schema.org.
5. Optimise Images appropriately
When building web pages, images are practically indispensable. Therefore, knowing how to handle images is a key skill. Here are some tips:
5A. JPGs and WEBPs: Take a look at these two images:
They seem identical, don't they? The one on the left is a JPG, and the one on the right is WEBP.
They have roughly the same quality, but the JPEG is 5MB, while the WEBP is 600KB. The point here is that using the JPG version on an image can add unnecessary loading time.
Good news: According to Caniuse, around 96.3% of browsers support the WebP format, including Chrome, Firefox, and Edge. Only browsers like Internet Explorer 11 and the KaiOS browser are left behind, and only bats use such browsers these days.
Extra: You can use tools like Convertio to convert JPEG to WEBP.
5B: SVGs and PNGs: Also, using PNGs for icons can be large; in most cases, SVGs will work fine. However, SVGs are better for retina-ready web design due to their scalability and lack of quality degradation, but they might not work if the image is detailed.
5C: Image Size: Images contribute a lot to the total size of a webpage, and since we don’t want our web pages to take two years before they load, it’s sane to keep image sizes optimal. In some cases, you might be able to compress image sizes without losing the quality.
It’s also sane to lazyload images to improve the user’s experience on such a page and reduce the bounce rate.
5D: Image Alt Tag: As earlier mentioned, we need to talk to search engines. The quickest way to tell search engines what an image is about, is through the image alt attribute. For instance, the alt text of the image above would be “Images of a rabbit placed side by side”.
<img src="rabbit_collage.jpg" alt="Images of a rabbit placed side by side">5E: Image Responsiveness: Check your images on mobile. Ensure they fit within the screen width. If an image has a fixed size, consider making it flexible for better responsiveness. And don't let the image quality suffer in the process.
6. Write Clean Codes as neat as a pin
As a stable house cannot be built on a weak foundation, overall website optimisation is impossible without clean code. Well-organised, minimal code is the key. There’s no point writing 20 lines of code if you can do it in 10. And there’s no point using too many third-party integrations if it’s something you can implement.
It's tempting to skip clean code when no one's looking over your shoulder. As long as things work, who cares, right? But here's the deal: being a responsible developer means ensuring your code is clean and organised, even when you think no one's watching. It's about setting a standard for yourself, not just for others.
So, don't let your code be as dirty as your room 😉
7. Simplify Navigation and Sitemap for easy exploration
When search engines crawl websites, they move from page to page. So, you want the bot to navigate as quickly and efficiently as possible, which is where proper navigation comes in.
A good way to approach this is to ensure that every important page within the website can be accessed right from the homepage, be it in the header, footer or through internal linking.
Now, once your website grows beyond 10 pages, it's time to introduce something called an XML Sitemap; a file that lists all the website's essential pages, making sure Google can find and crawl them all quickly.
Here's a pro tip: When search engines drop by your site, they often peek to see if you've got a sitemap. They do this by checking out default URLs like /sitemap.xml or /sitemap-index.xml.
You can, however, save search engines the stress by submitting the sitemap directly using the search engine console, but that topic is a little above the scope of this conversation.
You can generate XML Sitemap using online tools like xml-sitemaps.com or mysitemapgenerator.com and add it to the /sitemap.xml or /sitemap-index.xml path of the website. And you can also do it programmatically, depending on the tech stack you’re using.
To give you an idea, here's what an XML sitemap looks like:
8. Use Meta Tags to provide a glimpse of your webpage
Meta tags are also little details you can use to inform search engines about what a webpage is about. Let’s take a look at some of the important ones:
8A: Title Tag (<title>): defines the title of a webpage that appears in search results and the browser's title bar.
<title>My Awesome Website</title>8B: Meta Description (<meta name="description">): provides a concise summary of the page's content on search engines. The text you put in here is a big determiner of whether a user will actually click the page from a search engine or not. It’s like a movie trailer.
<meta name="description" content="Explore the wonders of my awesome website. Find useful information and exciting content." />8C: Charset (<meta charset="UTF-8">): The charset meta tag specifies the character encoding for the HTML document, such as UTF-8. It ensures the proper rendering of special characters and symbols.
<meta charset="UTF-8">8D: Robots (<meta name="robots">): The robots meta tag provides instructions to search engine crawlers regarding indexing and following links on the page. For instance, if you don't want search engines to visit a page, you can add a noindex content to the robots meta tag like this:
<meta name="robots" content="noindex">And the page will never be listed on search engine results pages.
8E: Open Graph Protocol (<meta property="og:image">): This is not particularly SEO-specific, but this tag specifically defines the preview image that should be displayed when the webpage is shared on social media.
<meta property="og:image" content="https://example.com/images/my-awesome-image.jpg" />With these details, you're not just telling search engines about your webpage; you're also creating a great first impression.
9. Links ‘Rel’ Attributes must be intentional
In 2017, I was doing an SEO audit for a website after the owner (a very angry dude) complained that out of 8 pages on the website, only the homepage shows on Google for his branded keywords. Apparently, the developer unknowingly added a nofollow tag to all links in the footer, which is the only way other pages on the website are interlinked. With that, what he was telling Google was, “You see these pages; don’t pass authority to them”.
In the context of SEO and hyperlinks, the terms "nofollow" and "dofollow" refer to attributes that can be applied to HTML <a> (anchor) tags to control how search engines treat the links and their impact on search engine rankings.
9A. Dofollow Links: By default, all regular hyperlinks (anchor tags) are considered "dofollow" links, meaning search engines follow them and pass along link equity or authority from the source page to the linked page. Examples:
<a href="https://example.com">Visit Example</a>or
<a href="https://example.com" rel="dofollow">Visit Example</a>9B. Nofollow Links: These are hyperlinks with a rel="nofollow" attribute in the <a> tag, which tells search engines not to pass along link equity to the linked page. This means the linked page's SEO won't directly benefit from the source page's authority. Example:
<a href="https://example.com" rel="nofollow">Visit Example</a>The decision to use dofollow or nofollow links depends on the specific circumstances of each link. But in most cases, if you're not sure what to do, don't mess with the 'rel' tag at all.
Tip: You can easily know if any link is dofollow or nofollow without checking the code source, using the Nofollow browser extension.
10. Make webpages FAST like Usain Bolt
Making web pages load quickly is a no-brainer. Speed matters a lot for search engines. It's like a race; how fast your webpage loads is a key player. Remember we talked about image optimisation and clean codes? They're like teammates helping in this race.
Since Google cares more about giving users the best experience, if a different website can deliver comparable content twice as fast as yours, Google will likely rank them higher on search engine results pages (SERPs).
Also, the speed of a webpage contributes to its bounce rate. When pages load slowly, users bounce. And when Google notices that users are bouncing straight back to the search result page from your website, they drop your ranking because they assume your page isn’t valuable.
You can use Google Lighthouse to check the performance of a webpage or use the Pagespeed.web.dev Website directly.
We can go on and on, but I think I’ve been able to address the most important factors. I didn’t expect it to be that long, but what would a man do?
I don’t want to prolong this again with a conclusion, so I’ll just suddenly stop HERE.