Skip to content

Instantly share code, notes, and snippets.

@smakosh
Created December 10, 2021 22:41
Show Gist options
  • Save smakosh/e09781ebbe2029a3ebce7e7854cc5486 to your computer and use it in GitHub Desktop.
Save smakosh/e09781ebbe2029a3ebce7e7854cc5486 to your computer and use it in GitHub Desktop.
Next SEO component
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 = 'Ontwik';
const CLIENT_URL = 'https://ontwik-dev.com';
const DEFAULT_DESCRIPTION =
'Ontwik makes it easy to hire skilled remote developers to help you achieve your goals and build your product';
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 || 'Ontwik',
},
{
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