Простой способ динамически добавлять метатеги для удобных ссылок
Если вы зашли на эту страницу, вы, скорее всего, разрабатываете с помощью Meteor, и вам было интересно, как сделать так, чтобы ссылки на ваше приложение выглядели красиво при публикации в Facebook и других местах в Интернете.
В этой статье я поделюсь очень простым способом добиться этого с помощью пакета server-render.
Открыть график
Open Graph - это протокол для превращения вашей веб-страницы в многофункциональный объект в Интернете. Это позволяет социальным сетям, мессенджерам и т. П. Понимать предоставляемый вами контент. Это самый распространенный вариант использования, который вы видите каждый день с помощью необычных карточек, созданных для ссылок, которыми вы делитесь в Интернете.
Чтобы превратить свою страницу в объект Open Graph, вы просто добавляете специальную разметку метатегов в исходный код веб-страницы, например:
Простая статическая реализация
Если вам нужно, чтобы ваша мета отображалась только для всего сайта и всегда была одинаковой, то самый простой способ сделать это в Meteor - просто добавить эти теги прямо в ваш /client/main.html.
Но если вы хотите, чтобы ваша мета изменялась в зависимости от URL-адреса, по которому был получен доступ, тогда все становится сложнее.
Динамическое добавление мета-тегов
Сразу стоит отметить один момент - вам необходимо сгенерировать свои метатеги на стороне сервера. Сканеры и парсеры просто не выполняют ваш JS-код, и, следовательно, все, что вы генерируете после исходного HTML-ответа, бесполезно.
Рендеринг на стороне сервера - сложная тема сама по себе, но, к счастью для нас, нам на самом деле не нужно рендерить фактический контент и передавать его клиентскому рендереру. Единственное, что нужно, - это динамически добавить кучу тегов в заголовок вашего исходного HTML-ответа.
Реализация
Представим, что мы хотим добавить мета-поддержку Open Graph для нашего примера приложения Todos. Мы хотим, чтобы наши списки отображались с красивой картинкой, заголовком списка и количеством незавершенных задач. Это может быть очень полезно при отправке ссылки коллеге через мессенджер.
Чтобы реализовать наш серверный «рендеринг» метатегов, мы собираемся использовать server-render пакет.
meteor add server-render
И добавьте на сервер следующий код:
Волшебство происходит внутри onPageLoad обработчика обратного вызова, предоставленного нам server-renderpackage. На сервере у него есть requestproperty, которое мы можем использовать для получения запрошенного пути и определения того, какие мета нам нужно добавить. Мы получаем все необходимые данные и просто добавляем наши сгенерированные теги с помощью sink.appendToHead.
Здесь следует отметить несколько моментов:
- Мета генерируется во время HTTP-запроса, что означает, что на стороне клиента он остается неизменным для всех маршрутов.
- Этот код полезен только на сервере, поэтому разместите его там.
- Возможно, вам придется поднять версию Meteor, чтобы использовать пакет
server-render.
Вот и все! В следующий раз, когда кто-нибудь поделится ссылкой на список в нашем приложении, парсер получит в ответ мета. Вы можете проверить, как парсер видит вашу страницу, с помощью Facebook Object Debugger. И мы вообще не использовали какие-либо механизмы рендеринга или сторонние библиотеки (кроме server-render). Этот подход очень общий.
дальнейшее чтение
Если вы хотите глубже изучить рендеринг на стороне сервера и оптимизировать свое приложение для публикации в социальных сетях или веб-поиска, я рекомендую следующие чтения:
- Серверный рендеринг (SSR) в Meteor от Джулиана Свирко
- Многоразовая поисковая оптимизация с помощью React Helmet от Meteor Chef
Спасибо за внимание! Я использую Meteor для создания sharedtrip.to, и предварительный просмотр, который вы видите ниже, является результатом подхода, которым я поделился в этой статье :)
