⚡ Unlock faster workflows with Prismic’s newest features!See what's new and upcoming
Performance & UX
·5 min read

Quick Start: How Developers Can Impact SEO

“Technical SEO” refers to the ways that a website’s structure and page speed are optimized to allow search engines to crawl and understand the site’s content, as well as to meet the user experience criteria that search engine algorithms use to identify high-quality search results. Technical SEO enables developers to have a big impact on helping their teams achieve their organic traffic goals.

It’s different from (but tightly coupled with) “content SEO,” which focuses on creating high-quality content to meet the needs of users looking for specific keywords (and being attentive to other details like optimizing titles and descriptions). You need both strong technical and content SEO implementations in order to rank well in search engine result pages (SERPs).

Think about content and technical SEO like a bento box (you know, that wonderful way of eating delicious Japanese food in a box with dedicated compartments for different foods?).

Content SEO is like the various dishes in that bento box, while technical SEO is the box itself, structuring how the content is arranged and the overall presentation of it. So while your content team works on cooking up delicious blog posts and articles, it's your job as a developer to make sure that it's structured properly in that nice little bento box. The box ensures that each dish is neatly separated and easy to access, making the dining experience so much better for structure-loving search engines. A well-structured website ensures that content is easily discoverable, accessible, and visually appealing for users, and also easily crawlable and indexable for search engines like Google.

For developers to maximize their impact on SEO, there are some key aspects of a website devs need to keep in mind. Let’s dig into them.

Optimize the user experience

Search engines have one goal in mind: solve the user’s problem quickly and efficiently with high-quality results. That’s it. In order to do this, Google and other search engines constantly take note of user actions in order to improve their search results.

In order to better understand and measure user experience, Google has created metrics that are collectively referred to as Core Web Vitals. These metrics evaluate things like how quickly a page loads and becomes interactive for users and how much a page layout shifts as more resources load (and more). In essence, they tell Google how efficiently and reliably someone will find their desired answer on your website. You can impact these performance metrics in numerous ways, especially by choosing the most optimized technologies to create your website with.

Beyond Core Web Vitals, providing a nice user experience can impact SEO by ensuring that people spend more time on the page with your teams content and navigate deeper into your website rather than returning to search results.

Take action: Here’s a quick guide for getting started with Core Web Vitals and another one for kick-starting your user experience knowledge as a developer.

Build the most performant websites

Join other developers on the leading edge of development and subscribe to get monthly insights on creating websites that are performant and deliver maximum business value.

Pay attention to title and meta description tags

Google keeps track of how many times it shows your site compared to how often people click your link. That ratio is called your Click Through Rate (CTR). The higher your CTR, the better.

The page title and meta description are crucial for winning clicks in search. No one is going to click a website with a title of “Home” and a description of “Lorem ipsum,” so you need to make sure these fundamental fields are filled out.

Better yet, you should populate these fields dynamically from a content management system so that your content team can optimize this information using their unique expertise.

Take action: You can dig into creating an SEO-optimized website with a CMS here.

Use semantic HTML

Semantic HTML is how developers give meaning and structure to the content of a webpage. We do this by using the right HTML elements in the right place, rather than just using <div> elements for everything. And some semantic elements have a particularly significant effect on SEO.

Heading elements <h1> through <h6> are a must-have for any webpage. Look at this blog post and imagine if I didn’t use any headings. How easy would it be to skim around and find the information you’re looking for? By using heading elements properly, you’re not only improving the reader’s experience, you’re also helping Google’s web crawler understand the page’s structure in the same way. Here’s a guide on creating great page titles.

<nav> elements define the navigation of a website. By using this element you’re letting Google know the main pages and general site structure.

Use the <article> element to specify an independent item of content on a page like a blog post, newspaper article, or forum post. Wrapping your content in this element helps Google differentiate the main content from the other text on your site.

Some people argue that Google is smart enough to figure out your site without these semantic HTML elements. I’d rather explicitly say what the structure of my site is rather than hope that Google guesses correctly. Besides, Google considers semantic code to be a best practice (not to mention the accessibility benefits), so it’s worth your effort.

Take action: Here’s a great guide on semantic HTML to get you started.

Ensure image optimization

One of the largest files you’ll be sending your visitors is images. Users are likely to leave if you’re sending massive, uncompressed files that take extra time to load. You’ll want to make sure you’re serving appropriate files for different screen sizes, as well as using modern file types (while keeping browser compatibility in mind).

While your content team might be the ones uploading all of the images, it’s fully on the developer to make sure they’re getting optimized properly.

Take action: Some frameworks, like Next.js, have built-in image optimization help. At other times, you might consider using an image service, like Imgix, to maximize image optimization (or you can use a content management product like Prismic, where the benefits of Imgix are built right into the product).

Prioritize accessibility

Much of what you need to do in order to make a website accessible to all users also benefits SEO. For example, when you add alt text to images, you’re helping both Google and people with low vision understand your content. Text transcripts for videos let everyone read and access your content, including Google. When you use semantic HTML, content becomes easier to understand for search engines and screen readers.

Focus on making your websites accessible and that ease of access will extend to search engines.

Take action: Here’s an introductory article to help you get started with implementing accessibility practices on your website.

Final thoughts

As a developer, it’s your responsibility to help your team lay a strong foundation for SEO. The structure and performance that you create for your team’s content will have a long-term impact on the team’s outcomes, so as much as you can try not to skip steps when it comes to technical SEO.

Frequently asked questions about web development for SEO

It may depend on the business goals of the website you are building, but overall, yes, SEO is part of web development. There are two aspects to successful SEO: content and technical optimizations. Technical optimizations should be built into the structure of a website, and they do things like: help search engines crawl and understand the content of the site, ensure the website meets performance criteria that are built into search engine algorithms, and maximize user experience so that other important content metrics are optimized.

Article written by

Alex Trost

Alex Trost is a front-end developer and educator from Connecticut. He's the Developer Experience Team Lead at Prismic, where he's working to make building Jamstack sites fun and easy. He also streams on Twitch to learn from and teach others about fun ways to build for the web. He writes articles and a newsletter around creative coding at Frontend Horse.

More posts
A graphic portrait of Alex Trost in a red shirt. He has brown hair and a beard with a warm smile.

Join the discussion

Hit your website goals

Websites success stories from the Prismic Community

How Arcadia is Telling a Consistent Brand Story

Read Case Study

How Evri Cut their Time to Ship

Read Case Study

How Pallyy Grew Daily Visitors from 500 to 10,000

Read Case Study