# Adding SEO to pages
Similarly to what we offer with [responsive images](https://www.datocms.com/docs/next-js/managing-images.md), our GraphQL API also offers a way to fetch [**pre-computed meta tags**](https://www.datocms.com/docs/content-delivery-api/seo-and-favicon.md) **based on the content you insert inside DatoCMS**.
Here's a sample of the meta tags you can automatically generate. It includes meta tags for SEO, social share and website favicons:
```html
DatoCMS Blog - DatoCMS
```
You can easily include all this information inside your Remix app with the help of our [`react-datocms`](https://github.com/datocms/react-datocms) package, so make sure to install it, if you've not already done it:
Terminal window
```bash
npm i --save react-datocms
```
### Adding SEO and social share meta tags
With Remix, you can specify meta tags for a page using the [`meta` export](https://remix.run/docs/en/v1/api/conventions#meta):
```javascript
export function meta({ data }) {
title: "Something cool",
description: "This becomes the nice preview on search results."
};
};
```
With DatoCMS you can feed content coming from a [`_seoMetaTags` query](https://www.datocms.com/docs/content-delivery-api/seo-and-favicon.md) directly into Remix by using the `toRemixMeta` function, which generates a compatible object for Remix's `meta` function:
```jsx
import { request } from "../lib/datocms";
import { toRemixMeta } from "react-datocms";
import { useLoaderData } from "remix";
const HOMEPAGE_QUERY = `
{
blog {
seo: _seoMetaTags {
attributes
content
tag
}
}
}`;
export async function loader() {
return request(HOMEPAGE_QUERY, {
variables: { limit: 10 }
});
}
export function meta({ data }) {
return toRemixMeta(data.blog.seo);
};
export default function Home() {
// ...
}
```
### Adding favicon links and meta tags
If you want to add all the `link` and `meta` tags needed to generate favicons for your website, you can use the `renderMetaTags` helper along with the `faviconMetaTags` GraphQL query:
> [!WARNING] Why not using the links export?
> Remix offers a [`links`](https://remix.run/docs/en/v1.1.1/api/conventions#links) export to define which `` elements to add to the page, but for performance reasons [it doesn't receive any loader data](https://github.com/remix-run/remix/issues/32), so you cannot use it to render favicons meta tags! The best way to render them is using `renderMetaTags` in your root component, like in the example.
```jsx
import {
Links,
LiveReload,
Meta,
Form,
Outlet,
Scripts,
ScrollRestoration,
useLoaderData,
} from 'remix';
import { renderMetaTags } from 'react-datocms';
import { load } from '~/lib/datocms';
export const loader = async ({ request }) => {
return load(`
{
site: _site {
favicon: faviconMetaTags(variants: [icon, msApplication, appleTouchIcon]) {
attributes
content
tag
}
}
}
`);
};
export default function App() {
const { site } = useLoaderData();
return (
{renderMetaTags(site.favicon)}
{process.env.NODE_ENV === 'development' && }
);
}
```
Want to know more about SEO customization in DatoCMS? Check out this video tutorial:
[
(Image content)
Working with and customizing SEO Fields
Play video ยป
](https://youtu.be/WjF10isSjS0)
## Related content in "Remix"
- [Remix + DatoCMS Overview](https://www.datocms.com/docs/remix/get-started.md)
- [Managing images](https://www.datocms.com/docs/remix/remix-images.md)
- [Displaying videos](https://www.datocms.com/docs/remix/displaying-videos.md)
- [Structured Text fields](https://www.datocms.com/docs/remix/remix-structured-text-fields.md)
- [Adding SEO to pages](https://www.datocms.com/docs/remix/add-seo-to-remix.md)
- [Setting up a preview mode](https://www.datocms.com/docs/remix/setting-up-a-preview-mode-with-remix.md)
- [Real-time updates](https://www.datocms.com/docs/remix/real-time-updates.md)
- [DatoCMS Cache Tags and Remix](https://www.datocms.com/docs/remix/using-cache-tags.md)
- [Remix Blog
Words are nice... but code speaks louder. Dive into a fully commented project template,
showcasing these techniques (and more) in action.](https://www.datocms.com/marketplace/starters/remix-blog-example-template.md)