
**SEO**, aka **Search Engine Optimization**, is telling Google all the stuff it needs to know to display your webpage. I've always viewed SEO as this **experimentation thing** where you need a **bunch of experience** to know what works. Plus I've never been interested in it that much, I knew it was there, some best practices and that's it.

On the other end, **what I am interested in**, is what I need to do from a **developer's perspective** to equip the SEO guys and the crawlers with all the info/tools they need. My knowledge mainly comes from previous experiences building marketing websites (SME and startups) and my blog over at [milos.blog](https://www.milos.blog).

I'm also going to try and make this an **ongoing thing**, so I'll update accordingly (hopefully, it's the first blog post, so let's see 😶).

### What I am not going to talk about

As I've already said, I'll **ignore all of the marketing stuff** and focus on the technicalities. No _keyword research_, _off-page optimization_, _content marketing_, or _link building_. Now you know what to Google if you're interested in that.

Also, **improving page rankings isn't the topic here**. And how impactful these changes are toward that goal. With that being said, let's dive in.

## Meta tags and descriptions

The simplest stuff first. **Basic metadata**. It looks something like this:

```html
<head>
  <title>The Great Gatsby</title>
  <meta charset="utf-8" />
  <meta
    name="description"
    content="The Great Gatsby is a novel by F. Scott Fitzgerald, published in 1925. It tells the story of the rise and fall of the fictional character Jay Gatsby."
  />
  <meta
    name="keywords"
    content="F. Scott Fitzgerald, The Great Gatsby, novel, literature, fiction"
  />
  <meta name="author" content="F. Scott Fitzgerald" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="robots" content="index, follow" />
  <meta name="revisit-after" content="7 days" />
  <meta name="canonical" content="https://example.com/the-great-gatsby" />
  <meta
    name="alternate"
    hreflang="es"
    href="https://example.com/el-gran-gatsby"
  />
  <meta name="content-language" content="en" />
  <meta name="geo.position" content="40.714353;-74.005973" />
  <meta name="ICBM" content="40.714353, -74.005973" />
  <meta name="rating" content="General" />
  <meta name="distribution" content="Global" />
  <meta name="copyright" content="Copyright 2022 Example Inc." />
</head>
```

Starting with a `title`, `description` and `keywords` should be enough to get the ball rolling. As for the rest, it depends on your use case. Also, it's worth noting that **this list isn't complete**. There are a lot of other meta tags that you can use, but I'll leave it up to you to **do your research**.

## Structured data

Structured data or schema markup, is a way of **annotating the content on your website so that crawlers can understand it**. It also allows you to classify the page into different categories. Besides attaching the **schema data** we also have something called Rich Snippets, which Google uses to display additional info about your site (in those small boxes on the right side of the search results, including reviews, products, etc).

I've focused on Google here, although obviously, **there are other search engines out there**. For example Bing [does support the stuff](https://blogs.bing.com/webmaster/august-2018/introducing-json-ld-support-in-bing-webmaster-tools) I'm going to talk about. DuckGo is a [little bit different though](https://help.duckduckgo.com/duckduckgo-help-pages/results/sources/) and lacks docs on the topic.

### Microdata

You're adding the schema data **directly into the HTML code**. Which is a con by itself, compared to JSON-LD. Here's what it looks like:

```html
<div itemscope itemtype="http://schema.org/Book">
  <h1 itemprop="name">The Great Gatsby</h1>
  <img itemprop="image" src="great-gatsby.jpg" alt="The Great Gatsby cover" />
  <p>By <span itemprop="author">F. Scott Fitzgerald</span></p>
  <p>
    Published:
    <time itemprop="datePublished" datetime="1925-04-10">April 10, 1925</time>
  </p>
  <p>Genre: <span itemprop="genre">Novel</span></p>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <p>
      Price: <span itemprop="price">$10.99</span>
      <span itemprop="priceCurrency">USD</span>
    </p>
  </div>
</div>
```

Microdata specifically targets HTML elements. It's also worth noting that microdata is a part of the [HTML living standard](https://html.spec.whatwg.org/multipage/microdata.html).

**Additional resources:**

- [MDN on Microdata](https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata).

### RDFa

Similar to microdata but it's not. From what I've read it's **more versatile and generalized**. It also supports more than just HTML elements.

```html
<div vocab="http://schema.org/" typeof="Book">
  <h1 property="name">The Great Gatsby</h1>
  <img property="image" src="great-gatsby.jpg" alt="The Great Gatsby cover" />
  <p>By <span property="author">F. Scott Fitzgerald</span></p>
  <p>
    Published:
    <time property="datePublished" datetime="1925-04-10">April 10, 1925</time>
  </p>
  <p>Genre: <span property="genre">Novel</span></p>
  <div property="offers" typeof="Offer">
    <p>
      Price: <span property="price">$10.99</span>
      <span property="priceCurrency">USD</span>
    </p>
  </div>
</div>
```

RDFa is also a part of the [Semantic Web](https://www.w3.org/standards/semanticweb/) a W3C initiative to build Web 3.0 (no, it's not blockchain).

**Additional resources:**

- [W3C RDFA core](https://www.w3.org/TR/rdfa-core/)
- [W3C RDFA primer](https://www.w3.org/TR/rdfa-primer/)

### JSON-LD

In my opinion, **the easiest way to include structured data** on your website is by using JSON-LD.

> Google recommends using JSON-LD for structured data whenever possible.

```html
<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Book",
    "name": "The Great Gatsby",
    "image": "great-gatsby.jpg",
    "author": "F. Scott Fitzgerald",
    "datePublished": "1925-04-10",
    "genre": "Novel",
    "offers": {
      "@type": "Offer",
      "price": "10.99",
      "priceCurrency": "USD"
    }
  }
</script>
```

**Additional resources:**

- [Google on structured data](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data#markup-formats-and-placement)

## Optimizing for different sources

It would be great if we could **just set up the meta tags with the structured data and voila**. Of course, it's not that simple. Although, the techniques mentioned below **do fall in the bonus category**.

#### Rich results

Used by Google to display additional information. They are **generated from structured data which provides context and info to the crawler**. Google offers **several standardized context** types you can use to mark up your content. As a result, you can get these additional info boxes on the right side of the search results.

```html
<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "NewsArticle",
    "headline": "Title of a News Article",
    "image": [
      "https://example.com/photos/1x1/photo.jpg",
      "https://example.com/photos/4x3/photo.jpg",
      "https://example.com/photos/16x9/photo.jpg"
    ],
    "datePublished": "2015-02-05T08:00:00+08:00",
    "dateModified": "2015-02-05T09:20:00+08:00",
    "author": [
      {
        "@type": "Person",
        "name": "Jane Doe",
        "url": "https://example.com/profile/janedoe123"
      },
      {
        "@type": "Person",
        "name": "John Doe",
        "url": "https://example.com/profile/johndoe123"
      }
    ]
  }
</script>
```

**Additional resources:**

- [Google on structured data](https://developers.google.com/search/docs/appearance/structured-data/search-gallery)

### Social media integration

Frustratingly **enough each one of the social media websites uses its own protocol** to include structured data. From my perspective, **it's how the URL looks like when you share it**. If you ask a marketing guy he will probably disagree. Plus this way these companies collect more data, for better or worst.

#### Facebook

Uses the Open Graph protocol.

```
<head>
  <title>The Great Gatsby</title>
  <meta property="og:title" content="The Great Gatsby">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/the-great-gatsby">
  <meta property="og:image" content="https://example.com/great-gatsby.jpg">
  <meta property="og:description" content="The Great Gatsby is a novel by F. Scott Fitzgerald, published in 1925. It tells the story of the rise and fall of the fictional character Jay Gatsby.">
</head>
```

---

This article is originally published on my blog [https://www.milos.blog/posts/seo-guide](https://www.milos.blog/posts/seo-guide).

Thanks for reading ❤️


An article that summarizes the SEO best practices from a web developer's perspective.

miloš@blog:

🧑‍💻 Miloš Lončar - Software engineer

SEO from a web developer's perspective