I'm surprised at how often I see search engine optimization and web development as separate skill sets across industries. But then again, both of these categories have many sub-categories as well, then I come back to the realization that it's next to impossible to know both at an expert level.
With SEO, the high-level categories include on-page SEO, off-page SEO, and technical SEO.
Web development gets much more segmented within the full-stack architecture. First, there's coding at the base, which can include many programming languages, including JavaScript, C/C++, Python, PHP, and dare I say, HTML. Then, there are database design and architecture, system administration of operating systems, and web server technologies such as Apache and Nginx.
Coding takes a lot of practice to get right. However, I've been programming for over 20 years and still learn new things daily!
Getting back to SEO and the topic at hand, SEO takes time to understand and master.
To me, both SEO and web development are symbiotic, and it's the primary service offered by Zadro Web.
Let me explain.
Technical SEO
As I've mentioned, SEO has multiple sections within it. For example, off-page and on-page SEO have much more to do with content writing and building relationships through outreach than coding. However, technical SEO shares many similarities to coding -- both involve understanding structure and semantics.
For example, it's critical to understand JSON-LD and how it relates to structured content with SEO. That same JSON format has become a widely used standard with information exchange through APIs and much more in programming languages. So, if you understand JSON, congrats -- you know a shared component between SEO and web development.
Another example is log file analysis. In coding and SEO, reading log files is a critical component.
The web development and SEO cross-over becomes much more pronounced with ongoing efforts.
SEO and Programming Similarities
When building a website, you need to know proper web semantics.
How many H1s should be on a page? Is the website you're building ADA-compliant? Does your website pass W3c validation?
And, you guessed it, those web standards are necessary for a technically sound website in terms of SEO and properly formatted site structure.
Selecting a CMS
So, how do you learn SEO through web development? Of course, the first step is to select the best CMS for SEO purposes. And I don't think you will be surprised to hear me say that the framework is WordPress.
More so, Gotch SEO presented data about a year ago and found that WordPress websites dominate 45% of the SERPs (search engine results pages). The next best is MediaWiki at only 9%, and other CMS platforms fall off quickly.
However, with WordPress, you will need to install a plugin, and I prefer Yoast SEO by far. Its development had some quirks in the early days, but it's by far the best, in my opinion, in terms of database architecture and its WordPress hooks. Yoast was the first to implement the Schema @graph structure properly.
After you fire up a new WordPress installation, go to the Plugins section and install Yoast.
Many webmasters like Rank Math as their preferred SEO plugin, but it's far down my list due to its database bloat. The SEO Framework is another excellent option if you're looking for a Yoast plugin replacement.
However, I'm not affiliated with either plugin.
And to avoid confusion, I'm not saying WordPress is the best overall CMS. That spot is currently reserved for Craft CMS and is my preferred option for all new projects due to its flexibility, speed, and many other reasons, which I'll write about at some point.
Learning SEO
Finally, let's talk about how to learn SEO.
Once your site is live and has an SEO plugin installed, it's time to evaluate the code!
I assume you have either used the default WordPress theme or built a custom theme. In either case, a live site is needed.
And you can apply this tactic on any site, not just yours. Any website ranking on Google is an opportunity to learn.
Simply right-click and view the source code. As I'm sure you know, you will see a host of technical info there.
Meta Analysis
First, let's talk about the <title> tag -- it is arguably one of the most important on-page SEO components. It provides the starting point for search engines and your visitors, as it's most likely what will be seen in the SERPs.
Next up, you will see a wealth of <meta> tags. And while many say the title tag is a meta tag, the code structure is slightly different. You will want to get familiar with each of these, and Ahrefs has an excellent write-up on this topic already, so I won't take up much time covering them.
What I will emphasize is that meta tags are critical, specifically the robots directive, to make sure your content is indexed properly. It's important to note the robots meta tag
controls whether a page is indexed in the search results, but it does not ensure the page will be crawled.
A properly formatted robots tag will appear like this:
<meta name="robots" content="index, follow">
The above is the default value and doesn't need to be specified. However, if you wanted to inform Google or other search engines not to index your page, then you would replace index with noindex.
Accessibility
That brings us to other crucial technical SEO components: the Robots.txt and Sitemap.xml pages.
Most websites will have these files located at example.com/robots.txt and example.com/sitemap.xml but might vary, such as with Yoast mentioned above -- the sitemap file with the Yoast SEO plugin can be found at example.com/sitemap_index.xml instead. Also, WordPress has a sitemap "out of the box" with the latest version and can be found at example.com/wp-sitemap.xml.
Take some time to view those URL locations for your site. But since you're the web developer of your site, I'm sure you know all about those two files!
The robots.txt file controls which pages, files, and folders are accessed.
For example, if you want to exclude all search engine bots from crawling your site, use the following:
User-agent: *
Disallow: /
You would typically only want to use that directive on staged or dev sites, and you actually should in order to avoid conflicts with your main site.
More than likely, you will want to format your robots.txt file something like this:
User-agent: *
Disallow: /some-folder/
Disallow: /some-filename.html
Sitemap: https://example.com/sitemap.xmlYou can read more about this file at Google's developer resource.
Did you notice the Sitemap directive in the file? It's now required for specific search engines, such as Bing.
I won't spend much time on XML sitemaps, but know you should have one and understand its structure.
On-Page SEO
While most items on this list can be grouped into technical SEO, the on-page SEO subset has particular items to be aware of and is defined separately.
First up are heading tags. Again, as the developer, I'm sure you're fully aware of the H1-H6 tags. However, many developers use heading tags for styling purposes, which is wrong. Instead, heading tags should always provide topical relevance, representing each page's content in an outline format. In other words:
- H1: Cars
- H2: Audi
- H3: A7
- H3: R8
- H2: Lamborghini
- H3: Aventador
- H3: Huracan
- H2: Audi
Your content needs to be organized as such, too. The question often arises if more than a single H1 can be used. With HTML5 and proper semantic structure, such as using <section> tags, it's okay to use more than one H1, but it's best to stick to only one per page.
Images are another important topic when it comes to technical on-page SEO. With images, there are a few essential items to take note of.
- Compress images to their minimal file size while retaining image quality. Use plugins or online tools.
- Name your image files appropriately, such as
cars-audi-r8.jpgfor both humans and search engines. - Make sure to have an
alttag on your images for screen readers and to help search engines.
Properly formatted HTML code for an image would be like this:
<img src="cars-audi-r8.jpg" alt="Audi R8" />I could write an entire article image optimization alone -- there's that much detail. You can analyze your website using web.dev to get more insights into image optimization.
Since we're on the topic of properly formatted code, let's quickly review anchor links. Far too often, I see the title attribute missing from internal links, and it's important to get it right. The format of a well-formed link looks like this:
<a href="cars.html" title="luxury sports cars">Sports Cars</a>
There are additional attributes that can be used on anchor links, such as the rel and target attributes, but the structure above is the minimum required for validation and search engines.
Advanced Technical SEO
I won't spend much time on advanced SEO strategies, as getting the SEO basics should most definitely come first. However, here are some "next steps" you can take to elevate your SEO as a web developer.
- Schema and Structured Data - These are standardized formats for providing information about a page and classifying the page's content. Options include Schema.org and the more advanced format of JSON-LD structured data snippets.
- Internal Linking - As mentioned above, internal linking can significantly impact your site's ability to rank in search results. In the early days of SEO, this was more commonly referred to as "siloing" and a way to optimize your information architecture (IA).
- Optimize Crawl Budget - Google and other search engines will allocate specific "budgets" to crawling websites. A popular site might get crawled more frequently, while less popular sites, not so much. One way to optimize your crawl budget is to keep click depth low, which is the number of pages away from the homepage.
- Increase Site Speed - With Google's Page Experience update, there was a solid push to have Core Web Vitals optimized. You can click the Web.dev link above to learn more about this topic.
- UX - Optimizing User Experience, which includes things such as improving bounce rate, optimizing conversions, and many other factors, is an art and a cornerstone of SEO. Once you get past the SEO basics, UX is where you will want to focus most of your ongoing efforts.
- SEO Audits - Running periodic SEO audits are a great way to get clues into other components that can be fixed on your website and are often done by updating your website's coding. You can run our SEO Auditor tool for one-off page audits or use other tools, such as Screaming Frog or SEMRush (Free 14-Day Trial).
Final Thoughts
Incorporating SEO into your web development is critical and will level up your marketability. It's surprising how many web developers ignore SEO, develop sites that are not even crawlable due to careless JavaScript roadblocks, skip on the basics of coding structures, or don't seem to care about SEO because it's "not their job."
If you landed on this article to learn more about incorporating SEO into your development, I hope I've helped somehow!
However, if you're a company that's looking to incorporate SEO into your existing website better, feel free to reach out to learn more about what Zadro Web can offer.
