Meta tags

Meta tags are used to describe the content of a page. It's important to set these tags for each page, as it helps search engines understand what the page is about and can improve the SEO of your app.

Per default, your application has set a base title for each page, which is defined in the app.vue file of the marketing app using the useHead composable:

useHead({
  titleTemplate: (title) =>
    title ? `${title} | supastarter for Nuxt Demo` : "supastarter for Nuxt Demo",
});

This setup will result in the title supastarter for Nuxt Demo for the home page and each page that has no title set.

If a title is set for a page, the template will be applied to the title, so if your page title is Changelog, the title will be Changelog | supastarter for Nuxt Demo.

To set meta tags for a specific page, use the useSeoMeta composable in that page:

<script setup lang="ts">
useSeoMeta({
  title: "Changelog",
  description: "The description of the changelog page",
});
</script>

To have an internationalized title, you can also use translations:

<script setup lang="ts">
const { t } = useI18n();

useSeoMeta({
  title: t("changelog.title"),
  description: t("changelog.description"),
});
</script>

Learn more about how to set meta tags in the official Nuxt documentation.