# 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 React Router 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 React Router, you can specify meta tags for a page using the [`meta` export](https://reactrouter.com/start/framework/route-module):
```tsx
export function meta({ data }: Route.MetaArgs) {
return [
{ title: 'Something cool' },
{
name: 'description',
content: '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 React Router by using the `toRemixMeta` function, which generates an array of meta descriptors compatible with React Router's `meta` export. The helper keeps the Remix name for backwards compatibility, but its output is exactly what React Router expects:
app/routes/home.tsx
```tsx
import type { Route } from './+types/home';
import { toRemixMeta } from 'react-datocms';
import { load } from '~/lib/datocms';
const HOMEPAGE_QUERY = `
{
blog {
seo: _seoMetaTags {
attributes
content
tag
}
}
}`;
export async function loader() {
return load(HOMEPAGE_QUERY);
}
export function meta({ data }: Route.MetaArgs) {
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?
> React Router offers a [`links`](https://reactrouter.com/start/framework/route-module) export to define which `` elements to add to the page, but it doesn't receive any loader data, so you cannot use it to render favicon meta tags! The best way to render them is using `renderMetaTags` in your root component, like in the example.
app/root.tsx
```tsx
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useRouteLoaderData,
} from 'react-router';
import { renderMetaTags } from 'react-datocms';
import { load } from '~/lib/datocms';
export async function loader() {
return load(`
{
site: _site {
favicon: faviconMetaTags(variants: [icon, msApplication, appleTouchIcon]) {
attributes
content
tag
}
}
}
`);
}
export function Layout({ children }: { children: React.ReactNode }) {
// Layout is also rendered by error boundaries, when no loader data is available
const data = useRouteLoaderData('root');
return (
{data && renderMetaTags(data.site.favicon)}
{children}
);
}
export default function App() {
return ;
}
```
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 "React Router"
- [React Router + DatoCMS Overview](https://www.datocms.com/docs/react-router.md)
- [Managing images](https://www.datocms.com/docs/react-router/managing-images.md)
- [Displaying videos](https://www.datocms.com/docs/react-router/displaying-videos.md)
- [Structured Text fields](https://www.datocms.com/docs/react-router/structured-text-fields.md)
- [Adding SEO to pages](https://www.datocms.com/docs/react-router/seo-management.md)
- [Setting up a preview mode](https://www.datocms.com/docs/react-router/setting-up-a-preview-mode.md)
- [Real-time updates](https://www.datocms.com/docs/react-router/real-time-updates.md)