> For the complete documentation index, see [llms.txt](https://nextjs-docs.adarshdubey.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextjs-docs.adarshdubey.com/get-started/seo.md).

# SEO

## Meta tags

All the useful SEO tags are already present in `src/app.layout.tsx` file. You can simply edit them and start using them.

Below is a code snippet of all the tags used:

{% code title="src/app/layout.tsx" lineNumbers="true" fullWidth="false" %}

```typescript
export const metadata: Metadata = {
  title: 'NextJS Starter Template by Adarsh Dubey',
  description:
    'Simple and easy to use nextjs 14 starter template made by Adarsh Dubey.',
  metadataBase: new URL('https://nextjs.adarshdubey.com'),
  openGraph: {
    title: 'NextJS Starter Template by Adarsh Dubey',
    description:
      'Simple and easy to use nextjs 14 starter template made by Adarsh Dubey.',
    url: 'https://nextjs.adarshdubey.com',
    siteName: 'NextJS Starter Template by Adarsh Dubey',
    images: {
      url: '/opengraph-image.png',
      width: 1920,
      height: 960,
      alt: "The only nexjs starter kit you'll ever need.",
    },
  },
};
```

{% endcode %}

The above code snippet will output the following meta tags:

{% code title="<head> output" lineNumbers="true" fullWidth="false" %}

```markup
<!-- General Tags -->
<title>NextJS Starter Template by Adarsh Dubey</title>
<meta name="description" content="Simple and easy to use nextjs 14 starter template made by Adarsh Dubey." />
<!-- Open Graph tags below -->
<meta property="og:title" content="NextJS Starter Template by Adarsh Dubey" />
<meta property="og:description" content="Simple and easy to use nextjs 14 starter template made by Adarsh Dubey." />
<meta property="og:url" content="https://nextjs.adarshdubey.com/" />
<meta property="og:site_name" content="NextJS Starter Template by Adarsh Dubey" />
<meta property="og:image:url" content="https://nextjs.org/og.png" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta property="og:image:url" content="https://nextjs.adarshdubey.com/opengraph-image.png" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="960" />
<meta property="og:image:alt" content="The only nextjs starter kit you'll ever need." />
```

{% endcode %}

You can find more about Metadata and other useful functions here: <https://nextjs.org/docs/app/api-reference/functions/generate-metadata>

## Open Graph Image

The open graph image should be in your `app/` directory. The specified name is `opengraph-image.png` and then it automatically detects and uses the image.

You also need to use `metadataBase` in the `metadata` object in `src/app/layout.tsx` file and set a base url. When done this way, Nextjs will automatically detect the image and use it. All the search engines or websites will be able to use the image.

The open graph image to the template is in the following figma file. You can edit it and use it if you want:

{% embed url="<https://www.figma.com/file/N4DOT4OF6hayDaPJnVEuMg/NextJS-Starter-Kit?mode=design&node-id=0:1&t=n4khvdE2lYeNGwTQ-1&type=design>" %}
Figma file for open graph image and favicon
{% endembed %}

## Favicon

Favicon for this template should also be in the `src/app/` directory. The naming convention is naming it `favicon.ico` and Nextjs will automatically use it as the favicon.

There are a lot more things you can do, check out the full guide here: <https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons>

Use [favicon.io](https://favicon.io/) if you want to generate favicon from `.png` files.
