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:

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:

<head> output

<!-- 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." />

You can find more about Metadata and other useful functions here:

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:

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:

Use if you want to generate favicon from .png files.

PreviousGet started NextCustom styles

Last updated 1 year ago