Использование активного маршрутизатора Link внутри компонентов - PullRequest
Новая
       26

Использование активного маршрутизатора Link внутри компонентов

2 голосов
/ 19 октября 2019

Я использую ссылку внутри компонентов для перехода на разные страницы, такие как 

 <Link to={'/documents/' + x.id}></Link

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

Как правильно использовать ссылку, чтобы все еще иметь быстрые изменения страницы и оптимизировать SEO.

Спасибо

Ответы [ 2 ]

5 голосов
/ 19 октября 2019

Лично я использую в своих проектах SEO-компонент, чтобы избежать проблем. Мне также нравится использовать реагирующий шлем , который будет управлять всеми изменениями в <head/>

Например: 

import Helmet from "react-helmet";
import React from "react";

// mini SEO component
function SEO ({ title, description, keywords, url, lang }) {
    return (
        <Helmet
            htmlAttributes={{ lang }}
            title={{ title }}
            meta={[
                {
                    name: 'description',
                    content: description
                },
                {
                    name: 'keywords',
                    content: keywords
                },
                {
                    property: 'og:url',
                    content: url
                }
            ]}
        />
    );
}

export default SEO;

Итак, импортируйте его на каждой страницес нужным реквизитом 

<SEO 
    title='example'
    description='example'
    keywords=''
    url='https://example.com'
    lang='en-us'
/>

Надеюсь, это поможет.

0 голосов
/ 23 октября 2019

Спасибо @ luiz-mariz, я уже использую реагирующий шлем, но проблема заключалась в том, что я получал информацию о странице в componentDidMount(), однако, когда я делаю это, сканеры не читают эту информацию, потому что они выиграли 't ждать, пока вызов API не передаст информацию о контенте. Это была моя ошибка.

Способ, которым я решил ее, заключался в получении конкретной информации о странице и до загрузки страницы (с использованием рендеринга на стороне сервера), а затем передаче этой информации в компонент приложения. 

onPageLoad((sink) => {

  const context = {};
  const data = {
    loading: true,
    loggingIn: false,
    document:-API CALL FOR DOCUMENT INFO-
  };

  const store = createStore(mainReducer, data, applyMiddleware(thunk));
  const initialData = store.getState();
  const stylesheet = new ServerStyleSheet();

  const app = renderToString(stylesheet.collectStyles( // eslint-disable-line
    <Provider store={store}>
      <StaticRouter location={sink.request.url} context={context}>
        <App />
      </StaticRouter>
    </Provider>));

  const helmet = Helmet.renderStatic();
  sink.appendToHead(helmet.meta.toString());
  sink.appendToHead(helmet.title.toString());
  sink.appendToHead(stylesheet.getStyleTags());

  sink.renderIntoElementById('react-root', app);

  sink.appendToBody(`
    <script>
      window.__PRELOADED_STATE__ = ${JSON.stringify(initialData).replace(/</g, '\\u003c')}
    </script>
  `);
});

Кроме того, я добавил еще несколько тегов в компонент реактивного шлема. Может быть полезно для некоторых людей, которые хотят использовать возможности совместного использования Facebook или Twitter. 

const SEO = ({
  schema, title, description, images, path, contentType, published, updated, category, tags, twitter,
}) => (
  <Helmet>
    <html lang="en" itemScope itemType={`http://schema.org/${schema}`} />

    <title>{title}</title>
    <meta name="description" content={description} />
    <meta itemProp="name" content={title} />
    <meta itemProp="description" content={description} />
    <meta itemProp="image" content={(images && images.google)} />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@sitename" />
    <meta name="twitter:title" content={`${title} | Your-site-name`} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:creator" content={`@${twitter}` || '@sitename'} />
    <meta name="twitter:image:src" content={(images && images.twitter)} />

    <meta property="og:title" content={`${title} | Your-site-name`} />
    <meta property="og:type" content={contentType} />
    <meta property="og:url" content={url} />
    <meta property="og:image" content={(images && images.facebook)} />
    <meta property="og:description" content={description} />
    <meta property="og:site_name" content="your-site-name" />

    <meta name="fb:app_id" content="your-app-id" />

    {published ? <meta name="article:published_time" content={published} /> : ''}
    {updated ? <meta name="article:modified_time" content={updated} /> : ''}
    {category ? <meta name="article:section" content={category} /> : ''}
    {tags ? <meta name="article:tag" content={tags} /> : ''}
  </Helmet>
);
...