Meta SEO and PWA tags

[pi0]

Nuxt PWA module is providing a preset of meta tags helping both SEO and PWA application spec compatibility and integrated defaults working out of the box with pwa meta and icon (See https://pwa.nuxtjs.org/meta).

Over time, it became a no-brainer that almost every Nuxt project needs most of these meta tags. The idea is to that, with the new meta tags API provided by Nuxt 3, we can introduce a built-in functionality for SEO/PWA friendly meta tags and in the next major version of PWA module depending on this.

Defaults

Initial options we can migrate from pwa meta:

• charset (default utf-8)
• viewport (default width=device-width, initial-scale=1 ?)
• name
• description
• author
• lang
• ogSiteName / ogTitle / ogDescription / ogHost (more)

Notes:

• I've avoided introducing nested object like og: { siteName } for sake of API and implementation simplity
• name is used instead of title since while we shall use it for default value of title, it has purposes like default for ogSiteName and is usually site's short name
• Vendor and pwa specific meta are not included. See "Next Steps" section

Usage

Nuxt config:

export default defineNuxtConfig({
  meta: {
    charset: 'utf-8'
  }
})

Inside app (composables

useMeta({
  author: 'Jon Doe'
})

As a component:

<template>
<div>
   <Meta :lang="article.lang" />
</div>

Next steps

• Decide if we should migrate icon auto-resizing / meta the the core too
• Decide if we should migrate PWA specific meta like themeColor and appleStatusBarStyle to the core too
• Vendor-specific tags like twitterCard
• Explore functionality extending support using Nuxt modules and plugins

[pi0]

Related module to inspire: https://github.com/ihavecoke/nuxt-seo-meta by @ihavecoke

[vanling]

Is functionality like "titleTemplate" coming back? While it is easy to add it myself now, it was one of the small things i was missing when i started with nuxt3.

[vanling]

Was still looking for a solution, thought I found it with in docs on useHead and definePageMeta, did not work for me!

Later found a clean solution using useState and useHead <3 in another issue here https://github.com/nuxt/framework/issues/3522#issuecomment-1074168040

I personally think the useState example would be better in the documentation, because there are probably more people like me who dont understand the limitations of definePageMeta ( like me :P haha )

[maxvanweenen]

useMeta seems to break the build.

Just adding

<script setup>
import {useMeta} from "nuxt3/dist/meta/runtime/composables.mjs";

useMeta({
  title: '2test'
})

</script>

causes the following build error:
error: Could not resolve "#app" (mark it as external to exclude it from the bundle)

[sewalsh]

Remove the import statement.

[harlan-zw]

It's not exactly clear what level of implementation useMeta is meant to offer when set up like this. If the intent is for it to be high level then I have some ideas on how to make it more initiative.

From the top of my mind so may need some more thoughts

Author

Not too sure about the PWA side of things, but it's not clear what author would do in a web context? If it's for the article og then the user should probably have access to the other article og attributes in a way similar to ogTitle

Defaults for open-graph

Directly copying the meta title and description to og is a common practice so that the preview is properly shown for link expanding. Therefore it's useful to have a way to configure them both in one go like the https://github.com/ihavecoke/nuxt-seo-meta package.

Ideally setting the title would also set the default value of ogTitle to title.

useMeta({
  title: 'My Title'
})
// <title>My Title</title>
// <meta property="og:title" content="My Title">

This could be overridden by manually specifying the ogTitle or disabling og tags somehow.

Indexable

Pages are indexable by default. Users can opt-out by passing in indexable

definePageMeta({
  indexable: false
})

It would be great if this would somehow set this

useMeta({
  meta: [
    { name: 'robots', content: 'noindex' }
  ]
 })

Mostly just a very obvious way to ensure pages that shouldn't be indexed, aren't.

This could also be useful for any sort of static analysis on which pages to include in the sitemap or robots.txt

[pi0]

Thanks for the feedback 💚

Indeed we want to introduce some high-level options as of pwa meta and similary, generic options like title and description will be used for default values of specific tags like ogTitle and site manifest.

author is used for example purposes in RFC and probably not to be added in initial version.

Regarding defaults like lang, dir and locale, i'm afraid we should let browsers do their default behavior unless website author explicitly opts-in to set them.

I love idea for easy indexing opt-out! We might introduce something more conventional like noindex: true for meta.

[harlan-zw]

Oh yeah good call on lang and dir, I did mention it as Google Lighthouse recommends setting it. But I think it could be dangerous so I've removed it from my comment.

noindex: true sounds good, I did realise after that definePageMeta may be a more appropriate spot for it, just not too sure how that would forward itself to the meta tags

[atinux]

Following on https://github.com/nuxt/framework/issues/3878

[shayr1]

I think that lang and dir are very important, especially for sites that are in Hebrew or Arabic. Consider the case where a user is from Israel, and there is a Hebrew version of site that will match them better, however the browser is in English (many people use English version of OSs, for various reasons). It would be that the browser will set a lang="en" and then it follows that dir will be ltr, which will break the whole site.

[andysay]

title, titleTemplate useHead no render in html code after render?

[stafyniaksacha]

How about using https://vite-plugin-pwa.netlify.app/

[vinayakkulkarni]

This certainly looks interesting as one of the main features for PWA is support for sw out of the box

[ChristopherJohnson25]

Anyone using vite-plugin-pwa successfully?

[userquin]

yes, but only using Vite: https://github.com/userquin/top-nuxt3

but it seems the output on the deploy is broken (on local works):

• pwa-build.ts not working? ctwhome/top-nuxt3#3
• https://github.com/nuxt/framework/issues/2890

[Redemption198]

Great package for PWA asset generation

[ram-you]

A good plugin that just works : Nuxt 3 PWA

[ennioVisco]

Inspired by https://github.com/nuxt/framework/issues/5565#issuecomment-1172925533, I want to point our that we should distinguish two "kinds" of meta tags

• Critical tags (charset, viewport, etc. - see https://webmasters.stackexchange.com/questions/11623/order-of-html-meta-tags#:~:text=A%20SEO%20company%20suggested%20we,can%20utilize%20these%20two%20tags for a list)
• SEO tags (not urgent)

Critical tags are the tags that should appear immediately after loading the page, otherwise, they might compromise the behavior of the page.
It could even make sense to resolve them at compile time.

[toniengelhardt]

A cool addition to this module would be "native"-mode, aka. cache-first and when the PWA install prompt is triggered cache all routes immediately. This would allow building PWAs that feel and behave almost like native apps with full offline support.

Currently the problem is, if you install the PWA (potentially also as Trusted Web Activity from the PlayStore) and the device goes offline only routes that have been visited before work because the other ones haven't been cached yet, leading to bad UX.

With the exception of a few device APIs this would be the last puzzle piece to make a TWA feel truly native.

[hermesalvesbr]

Any status for finish this module?

[harlan-zw]

nuxt-hedge ships will flat meta tag support: https://github.com/harlan-zw/nuxt-hedge/blob/main/src/runtime/composables.ts

The new head management implementation will likely ship this as well, so may land as a nuxt core composable (will see).

[edwh]

I'm also wondering how this module is coming along.

With Nuxt2, I have seen a problem for a number of users on Firefox where the network requests become extremely slow (30s or so each). I can workaround this by disabling service workers in Firefox, but a) that needs to be done on a per user basis and b) Chrome doesn't have that feature.

I'm interested in whether the Nuxt3 version will have the same issue, and also whether it will have any features to allow disabling of the service workers at runtime.

[Thenafi]

Can anyone help how to get Started with PWA in new nuxt3 ??

[ram-you]

Try https://github.com/kevinmarrec/nuxt-pwa-module

[funkel1989]

is this module still under development or is the current recommendation to use this module: https://github.com/kevinmarrec/nuxt-pwa-module ?

If this module is no longer in development can we update the main discussion post to say so to avoid having to read this entire discussion to figure out the current status?

[davidstackio]

It looks like this could be the official module for PWA in Nuxt 3: https://github.com/vite-pwa/nuxt

[userquin]

I have no idea if https://github.com/vite-pwa/nuxt becomes the official PWA module for Nuxt 3 (will work only with Vite: will not have webpack support), here some plans we have for the module:

• add i18n PWA web manifest support (WIP)
• add theme color PWA web manifest support (WIP)
• add i18n and theme color PWA web manifest support (WIP)
• add PWA icons generation (similar to https://github.com/kevinmarrec/nuxt-pwa-module)

[davidstackio]

@userquin Either way, great work! For my use case, Vite is fine (no webpack needed), so for me it'll be "official" :)

[snakysnake]

I am hyped for PWA Support with i18n. Gonna be big

[harlan-zw]

@pi0 Maybe it's worth changing the scope of this discussion to just "Nuxt PWA" considering we have useSeoMeta now?