# SEO and head tags

We're getting pretty close to having a finished site now, one that is fully-featured and looks good. But how is anyone going to find it?

One thing we've yet to take into account is SEO. To boost the chances of our site appearing in the search engine listings we'll add some tags to the `<head>` element of our document. Tags such as `title` and `description` can be important for SEO so it's good practice if our theme includes them.

Frontity provides a `<Head>` component that can be used to add tags to the HTML `<head>` element.

Let's import the `<Head>` component into our root component file. Then anything that we include within `<Head>...</Head>` tags in our component will be included in the `<head>` section of the HTML document sent to the browser.

```jsx
// File: /packages/my-first-theme/src/components/index.js

import { ..., Head } from "frontity";

// ...

const Root = ({ state, actions }) => {
  const data = state.source.get(state.router.link);

  return (
    <>
      <Head>
        <title>My First Frontity Theme</title>
        <meta
          name="description"
          content="Based on the Frontity step by step tutorial"
        />
      </Head>
      ...
    </>
  );
};
```

With this code added you should already see the title appearing in the tab of you browser, and if you check your document with the browser devtools you should see the title and the description showing up.

![Frontity in the console](https://frontity.org/wp-content/uploads/2021/04/frontity-tutorial-part7img3.png)

You can include the `<Head>` component wherever you like, there’s no need for it to be in the `<Root>` component of the theme. Additionally you can use variables so that the tags change dynamically according to the content.

Let's put the post title in the `<title>` element and the post excerpt in the `meta description` tag on post pages. As before, we'll import the `<Head>` component into `post.js` and use it within the returned element. But instead of the strings that we used before we'll populate the content of the elements with data from the post.

```jsx
// File: /packages/my-first-theme/src/components/post.js

import { connect, styled, Head } from "frontity"
// ...

const Post = ({ state, libraries }) => {
  // ...
  return (
    <div>
      <Head>
        <title>{post.title.rendered}</title>
        <meta name="description" content={post.excerpt.rendered} />
      </Head>
      <h2>...</h2>
      // ...
    </div>
  )
}
```

Now if you check in your browser devtools you'll see the title and meta description for each post corresponds to the title and excerpt that is held in the state for that post. Also the browser tab helpfully shows the title of the post rather than the previous generic title.

![Frontity in the console](https://frontity.org/wp-content/uploads/2021/04/frontity-tutorial-part7img4.png)

![Frontity in the browser](https://frontity.org/wp-content/uploads/2021/04/frontity-tutorial-part7img5.png)

Why not try the same exercise for `page.js` and then test the results using the `About Us` page.

{% hint style="success" %}
**Check you're on the right track** by comparing your changes with [the ones in this commit](https://github.com/frontity-demos/tutorial-hello-frontity/commit/c40da42a1d3efd72eaae18ac2c4245d780b297df).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tutorial.frontity.org/part7-finishing-touches/seo-and-head-tags.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
