🏆 Best guide to SEO for devs

SEO, or Search Engine Optimization, is a set of techniques and practices you can adopt as a strategy to enhance the way users find you and your company/product online.

In other words, it's a way to stake your claim and ensure that when someone searches for a problem or your name specifically, you appear as the primary solution for them.

Throughout this article, I will provide some examples, but it is important that you DO NOT COPY AND PASTE THEM without first changing what is written and improving it for your context.

But I need to leave a very important message.
If you entered this article thinking there is a magic pill that you will put on your site and everything will be resolved overnight, you can forget about it.

There is no magic pill, my friend. SEO is like going to the gym, a way to build your name and a set of good practices and tools that, over time, will help you have better contact with those whose problems your company solves.

If in the gym you need to eat well and exercise every day, SEO works the same way. You need to constantly evolve and adapt to changes.

Because it only takes a move from a company like Google and you lose your throne as the top spot.

I mean, there is a magic pill; the anabolic steroids in this case would be paid traffic, but that's not our focus here. Everything we use will be done 100% naturally and organically 🌱.

So, stay tuned and stay natty, kids.

It all started when I had to do this myself for a platform I own called Alertpix , focused on streamers and solutions for live streamers.

We felt at first that our search results were very poor. People searched for our name and only found Twitter or articles from sites talking about us in some way. But our actual site, which was good, nothing.

So, I turned to my partner Chris and committed to learning as much as possible about how to solve this problem and appear more when people search for the problems we can solve.

Well, after extensive research, I made a list of several things we could improve; this was the result:

• Optimize Lighthouse
• Better hierarchy (h1, h2, h3)
• Alt tags on images
• Metatags (meta description)
• O.G (Open Graph)
• json-ld
• Blog with long tail content
• pSEO + long tail volume
• Sufficient amount of keywords per page
• robots.txt
• Sitemap
• Google Keyword Planner, SEMrush, and Ahrefs (keywords)
• Canonical tag

I will address each one and give a practical example of how you can improve your site as well.

I will be using Next.js here because it is a framework that already comes with many SEO-oriented features, but you can use and implement it in the framework of your choice.

Optimize Lighthouse

Lighthouse is a tool that we use as a Google extension to measure how optimized our application is for the end user.

It provides several useful metrics to keep an eye on, such as accessibility, performance, best practices, among others. But here, we will focus on SEO.

The idea is always to improve according to what the tool tells you, and even if it's not 100% perfect, it's still very worthwhile to stick to what the tool delivers and make the improvements it proposes.

Oh, and speaking of accessibility, here is another item on our list.

Alt + Hierarchy / HTML Semantics
After all, can the accessibility of a site interfere with its SEO?

What Google and other search engines can consider is whether your images have well-defined alt tags, if your HTML semantics are clear, and if your tags are well hierarchized (i.e., using h1, h2, h3, and other tags correctly).

So, from that perspective, yes. Characteristics of a well-accessible site are healthy habits for good SEO.

Avoid misleading titles or clickbait.
Do not use a list of keywords as a title or a generic alt for everything.

Metatags

Meta tags are HTML elements that provide information about the web page to browsers and search engines. These information are not directly displayed to page visitors, but are used for various purposes, such as search engine optimization (SEO), social media sharing, and mobile device display configuration. Some common types of meta tags include:

• Meta Description: Provides a short summary of the page. This text often appears in search results, helping to attract clicks.

<meta name="description" content="A brief and informative description of the page.">

Meta Keywords: Lists relevant keywords for the page. Although its importance for SEO has diminished, it is still occasionally used.

<meta name="keywords" content="keyword1, keyword2, keyword3">

Meta Charset: Defines the character set used on the page, helping to ensure text display.

<meta charset="UTF-8">

Meta Viewport: Configures the page display on mobile devices, allowing for a better user experience across different screen sizes.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta Robots: Indicates to search engines how to index or not index the page. It can be used to allow or block the page from being indexed.

<meta name="robots" content="index, follow">

Meta Author: Specifies the author of the page or content.

<meta name="author" content="Author Name">

Meta Open Graph: Used for integration with social networks like Facebook, improving the display when the page is shared.

<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page Description">
<meta property="og:image" content="Image URL">
<meta property="og:url" content="Page URL">

These tags are placed within the

Each meta tag has a specific purpose and can be used according to the needs of the page developer.

All of this matters greatly for search tools like Google to know and make your content available.

O.G Open Graph

Open Graph (OG) is a protocol developed by Facebook to integrate any web page with the social network, allowing page content to be shared in a richer and more attractive way. When a web page contains Open Graph meta tags, shared links on social networks can display titles, descriptions, images, and other details in an optimized manner. This improves the appearance and functionality of links, encouraging more interactions and clicks.

Here are some of the most common Open Graph meta tags and their uses:

Defines the page title that will be displayed when the content is shared.

Defines the page title that will be displayed when the content is shared.

<meta property="og:title" content="Título da Página">

Provides a short and attractive description of the page.

<meta property="og:description" content="Page description.">

Specifies the URL of a representative image of the page. This image will be displayed as a thumbnail when the page is shared.

<meta property="og:image" content="URL da Imagem">

Defines the canonical URL of the page, ensuring that the correct URL is associated with the content.

<meta property="og:url" content="URL da Página">

Indicates the type of content on the page, such as "website", "article", "video", etc.

<meta property="og:type" content="website">

Name of the site where the page is hosted.

<meta property="og:site_name" content="Nome do Site">

Benefits of Using Open Graph

• Visual Attraction: Improves the appearance of shared links, displaying images and additional information.
• Increased Clicks: Optimized titles and descriptions can increase the click-through rate (CTR) on links.
• Content Control: Allows site owners to control how their content is displayed on social networks.
• Consistency: Ensures that shared links have a consistent appearance, regardless of where they are shared.

Implementing Open Graph meta tags is a recommended practice for any site that wants to increase its visibility and attractiveness on social media platforms.

You can check if your site is okay and how it appears on different platforms using tools like this: https://opengraph.dev/panel?url=https://alertpix.live

Thus, every time you share your site link, you make it more attractive and less sketchy. This gives a professional touch to your site.

json-ld

JSON-LD (JavaScript Object Notation for Linked Data) is a JSON-based format used to structure data in a way that can be easily understood by machines. It is commonly used to add metadata to web pages so that search engines and other applications can process and understand this data more efficiently.

JSON-LD is often used to implement structured data schemas (such as schema.org), allowing information about products, events, organizations, people, recipes, and much more to be included on a web page. These structured data can significantly improve SEO and increase the visibility of content in search results, displaying rich snippets.

In other words, another tool for you to communicate directly with servers and search engines. Basically, it's a way of telling Google, "Hi, this is me, I do this, and I solve this..."

An example of how we use this at AlertPix is to create a kind of FAQ with questions and answers that are commonly searched by our audience.

Like this:

But you might be wondering, what were these questions and where did I get them from?

And here I'll show you a tip that I could easily charge for:

• You don't decide this.
• It's a mistake to think you know more about your business than Google.

Go and ask Google, but in a different way.

Let me introduce you to Keyword Planner + Google ADS

There are several smart ways to discover which words are ideal for you to use on your site, but I'll tell you now, it's not from your own mind. Do some research, refine, and get the pure juice of the keywords.

This is a practice that takes some time but pays off a lot.
It's also worth researching your competitors' websites and seeing how people find them. Copy what works :)

Long Tail

The concept of "long tail" is about selling a huge variety of unique items in small quantities, rather than focusing on a few popular items in large quantities. In SEO and content marketing, this means using more specific and less competitive keywords that have fewer searches but attract people with clear buying intent and less competition.

So, instead of using "sneakers" to sell running shoes, you can use "Women's running shoes up to $100," for example.
It's all about niching down and being extremely specific. You can incorporate this into your site using blog posts, making YouTube videos and linking them to your site, and in other ways too.

Again, it's not you who defines these ideal words. Use tools like Google Keyword Planner, Ahrefs, SEMrush, and Ubersuggest to identify long-tail keyword opportunities.

And when using them, make sure to include them in titles, subtitles, and the tags I've already shown you in this article.

The robots.txt file is a file that tells search engines what they can and cannot access on your site. It resides in the root of the domain and has a simple structure:

Basic Structure

User-agent: *
Disallow: /admin/
Disallow: /private/
Allow: /public/

Sitemap: https://www.exemplo.com/sitemap.xml

Key Elements

• User-agent: Specifies which robots the rule applies to. * applies to all.
• Disallow: Blocks directories or files.
• Allow: Allows specific directories or files. Benefits
• Indexing Control: Decides what search engines see.
• Security: Protects sensitive areas.
• Optimization: Directs robots to important parts of the site.

Remember: Anyone can view your robots.txt, and not all robots follow the rules.

Sitemaps

A sitemap is a file that lists all the pages of your site to help search engines find, crawl, and index your content more efficiently. It can be in XML or HTML format.

Types of Sitemaps

XML Sitemap: Made for search engines. Contains URLs and information like last update, change frequency, and relative importance of pages.
HTML Sitemap: Made for users. Provides an overview of the site's content, making navigation easier.
Basic Structure of an XML Sitemap
Here's a basic example of an XML sitemap:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>https://www.example.com/</loc>
      <lastmod>2024-07-08</lastmod>
      <changefreq>monthly</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://www.example.com/page1</loc>
      <lastmod>2024-07-08</lastmod>
      <changefreq>weekly</changefreq>
      <priority>0.8</priority>
   </url>
   <!-- Mais URLs -->
</urlset>

Key Elements of an XML Sitemap

<loc>: URL of the page.
<lastmod>: Date of last modification.
<changefreq>: Expected change frequency (daily, weekly, monthly, etc.).
<priority>: Relative importance of the page (0.0 to 1.0).

Benefits of a Sitemap

• Better Crawling: Helps search engines find all pages, even deep ones.

• Quick Indexing: New or updated pages are indexed faster.
  Organization: Keeps the site well-organized and improves user navigation (for HTML sitemap).

How to Use:

Create the Sitemap: Use tools like Yoast SEO (for WordPress), Screaming Frog, or online sitemap generators.

Submit to Search Engines: Submit the sitemap through Google Search Console and Bing Webmaster Tools.

Example of Inclusion in robots.txt

Sitemap: https://www.exemplo.com/sitemap.xml

A sitemap is essential to ensure that search engines find and index all the important content on your site, helping to improve SEO and user experience.

Bonus - Use Next.js

• Next.js is a powerful framework that brings us some advantages in improving SEO.

• But I need to be honest, it's not the only one. There are others like Astro and Nuxt that also do this very well and make your life easier.

• SSR, SSG, Image optimization, among other advantages make Next.js a great tool to assist you on this journey.

Well guys, that's it.
With these practices, you'll be on the right track to increase qualified traffic and the success of your blog.
Remember that SEO changes all the time, so always seek the best and most updated strategy for you.

If you like this type of content and plan to launch your own SaaS someday, come with me and follow me. I post daily content on my Twitter and weekly on my YouTube channel.
This article will also be available in video format very soon on my YouTube channel:
https://youtube.com/@daniellimae

https://x.com/daniellimae