Generate Dynamic Meta tags, OG tags for SEO in create-react-app, using an expressJS middleware hosted in firebase functions.
Go to /links or /contact to see dynamic titles generated.
View Source to see what the crawlers and bots will see.
The tags generated inside the react app(using React Helmet or any other library will work nonetheless).
This only affects the initially rendered tags, and what bots/crawlers see or links unfurlings in Slack, WhatsApp, Twitter for SEO.
In the project directory,run:
This will install the dependencies listed in package.json.
This will install the dependencies listed in functions/package.json.
Install the Firebase CLI if you haven’t already.
Sign up for a Firebase account and create a new project
Run firebase login and login with your previous created Firebase account.
Then run the firebase init command from your project’s root
You need to choose the Hosting, and Functions services.
Do not forget to agree to Configure as a single-page app by replying with y
More details here
NOTE: Change
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
to
"rewrites": [
{
"source": "**",
"function": "app"
}
]
in firebase.json generated after firebase init
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Emulates HTTP functions and hosting for testing on local URLs.
hosting: Local server starts at: http://localhost:5000
functions: Emulator starts at: http://localhost:5001
Deploys the firebase app and firebase cloud functions.
Create React App
Hosting in Firebase
Cloud Functions for Firebase
ExpressJS
Meta Tags and SEO