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
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?
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>
only next(or any ssr) can make it work.
or just:
<script>
export default () => {
document.title = 'my title';
return $render;
};
</script>
@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.
I had a similar issue and ended up using router hooks along with DOM manipulation to change title and meta tags on each route change. It’s a bit manual, but works fine for me.
I needed this setup because I’m working on some seo automation, and making sure each page has the right meta info is part of the process.
Managing meta tags in a Single Page Application (SPA) like Framework7 can be a bit tricky since the index file doesn’t naturally update when you navigate between routes. I’ve found that the most reliable way is to use the pageInit or pageBeforeIn component events to manually update the document title and meta descriptions.
If you find yourself doing this for a lot of pages, it might be worth creating a small helper function that you can call from your route’s on events. It keeps the code much cleaner than repeating the document.querySelector logic everywhere. Also, just a heads-up that if you’re looking for SEO-friendly social sharing (like Open Graph tags), you might still need a server-side pre-renderer, as some bots don’t execute the JavaScript needed to see those dynamic changes.