Add meta tags to pages

[notangelmario]

Add meta tags to all pages to improve link querying and social links.

[sinyo-matu]

I got an idea :wink:

1. Generate an additional file that may be called page_meta.json by Init.ts. It includes basic meta information that depends on users' routes/.
2. Create a PageMeta Component that receives the property of meta information and generates the actual meta tags.
3. Prompt users to import page_meta.json and pass it over to the PageMeta Component.
4. Users can edit page_meta.json to add their customize meta information under specific rules.

page_meta.json for example:

{
  "routes": {
    "index/": {
      "title": "index page",
      "keywords": "foods, art",
      "url": "http://example.com/index",
      "site_name": "the site name",
      "description": "some descriptions"
    },
    "about/": {
      "title": "about page",
      "keywords": "about",
      "url": "http://example.com/about",
      "site_name": "the site name",
      "description": "some descriptions"
    }
  }
}

PageMeta for example:

export default function PageMeta({ metaInfo }: { metaInfo: string }) {
  const { title, keywords, url, siteName, description } = parseMetaInfo(
    metaInfo,
  );
  return (
    <>
      <meta name="description" content={description} />
      <meta name="keywords" content={keywords} />
      <meta property="og:url" content={url} />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:site_name" content={siteName} />
    </>
  );
}

[xstevenyung]

I like the idea of centralize metatags.

A few points though:

1. I would much rather use a .ts file that help me autocomplete fields (it's possible with json-schema but Typescript offer more options like programmatically define default value etc.)
2. We can maybe utilize Fresh new plugin system (I don't know if metatags are yet supported)

@notangelmario what do you think ?

[sinyo-matu]

I like the idea of centralize metatags.

A few points though:

1. I would much rather use a .ts file that help me autocomplete fields (it's possible with json-schema but Typescript offer more options like programmatically define default value etc.)
2. We can maybe utilize Fresh new plugin system (I don't know if metatags are yet supported)

@notangelmario what do you think ?

Yeah, I totally agree with you. And I forgot about the new Plugin system! I will check what we can do with it.

[notangelmario]

@xstevenyung Html injection is not yet supported in Fresh. But there are plans to achieve it in the near future. Should we make a solution before this feature rolls out, or should we wait?

@sinyo-matu We could apply your idea, it looks great!

[sinyo-matu]

I've tried the fresh plugin system. And it does easy to use! But unfortunately, the plugin system only allowed us to run a custom javascript file on the client side currently. We can manipulate DOM in this javascript but it is unwanted for SEO.

In spite of It being almost a waste of time, actually, I write a live demo of plugin you guys can check: the index page and the about page's meta tags loaded by a plugin. And the source information of meta tags is from fresh-seo.config.ts.

source code is here.

[xstevenyung]

yeah that's what I thought, we can make an initial version using a <Meta /> component and give instruction on how to add it to the _app.tsx for every pages.

the solution would definitely be good enough.

@sinyo-matu the initial version looks promising! could you push a PR so we can check it out and discuss it further?

[notangelmario]

We could make the init.ts add the component automatically though. With a little bit of tinkering we could automate this process.

[xstevenyung]

@notangelmario If we manage to do it properly, but I don't think it should be a requirement to automate this in the init.ts script.

It could take a lot of time and be really tricky to add the proper line at the right place without overriding user code (for example if the user already has a _app.tsx).

[notangelmario]

@xstevenyung Yeah... I guess adding lines to app.tsx could spawn some problems and a lot of hacky code. A library to help with this might be a little too much of a hassle.

[sinyo-matu]

I will submit a PR later. Let's discuss it there!