Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SEO Next js

Easily implement good SEO in your Next js app using next-seo

import SEO from "config/next-seo.config";
....
<DefaultSeo {...SEO} />
....
....
<SEO
title="Some title"
url="/"
cover="image-link"
/>
....
export default {
description: 'Description',
openGraph: {
type: 'website',
locale: 'en_US',
url: 'https://www.example.com/',
site_name: 'Example',
images: [
{
url: 'https://example.com/cover.png',
width: 876,
height: 438,
alt: 'Example',
},
],
},
twitter: {
handle: '@example',
site: '@example',
cardType: 'summary_large_image',
},
};
import { NextSeo } from 'next-seo';
export interface SeoProps {
url?: string;
title?: string;
description?: string;
cover?: string | null;
}
const SEO = ({ url, title, description, cover }: SeoProps) => {
const APP_NAME = 'Example';
const CLIENT_URL = 'https://example.com';
const DEFAULT_DESCRIPTION = 'Description';
return (
<NextSeo
title={title ? `${title} | ${APP_NAME}` : APP_NAME}
description={description || DEFAULT_DESCRIPTION}
additionalMetaTags={[
{
name: 'image',
content: cover || `${CLIENT_URL}/assets/seo/cover.png`,
},
{
property: 'og:title',
content: title || APP_NAME,
},
{
property: 'og:description',
content: description || DEFAULT_DESCRIPTION,
},
{
property: 'og:url',
content: `${CLIENT_URL}${url}`,
},
{
property: 'og:image',
content: cover || `${CLIENT_URL}/assets/seo/cover.png`,
},
{
name: 'twitter:url',
content: `${CLIENT_URL}${url}`,
},
{
name: 'twitter:title',
content: title || APP_NAME,
},
{
name: 'twitter:description',
content: description || DEFAULT_DESCRIPTION,
},
{
name: 'twitter:image:src',
content: cover || `${CLIENT_URL}/assets/seo/cover.png`,
},
{
name: 'twitter:image',
content: cover || `${CLIENT_URL}/assets/seo/cover.png`,
},
]}
/>
);
};
export default SEO;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment