Search Engine Optimization & distribution helpers

SEO is mostly about the quality & quantity of the content, how many people are sharing and commenting on it on social media, the amount of backlinks from other sites, and the speed of page loads (refer to docs on performance for that). But there are some things you can do to help search engines understand your content better and boost - that's the technical side of SEO.

By default, the template includes:

A battle-tested seo schema with a title, description, image and canonical URL
publishStatus field for setting the visibility of different routes
Configured sitemap.xml with all public routes of the website
Optimized <head> tags in the <SEOHead> component
- Proper canonical
- noindex for hidden routes
- OG images cropped to the standard pattern
Linking to routes' translations with hreflang links, if there's any
RSS feed for articles, if site has a blog

Writing JSON-LD schema

If you want to go a step further, you can add Schema.org (opens in a new tab) notations to your pages, a way to tell search engines what your content is about. You can use the SEOHead component to add a schema to your page:

app/components/SEOHead.tsx

export const SEOHead = (props) => {
  const { pathname } = useLocation()
 
  // ...
  const jsonLdSchema = buildStructuredData(props)
  return (
    <>
      {jsonLdSchema && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLdSchema),
          }}
        />
      )}
    </>
  )
}
 
function buildStructuredData(data) {
  const documentType = data?.routeData?._type
 
  if (documentType === 'blog.article') {
    return {
      '@context': 'https://schema.org',
      '@type': 'BlogPosting',
      headline: data?.routeData?.title,
      // ...
    }
  }
}

Performance tuning Integrating w/ third parties