kylefang/create-react-app
1
0
Fork 0
mirror of https://github.com/zhigang1992/create-react-app.git synced 2026-04-24 05:05:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Combine pages about head tags

Browse Source
This commit is contained in:
Kristofer Selbekk
2018-10-08 19:33:40 +02:00
parent 001cdeadff
commit 9f9f505efb
3 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docusaurus/docs/generating-dynamic-meta-tags-on-the-server.md
View File

@@ -1,18 +0,0 @@
---
id: generating-dynamic-meta-tags-on-the-server
title: Generating Dynamic `<meta>` Tags on the Server
---
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.

23
docusaurus/docs/changing-the-page-title.md → docusaurus/docs/title-and-meta-tags.md
View File

@@ -1,8 +1,11 @@
---
id: changing-the-page-title
title: Changing the <title />
id: title-and-meta-tags
title: Title and Meta Tags
sidebar_label: Title & Meta Tags
---
## Changing the <title /> tag
You can find the source HTML file in the `public` folder of the generated project. You may edit the `<title>` tag in it to change the title from “React App” to anything else.
Note that normally you wouldn’t edit files in the `public` folder very often. For example, [adding a stylesheet](/docs/adding-a-stylesheet) is done without touching the HTML.
@@ -10,3 +13,19 @@ Note that normally you wouldn’t edit files in the `public` folder very often.
If you need to dynamically update the page title based on the content, you can use the browser [`document.title`](https://developer.mozilla.org/en-US/docs/Web/API/Document/title) API. For more complex scenarios when you want to change the title from React components, you can use [React Helmet](https://github.com/nfl/react-helmet), a third party library.
If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in [this section](/docs/generating-dynamic-meta-tags-on-the-server). Alternatively, you can pre-build each page as a static HTML file which then loads the JavaScript bundle, which is covered [here](/docs/pre-rendering-into-static-html-files).
## Generating Dynamic `<meta>` Tags on the Server
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.

3
docusaurus/website/sidebars.json
View File

@@ -40,8 +40,7 @@
"proxying-api-requests-in-development",
"fetching-data-with-ajax-requests",
"integrating-with-an-api-backend",
"changing-the-page-title",
"generating-dynamic-meta-tags-on-the-server",
"title-and-meta-tags",
"injecting-data-from-the-server-into-the-page"
],
"Testing": ["running-tests", "debugging-tests"],