SEO with <meta> and <title>

One of the major reasons for implementing static rendering is SEO — so given that you’ve set up static rendering, you’re also going to want to know how to render <meta>, <title>, and other <head> tags.

Actually, Navi gives you two ways to do this.

Using react-helmet

Many React apps use the react-helmet package to manage their <head> tags. If you’re statically rendering your app with navi-scripts, then react-helmet is supported out of the box! You can import and use the <Helmet> component like in any other app, and the helmet’s <title> and <meta> tags will be statically rendered along with the rest of your content.

Using route()

Navi’s route() functions accepts head and title properties.

index.js
import { createMemoryNavigation, mount, route } from 'navi'
import { Router } from 'react-navi'
import React from 'react'
import ReactDOM from 'react-dom'

const routes = mount({
  '/': route({
    title: 'My Great Page',
    head: <>
      <meta name="description" content="My Great description" />
      <script>
        console.log('hello from your document head')
      </script>
    </>,
    view: <div>My Great Page</div>
  })
})

ReactDOM.render(
  <Router routes={routes} />,
  document.getElementById('root')
)
Build In Progress

    Internally, route() uses Navi’s withHead() and withTitle() functions — you can use these manually to accomplish the same thing, to apply <meta> tags to multiple routes, or to set a fallback title.

    When you declare a head or title using route(), withHead() or withTitle(), their values will be added to your Route object. This can be useful if you want to set their values from data read from the filesystem, a database, or an API.

    As long as you’re using Navi’s <View /> component, your route’s head and title properties will be rendered using react-helmet — just as if you’d specified them yourself using the <Helmet> component. This means that you can mix <Helmet> elements and head or title properties.