Commit 9d9d31ec authored by Dan Abramov's avatar Dan Abramov Committed by GitHub
Browse files

Add instructions on <meta> tags

parent d803e520
No related merge requests found
Showing with 19 additions and 0 deletions
+19 -0
...@@ -21,6 +21,7 @@ You can find the most recent version of this guide [here](https://github.com/fac ...@@ -21,6 +21,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Adding Custom Environment Variables](#adding-custom-environment-variables) - [Adding Custom Environment Variables](#adding-custom-environment-variables)
- [Integrating with a Node Backend](#integrating-with-a-node-backend) - [Integrating with a Node Backend](#integrating-with-a-node-backend)
- [Proxying API Requests in Development](#proxying-api-requests-in-development) - [Proxying API Requests in Development](#proxying-api-requests-in-development)
- [Adding `<meta>` Tags](#adding-meta-tags)
- [Deployment](#deployment) - [Deployment](#deployment)
- [Now](#now) - [Now](#now)
- [Heroku](#heroku) - [Heroku](#heroku)
...@@ -501,6 +502,24 @@ If the `proxy` option is **not** flexible enough for you, alternatively you can: ...@@ -501,6 +502,24 @@ If the `proxy` option is **not** flexible enough for you, alternatively you can:
* Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)). * Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)).
* Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app. * Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app.
## Adding `<meta>` Tags
You can edit the generated `index.html` and add any tags you’d like to it. However, since Create React App doesn’t support server rendering, you might be wondering how to make `<meta>` tags dynamic and reflect the current URL.
To solve this, we recommend to add placeholders into the HTML, like this:
```html
<!doctype html>
<html lang="en">
<head>
<meta property="og:title" content="$OG_TITLE">
<meta property="og:description" content="$OG_DESCRIPTION">
```
Then, on the server, regardless of the backend you use, you can read `index.html` into memory and replace `$OG_TITLE`, `$OG_DESCRIPTION`, and any other placeholders with values depending on the current URL. Just make sure to sanitize and escape the interpolated values so that they are safe to embed into HTML!
If you use a Node server, you can even share the route matching logic between the client and the server. However duplicating it also works fine in simple cases.
## Deployment ## Deployment
By default, Create React App produces a build assuming your app is hosted at the server root. By default, Create React App produces a build assuming your app is hosted at the server root.
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment