Skip to content

Instantly share code, notes, and snippets.

@iksent

iksent/SEO.tsx

Last active March 25, 2022 09:52
Show Gist options
  • Save iksent/5df2ea41863b337104ad26b3ccdfd499 to your computer and use it in GitHub Desktop.
Save iksent/5df2ea41863b337104ad26b3ccdfd499 to your computer and use it in GitHub Desktop.
Download ZIP
Simplified React Component for SEO
Raw
SEO.tsx
import React from 'react'
import Head from 'next/head' // or react-helmet
const SEO = () => {
// Fill this object with your data (from i18n / props / hooks / etc.)
const seo = {
name: 'Project Name',
title: 'Page title',
description: 'Page description',
image: 'path/to/page-social-image',
url: 'https://example.com',
twitter: 'project_twitter',
isArticle: false, // Article or Page
locale: 'en_US', // ru_RU
}
return (
<Head>
<title>{seo.title}</title>
<meta name="description" content={seo.description} />
<meta name="image" content={seo.image} />
<meta property="og:site_name" content={seo.name} />
<meta property="og:locale" content={seo.locale} />
<meta property="og:url" content={seo.url} />
<meta property="og:type" content={seo.isArticle ? 'article' : 'website'} />
<meta property="og:title" content={seo.title} />
<meta property="og:description" content={seo.description} />
<meta property="og:image" content={seo.image} />
<meta property="og:image:alt" content={seo.title} />
<meta name="twitter:creator" content={seo.twitter} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={seo.title} />
<meta name="twitter:description" content={seo.description} />
<meta name="twitter:image" content={seo.image} />
<meta name="twitter:image:alt" content={seo.title} />
</Head>
)
}
export default SEO
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment