search

SEO

hashtag
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:

src/app/layout.tsx
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.",
    },
  },
};

The above code snippet will output the following meta tags:

You can find more about Metadata and other useful functions here: https://nextjs.org/docs/app/api-reference/functions/generate-metadataarrow-up-right

hashtag
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:

Figma file for open graph image and favicon

hashtag
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-iconsarrow-up-right

Use favicon.ioarrow-up-right if you want to generate favicon from .png files.

PreviousGet startedNextCustom styles

Last updated