Proper way to set Meta info for Pages?

Questions
1

What are the proper ways to set meta Title, Meta Description, etc for every F7 Pages for every route?

My purposes: SEO, Browser tab title, Serve data to Search engine crawlers etc.

I know about document.title. But I guess there could have any better way in Framework 7!

I’m using Next JS

2

Guys, I guess I should use NextJS’s component. I already implemented it inside component and working fine.

But then title/meta info takes some time to show up! in F7, there should a better way to use Head component. Any suggestion?

3

Not sure about SEO, because Framework7 is mostly used for SPA. For page title etc, you could add an attribute to every page in your components to set the page title, like this:

<template>

  <div class="page" data-page-title="This is the page title">
	<div class="navbar">
      ...
	</div>
	<div class="page-content">
      ...
	</div>
  </div>

</template>

And then in your app component, pull this from the loaded component and set document.title. Depending on your app structure, pseudocode looks like this:

<script>
export default (props, { $store, $tick, $f7, $el, $onMounted, $f7router }) => {

  $f7.on('pageInit', (e) => {
    let page_title = e.$el.attr('data-page-title');
    document.title = page_title || document.title;
  });

}
</script>
4

only next(or any ssr) can make it work.

or just:

<script>
export default () => {
  document.title = 'my title';
  return $render;
};
</script>
5

@deejay Yes that’s also possible. But I use to code things like this more abstract. For example, a while ago I had to add a share plugin to share product/pages. I could then just pull the same data-page-title attribute and use it for the share text.