SEO Meta Tags

[codemonkey800]

Description

This PR sets up rendering the keywords and description meta tags on the hub. The keywords and description are sourced from this Airtable: https://airtable.com/shruYyyCiLOyBvfAD

Demo

https://seo-meta-frontend.dev.imaging.cziscience.com

Using the following script, I was able to verify that every page had the correct keywords and descriptions:

metadata.js

const cheerio = require('cheerio')
const axios = require('axios')

const FRONTEND_URL = 'https://seo-meta-frontend.dev.imaging.cziscience.com'

async function printMetadata(path) {
  console.log(`Metadata for ${path}`)

  let data
  try {
    const response = await axios.get(`${FRONTEND_URL}${path}`)
    data = response.data
  } catch (err) {
    data = err.response.data
  }

  const $ = cheerio.load(data)

  const keywords = $('meta[name=keywords]')
  const description = $('meta[name=description]')

  console.log(' keywords:', keywords.attr('content'))
  console.log(' description:', description.attr('content'))
  console.log()
}

async function main() {
  await printMetadata('/')
  await printMetadata('/about')
  await printMetadata('/contact')
  await printMetadata('/faq')
  await printMetadata('/privacy')
  await printMetadata('/plugins/napari-compressed-io')
  await printMetadata('/throw-error')
}

main()

$ node metadata

Metadata for /
 keywords: napari hub, napari, hub, plugin, image analysis, imaging, chan zuckerberg initiative, workflow, find, python, pypi, algorithm
 description: A site for napari plugins. Discover plugins that solve your image analysis challenges, learn how to install into napari, and share image analysis tools with napari’s growing community.

Metadata for /about
 keywords: napari hub, napari, hub, plugin, image analysis, imaging, chan zuckerberg initiative, about
 description: The napari hub is a service of the Chan Zuckerberg Initiative in collaboration with napari.
The napari hub seeks to solve many of the challenges and needs in finding analysis solutions to bioimaging problems.

Metadata for /contact
 keywords: napari hub, napari, hub, plugin, image analysis, imaging, chan zuckerberg initiative, contact
 description: If you would like to contact the napari hub team, you can do so in a variety of ways. For help with or ideas for the napari hub, please check out the discussion board.

Metadata for /faq
 keywords: napari hub, napari, hub, plugin, image analysis, imaging, chan zuckerberg initiative, workflow, find, python, FAQ, frequently asked questions, question
 description: We hope these questions will help you in your napari plugin journey! We endeavour to update this regularly. If you need additional information or assistance, check out the Contact page or you can reach a human at [email protected].

Metadata for /privacy
 keywords: napari hub, napari, hub, plugin, image analysis, imaging, chan zuckerberg initiative, privacy
 description: Information about napari hub's website privacy notice.

Metadata for /plugins/napari-compressed-io
 keywords: napari-compressed-labels-io, Draga Doncila, napari hub, napari, hub, plugin, image analysis, imaging, chan zuckerberg initiative
 description: Plugin exploring different options for reading and writing compressed and portable labels layers in napari.

Metadata for /throw-error
 keywords: undefined
 description: undefined

[klai95]

LGTM!