Skip to main content

SEO

Metadata​

import { Helmet } from 'react-helmet'

export default function App() {
  const seo = {
    title: 'About',
    description:
      'This is an awesome site that you definitely should check out.',
    url: 'https://www.mydomain.com/about',
    image: 'https://mydomain.com/images/home/logo.png',
  }

  return (
    <Helmet
      title={`${seo.title} | Code Mochi`}
      meta={[
        {
          name: 'description',
          property: 'og:description',
          content: seo.description,
        },
        { property: 'og:title', content: `${seo.title} | Code Mochi` },
        { property: 'og:url', content: seo.url },
        { property: 'og:image', content: seo.image },
        { property: 'og:image:type', content: 'image/jpeg' },
        { property: 'twitter:image:src', content: seo.image },
        { property: 'twitter:title', content: `${seo.title} | Code Mochi` },
        { property: 'twitter:description', content: seo.description },
      ]}
    />
  )
}

Best Practices​

  • Server side rendering (e.g. Next.js).
  • Pre-Rendering
  • Mobile performance optimization (e.g. minify resources, code splitting, CDN, lazy loading, minimize reflows).
  • SEO-friendly routing and URL management.
  • Google webmaster tools
  • <title> and <meta> in <head> (with tool like react-helmet).
  • Includes a robots.txt file.

References​