[SDK 49, V2] Static files doesn't have corresponding meta tags
dheerajneelam-sigfyn opened this issue · comments
Which package manager are you using? (Yarn is recommended)
yarn
Summary
I am using Expo 49 with Router v2.
I have given {"bundler": "metro", "output": "static" } in app.json
I have some routes in app folder and they are being exported well with npx expo export --platform web under dist folder.
I am using Head component offered by expo-router/Head expecting the static html that were rendered in dist folder would have their own meta tags as defined in each page. But the static html files that are rendered only persist the meta tags that are defined in app/+html.tsx. I tried deleting the +html.tsx file, but it's still the same. I need custom meta tags for each individual pages because of SEO. Crawlers would not understand if all the generated pages have same meta tags.
I agree that the <Head> component would dynamically update the meta tags and when I inspect the page, they are evident, but the html files itself doesn't have the correct one, that's the issue.
Am I missing something here?
Minimal reproducible example
Create an expo-router project.
Create some routes and use <Head> from expo-router/Head.
Optional: Create a +html.tsx file under app folder with some meta title and description.
Then set the exporting bundler to metro and output to static. The html files exported will all persist the meta tags from +html.tsx ( if you created it ) and won't have the meta tags given in <Head> components for each page.
We have an E2E test for this here, I cannot reproduce this behavior, and you didn't provide a reproducible example.
I'm with the same problem. When the build is done, que html of each page do not have the meta tags.
Which package manager are you using? (Yarn is recommended)
yarn
Summary
I am using Expo 49 with Router v2. I have given
{"bundler": "metro", "output": "static" }in app.jsonI have some routes in app folder and they are being exported well with
npx expo export --platform webunder dist folder.I am using
Headcomponent offered byexpo-router/Headexpecting the static html that were rendered in dist folder would have their own meta tags as defined in each page. But the static html files that are rendered only persist the meta tags that are defined inapp/+html.tsx. I tried deleting the+html.tsxfile, but it's still the same. I need custom meta tags for each individual pages because of SEO. Crawlers would not understand if all the generated pages have same meta tags.I agree that the
<Head>component would dynamically update the meta tags and when I inspect the page, they are evident, but the html files itself doesn't have the correct one, that's the issue.Am I missing something here?
Minimal reproducible example
Create an expo-router project.
Create some routes and use
<Head>fromexpo-router/Head.Optional: Create a
+html.tsxfile underappfolder with some meta title and description.Then set the exporting bundler to
metroand output tostatic. The html files exported will all persist the meta tags from+html.tsx( if you created it ) and won't have the meta tags given in<Head>components for each page.
Did you solve the problem?
If someone else comes across this,
I found this issue after experiencing the problem myself. When you run npx expo export --platform web, expo will make your project and if you have <Head> from expo-router/Head it will attempt to add a head tag. But if you access something like window.location.hostname it will fail as the command is running in node. No error or warning will be given and the headers will work during runtime just not in the static files. To fix this check that whatever is in the <Head/> will work in both node and web. This has also been tested with +html.tsx.