Remix Search Engine Optimization
Tags: webdev, javascript, react, remix
Published: 2022-03-17 20:17:09

## TL;DR

Here is the Remix SEO checklist
- <a href="#high-quality" target="_self">High quality content</a>
- <a href="#title" target="_self">Title</a>
- <a href="#description" target="_self">Description</a>
- <a href="#image" target="_self">Image</a>
- <a href="#social-media" target="_self">Social media meta tags</a>
- <a href="#sitemap" target="_self">Sitemap</a>
- <a href="#robots" target="_self">Robots.txt</a>

<br />


### Introduction: Why bother?

SEO stands for search engine optimization, which is a set of practices designed to improve the appearance and positioning of web pages in organic search results. Because organic search is the most prominent way for people to discover and access online content, a good SEO strategy is essential for improving the quality and quantity of traffic to your website.

<br />

Although Remix is a great framework, we still need to manually configure SEO to reach more users. In this blog, I will discuss how to improve SEO in your Remix application.

> Check this [blog](https://dev.to/codegino/getting-started-with-remix-10o0) in case you are not familiar with Remix.

### High-quality content <a name="high-quality"></a>

This is not Remix specific, but just like in any website, the best way to improve your SEO is to have good content.

<br />

Now, let's continue on things we can control, as a developer, in our Remix application.

<br />

### Using meta tags

Meta tags are specific snippets of text and image content that summarize a web page. Often meta-tag data shows up whenever someone shares a link on social media, in messaging, or in your business chat software.

<br />

To render the meta tags that we will declare in our routes, we first need to add the `Meta` component in the `head` of your `app/root` file.

```jsx
// app/root.jsx
import { Meta} from "remix";

// ...
<html lang="en">
  <head>
    {/* other stuff */}

    {/* All meta exports on all routes will go here */}
    <Meta />
  </head>
  {/* body */}
</html>
// ...
```

Check this [link](https://github.com/codegino/playground/blob/main/app/root.tsx#L74) to see a sample usage of the above code.

> You can technically add meta tags directly to the `head` of the `html` template. However, it is recommended to add "unique" information such as `title` and `description` on every route.

Using Vanila JavaScript
```jsx
// app/routes/[routeName].jsx
export const meta = () => {
  return {
    [property]: "value"
  }
}
```

Using TypeScript
```tsx
// app/routes/[routeName].tsx
import type { MetaFunction } from "remix";

export const meta: MetaFunction = () => {
  return {
    [property]: "value"
  }
}
```

> Remix is smart enough to convert a `meta` property into the appropriate tag with the correct value as shown in the upcoming examples.

### Must have meta tags

#### Title  <a name="title"></a>

A title tag is the second most important factor for on-page SEO, only trailing high-quality content.

```jsx
export const meta = () => {
  return {
    title: "Page Title. Ideally length 60-70 characters",
  }
}
```

```html
<head>
  <title>Page Title. Ideally length 60-70 characters</title>
</head>
```

#### Description  <a name="description"></a>

The meta description often serves as a pitch to people who find your website on Google or social media sites. While it's not required and Google can use text from you website instead of what you specifiy in the meta data, it's better to control the description text where you can.

```jsx
export const meta = () => {
  return {
    //...
    description: "Page description. No longer than 155 characters."
  }
}
```

```html
<head>
  <!--...-->
  <meta name="description" content="Page description. No longer than 155 characters.">
</head>
```

#### Image  <a name="image"></a>

With the visual nature of the web, your Meta Tag Image is the most valuable graphic content you can create to encourage users to click and visit your website.

```jsx
export const meta = () => {
  return {
    //...
    "og:image": "https://codegino.com/assets/preview.png"
  }
}
```

```html
<head>
  <!--...-->
  <meta property="og:image" content="https://codegino.com/assets/preview.png">
</head>
```

### Social media meta tags  <a name="social-media"></a>

Although it is not required, with a good social media presence, you can attract more users which will organically increase your search ranking.

<br />

#### OG:info

Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media. 

<br />

They're part of Facebook's Open Graph protocol and are also used by other social media sites, including LinkedIn and Twitter (if Twitter Cards are absent).

```jsx
export const meta = () => {
  return {
    //...
    "og:type": "website",
    "og:url": "https://codegino.com",
    "og:title": "Page Title. Ideally length 60-70 characters",
    "og:description": "Page description. No longer than 155 characters.",
    "og:image": "https://codegino.com/assets/preview.png",
  }
}
```

```html
<head>
  <!--...-->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://codegino.com">
  <meta property="og:title" content="Page Title. Ideally length 60-70 characters">
  <meta property="og:description" content="Page description. No longer than 155 characters.">
  <meta property="og:image" content="https://codegino.com/assets/preview.png">
</head>
```

<br />

#### Adding twitter:info

These are used by Twitter to display information about your website. 

You don't define all of these as Twitter will reuse some `og` meta tags.
In case of an overlap(`og:description` and `twitter:description`), Twitter will pick the Twitter-specific information.

```jsx
export const meta = () => {
  return {
    //...
    "twitter:card": "summary_large_image", // summary, summary_large_image, app, player
    "twitter:creator": "@code_gino",
    "twitter:url": "https://codegino.com",
    "twitter:title": "Page Title. Ideally length 60-70 characters",
    "twitter:description": "Page description. No longer than 155 characters.",
    "twitter:image": "https://codegino.com/assets/preview.png",
  }
}
```

```html
<head>
  <!--...-->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:creator" content="@code_gino">
  <meta name="twitter:url" content="https://codegino.com">
  <meta name="twitter:title" content="Page Title. Ideally length 60-70 characters">
  <meta name="twitter:description" content="Page description. No longer than 155 characters.">
  <meta name="twitter:image" content="https://codegino.com/assets/preview.png">
</head>
```

<br />

#### Putting all the meta tags together

```jsx
export const meta = () => {
  return {
    title: "Page Title. Ideally length 60-70 characters",
    description: "Page description. No longer than 155 characters.",
    "og:type": "website",
    "og:url": "https://codegino.com",
    "og:title": "Page Title. Ideally length 60-70 characters",
    "og:description": "Page description. No longer than 155 characters.",
    "og:image": "https://codegino.com/assets/preview.png",
    "twitter:card": "summary_large_image",
    "twitter:creator": "@code_gino",
    "twitter:url": "https://codegino.com",
    "twitter:title": "Page Title. Ideally length 60-70 characters",
    "twitter:description": "Page description. No longer than 155 characters.",
    "twitter:image": "https://codegino.com/assets/preview.png",
  }
}
```

#### Validators

Here are some validators that you can use to test your meta tags.

- One Stop Shop validator: https://metatags.io/ 
- Facebook: https://developers.facebook.com/tools/debug
- Twitter: https://cards-dev.twitter.com/validator
- LinkedIn: https://www.linkedin.com/post-inspector/inspect/
- Pinterest: https://developers.pinterest.com/tools/url-debugger/
- Structured Data: https://developers.google.com/search/docs/advanced/structured-data

<br />

### Sitemap.xml  <a name="sitemap"></a>

A sitemap is a file where you provide information about the pages, videos, and other files on your site and their relationships. Search engines like Google read this file to crawl your site more efficiently. A sitemap tells Google which pages and files you think are important in your site and provides valuable information about these files. For example, when the page was last updated and any alternate language versions. [Learn more](https://developers.google.com/search/docs/advanced/sitemaps/overview)

<br />

Create a [`sitemap.xml` inside the `public` directory](https://github.com/codegino/playground/blob/main/public/sitemap.xml)

```xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<url>
		<loc>https://codegino.vercel.app</loc>
	</url>
	<url>
		<loc>https://codegino.vercel.app/words</loc>
    <lastmod>2022-03-20T20:58:44.110Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.7</priority>
	</url>
</urlset>
```

> If you have a lot of dynamic pages, you can create a sitemap generator.

### Robots.txt  <a name="robots"></a>

A robots.txt file tells search engine crawlers which URLs the crawler can access on your site. This is used mainly to avoid overloading your site with requests; it is not a mechanism for keeping a web page out of Google. [Learn more](https://developers.google.com/search/docs/advanced/robots/intro)

Create a [`robots.txt` inside the `public` directory](https://github.com/codegino/playground/blob/main/public/robots.txt)

```txt
User-agent: *
Allow: /
```

<br />

## Additional things to consider

- [Adding your website to Google Search](https://dev.to/codegino/how-to-make-your-web-pages-appear-in-google-search-results-2ic2)
- [SEO Optimization Cheat Sheet](https://dev.to/codegino/search-engine-optimization-cheat-sheet-23no)