Create dynamic page titles

[raney24]

Create dynamic page titles

[WillGarman]

So we have 2 options, we can pass the SEO details to <Layout/>. Or we can use the <SEO/> module that is already made.

Either way we can pass data from queries. I like the idea of having an SEO component on each page, it will be very easy to find and change SEO info.

Example:

return (
    <Layout>
      <SEO title={querydatahere} description="" keywords="" />
      ...

@raney24

[raney24]

@WillGarman Let's use the <SEO> module, that makes more sense to me

[WillGarman]

@raney24 I think we should come up with a system of giving page SEO details soon. Such as a Sanity doc or if we just want to hard code them in for now and go back later.

But just so we can start having it uniform for new pages built

Reference line 16:

 return (
        <Layout pageTitle="Salesforce | Awesome Inc">

(or just not worry about it for now and go back later and change all the pages)

[raney24]

@WillGarman I like having a system right now. My thought is this flow:

1. Check if page title is defined by sanity (not sure how we want to do this? This is maybe phase 2
2. Use a variable defined in component
3. Then implement like so:

// layout.js
<title>{ page.title } | Awesome Inc </title>

// {page_name}.js
const SamplePage = () => {

  pageTitle = "Sample Page"  // Do this because we can easily add a condition for if we ever use Sanity docs

  return (
    <Layout pageTitle={pageTitle}>
    ...
  )
}

[WillGarman]

Looks good to me, do we want to just use the title in in the Layout tag instead of doing the SEO tag.

Also do we want to auto add | Awesome Inc to the end of every page. Just not sure if this will affect SEO.

[raney24]

@WillGarman actually, it probably makes more sense to just use the <SEO> tag for title, description, and keywords. The same way I was describing above, but just inside <SEO> instead of <Layout>. To me, that makes more sense, Layout is more like design/looks. I could be convinced otherwise.

And yes, I think when we implement <SEO>, it should add | Awesome Inc to the end.