Работает ли установка мета-тегов в Javascript без рендеринга на стороне сервера?

#javascript #html #single-page-application #meta

#javascript #HTML #одностраничное приложение #meta

Вопрос:

Я разрабатываю одностраничное приложение, и на каждой странице должны быть разные мета-теги open graph.

Похоже, что такие инструменты, как react-helmet just use Javascript функции, как element.setAttribute обновление мета-тегов при переходе между страницами.

Мой вопрос: работает ли это без рендеринга на стороне сервера? Потому что в этом случае у вас будет набор мета-тегов «по умолчанию», а затем, когда страница будет загружена, маршрутизация на стороне клиента определит, на какой странице вы на самом деле находитесь, а затем Javascript установит соответствующие мета-теги в onPageLoad обработчике.

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

Я не использую рендеринг на стороне сервера. Является ли пустой тратой времени использование чего-то вроде react-helmet без рендеринга на стороне сервера? Если я свяжу свою страницу с Slack или Discord, он просто проверит источник, чтобы определить мета-теги, или он будет ждать загрузки страницы, а затем захватит новые мета-теги, которые были установлены с помощью Javascript?

Я решил, что сначала спрошу, а не буду тестировать, потому что разработка этой функциональности и запуск в производство — это приличный объем работы, если это даже не поддерживается, и кто-то уже это знает.

Комментарии:

1. Похоже, что они это делают: google docs: основы SEO на JavaScript .

2. Итак, Google кажется достаточно умным, чтобы дождаться запуска Javascript, прежде чем использовать такие вещи, как мета-теги, но надежен ли такой план? Будут ли общие приложения для чата (Slack, Discord и т. Д.) Также Ждать запуска Javascript, прежде чем захватывать мета-теги, например og:image , или ссылки на мой сайт будут выглядеть «пустыми» при ссылке в этих приложениях?

3. Правда, для других сканеров вам, вероятно, потребуется какой-то рендеринг на стороне сервера. Вы можете использовать канонические URL -адреса: жестко закодируйте свой index.html иметь <link rel.../> какой-нибудь небольшой серверный скрипт, который генерирует только og: нужные вам теги, и какой-нибудь JS для перенаправления для пользователей, которые попадают на эту страницу. Не могу придумать ничего лучше без полностью серверных сценариев.

4. Я не спрашиваю, как поисковые системы будут взаимодействовать с определенным кодом. Меня полностью интересует, работают ли og мета-теги с соответствующими клиентами, когда они отображаются на стороне клиента.

5. Да, я знаю, что я мог бы разработать эту функцию, запустить ее в prod, а затем посмотреть сам, но всем кажется расточительным это делать. Я бы предпочел, чтобы в stackoverflow был канонический ответ, на который люди могли бы ссылаться, а не каждый должен повторять один и тот же тест для себя.

Ответ №1:

попробуйте реализовать http://prerender.io / — это позволит обнаруживать сканеры, кэшировать соответствующие сайты и обслуживать соответствующие сайты.