Как добавить метатеги для публикации определенной ссылки в React. js? - PullRequest
Новая
       29

Как добавить метатеги для публикации определенной ссылки в React. js?

0 голосов
/ 03 февраля 2020

Скажем, у меня есть приложение интернет-магазина, созданное с React.js, и я хочу настроить внешний вид URL, который используется в социальных сетях (например, добавить описание и изображение), используя метатеги HTML. Кроме того, я хочу, чтобы маршрут конкретного продукта (например, https://www.mywebsite.com/product/<productId>) предварительно просматривал соответствующее изображение и его описание, поэтому недопустимо просто включать метатеги в index.html. * 1006. *

Я пытался использовать react-helmet и другие пакеты, которые используются для добавления мета-тегов, но они не помогли. Я полагаю, это потому, что react-helmet добавляет метатеги после рендеринга приложения, а не только когда URL-адрес где-то используется совместно.

Единственное решение этой проблемы - использовать рендеринг на стороне сервера или существует способ справиться с этим только из переднего конца?

1 Ответ

3 голосов
/ 03 февраля 2020

Следуйте приведенному ниже примеру шаг за шагом, чтобы сделать то же самое

Шаг 1 - Установите команду ниже, используя NPM

npm install react-meta-tags --save

Примечание: Вы также можете достигните этого, используя React Helmet (сторонняя библиотека)

Шаг 2 - Используйте MetaTag Component в вашем классе Component 

import React from 'react';
import MetaTags from 'react-meta-tags';

class Component1 extends React.Component {
  render() {
    return (
        <div className="wrapper">
          <MetaTags>
            <title>Your Page 1</title>
            <meta name="description" content="Your description here.." />
            <meta property="og:title" content="Your App" />
            <meta property="og:image" content="Your path/to/image.jpg" />
          </MetaTags>
          <div className="content"> Your Content here... </div>
        </div>
      )
  }
}

Примечание: Определите id для тегов, чтобы при переходе на другую страницу старые метатеги заменялись / обновлялись новыми.

Шаг 3 - Компонент ReactTitle:

Если вы просто хотите добавить заголовок на страницу, которую вы можете использовать вместо ReactTitle. 

import React from 'react';
import {ReactTitle} from 'react-meta-tags';

class Component2 extends React.Component {
  render() {
    return (
        <div className="wrapper">
          <ReactTitle title="Your Page 2"/>
          <div className="content"> Your Page 2 Content </div>
        </div>
      )
  }
}

Пример использования сервера: 

import MetaTagsServer from 'react-meta-tags/server';
import {MetaTagsContext} from 'react-meta-tags';

/* Import other required modules */
/*  some serve specific code */

app.use((req, res) => {
  //make sure you get a new metatags instance for each request
  const metaTagsInstance = MetaTagsServer();

  //react router match
  match({
    routes, location: req.url
  }, (error, redirectLocation, renderProps) => {
    let reactString;

    try{
      reactString = ReactDomServer.renderToString(
      <Provider store={store}> 
      {/*** If you are using redux ***/}
      {/* You have to pass extract method through MetaTagsContext so it can catch meta tags */}

        <MetaTagsContext extract = {metaTagsInstance.extract}>
          <RouterContext {...renderProps}/>
        </MetaTagsContext>
      </Provider>
      );
    }
    catch(e){
      res.status(500).send(e.stack);
      return;
    }

    //get all title and metatags as string
    const meta = metaTagsInstance.renderToString();

    //append metatag string to your layout
    const htmlStr = (`
      <!doctype html>
      <html lang="en-us">
        <head>
          <meta charSet="utf-8"/>
          ${meta}
        </head>
        <body>
          <div id="content">
            ${reactString}
          </div>
        </body>
      </html>  
    `);

    res.status(200).send(layout);
  });
});

Согласно приведенному выше коду мы имеем выполнить следующие действия для параметров рендеринга сервера

  1. Импортировать сервер форм MetaTagsServer
  2. Импортировать сервер форм MetaTagsContext
  3. Создать новый экземпляр MetaTagsServer
  4. Wrap your компонент внутри MetaTagsContext и передать метод извлечения как реквизиты
  5. Извлечение мета строка с использованием renderToString экземпляра MetaTagsServer
  6. Добавление мета-строки к шаблону html.

Макет JSX:

Вы также можете быть используя React для определения вашего макета, в этом случае вы можете использовать метод getTags из metaTagsInstance. Часть макета приведенного выше примера со стороны сервера будет выглядеть следующим образом. 

//get all title and metatags as React elements
const metaTags = metaTagsInstance.getTags();

//append metatag string to your layout
const layout = (
  <html lang="en-us">
    <head>
      <meta charSet="utf-8"/>
      {metaTags}
    </head>
    <body>
      <div id="app" dangerouslySetInnerHTML={{__html: reactString}} />
    </body>
  </html>  
);

const htmlStr = ReactDomServer.renderToString(layout);

res.status(200).send(htmlStr);
...