Мой шлем реакции не работает в моем компоненте входа в систему?

#meta-tags #meta #react-helmet

Вопрос:

Я не понимаю, что я делаю неправильно, вводя React-Шлем в компоненты моего сайта.

Я уже установил react-шлем, используя команду терминала: npm install —сохранить react-шлем

Внутри моего приложения нет тегов «название» или «описание». index.html файл.

Вот сокращенный код компонента внутри файла .js:

     ...
    import { Helmet } from 'react-helmet';

    class LoginFullscreen extends Component {
                
    ...
                return (

                    <div className='login-fullscreen-background'>

                      <Helmet>
                          <title>Unlocked Academy: Login to the Platform</title>
                          <meta name="description" content="Welcome to Unlocked Academy!  Login here to access your account and prepare the flashcards you will engage with after each phone unlock and passing screen time!" />
                      </Helmet>

                      ...

                    </div>
                    
                 );
                 
                 ...

}

Вот мой index.html файл:

 <!DOCTYPE html>
    <html lang="en">
       <head>
           <meta charset="utf-8" />
           <link rel="icon" href="%PUBLIC_URL%/Favicon32x32.png" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="theme-color" content="#000000" />

           <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
       </head>

       <body style="background-color: #3A3149;">
   
           <noscript>I'm So Sorry, but Unlocked Academy requires you to have JavaScript enabled to run.
           </noscript>

           <div id="root">
           </div>
    
    
       </body>



    </html>

1. Только в одном компоненте это не работает? Я попробовал ваш код и заставил его работать. Вы можете поделиться своим полным компонентом входа в систему, если это происходит только с Login компонентом

2. Извините, что не уточнил. Он работает не во ВСЕХ компонентах, в которые я его внедрил (все компоненты используют одну и ту же структуру/формат). Я тестирую с помощью «проверки» страницы, щелкнув по ней правой кнопкой мыши. Какой метод вы используете, чтобы проверить, работает он или нет?

Ответ №1:

Это прекрасно работает для меня, когда я пытался. Однако, если вы щелкните правой кнопкой мыши и просмотрите источник страницы, вы не сможете его увидеть. Но если вы откроете свои инструменты разработчика и проверите элементы, вы увидите все это.

Вот пример: https://stackblitz.com/edit/react-cmjz7v

1. Интересный. Когда я ищу «Разблокированный логин академии» в Google, он показывает изображение (вставленное в основной вопрос выше). Я знаю, что добавил sitemap.xml файл вчера в Google. Но эти мета-теги находятся на веб-сайте уже несколько недель. Есть какие-либо предложения о том, как я могу двигаться дальше, чтобы эти мета-теги отображались в поиске Google/веб-обходе?

2. Не совсем уверен в SEO. Извините. Вы можете задать еще один вопрос по этому поводу.

3. Последний вопрос, поэтому, когда я просматриваю «элементы» веб-сайта в реальном времени, на нем отображается заголовок целевой страницы, а не заголовок страницы входа (обведен красным на 2-м изображении выше). Есть идеи, почему это так? СПАСИБО ЗА ВАШЕ ВРЕМЯ И ОПЫТ!!!! 🙂

4. Сохраните дополнительный мета-тег на целевой странице и посмотрите, будет ли он добавлен. Добавьте консоль. войдите в свой компонент целевой страницы, где вы использовали шлем. Возможно, эта страница перерисовывается. Просто такая возможность.

5. ОК. Спасибо за помощь Саниш! 🙂