Pages and meta

Add a page in three steps. Its title and description become the tags search engines and social networks read.

Edit page

The Page template

Page draws the header, a heading block, your content and the footer. It renders title as the only h1 of the page.

src/pages/Pricing.jsx
import { Page } from '../components/Page'

const Pricing = () => (
  <Page title='Pricing' meta='Simple plans for every team.'
    description='Plans and prices for teams of every size.'>
    <section className='m-b-48'>
      <h2 className='title'>Plans</h2>
      <p>…</p>
    </section>
  </Page>
)

export { Pricing }

Add the route

Three places know about a page:

  1. src/App.jsx: the route itself.
  2. src/entry-server.jsx: the routes list the build prerenders.
  3. public/sitemap.xml: the address for search engines.
src/App.jsx
<Route path='pricing' element={<Pricing />} />

Pages are rendered once at build time. Code that runs during render must not touch window, document or localStorage. Read them in useEffect.

Title and description

title becomes Pricing — Avior in the browser tab and in Open Graph. description becomes the meta description. Without it a page inherits the site description and looks the same as every other page in search results.

Menus are data in src/data/menu.js. An anchor such as #showcasescrolls to the section on the home page and works from every other page too.