Как динамически отображать метатеги для кнопки «Поделиться в социальных сетях» на статическом сайте?

У меня есть статический сайт, на котором пользователи могут создавать изображения и контент в неограниченных комбинациях. Когда пользователь завершает работу, создается постоянная ссылка, позволяющая ему поделиться своим творением через Facebook/Twitter/GooglePlus/и т. д. Я хочу, чтобы их общий пост содержал изображение и контент пользователя, но я обнаружил, что боты социальных сетей анализируют только метатеги HTML из моих постоянных ссылок и не оценивают какой-либо Javascript.

Как я могу сделать так, чтобы контент моего пользователя отображался в общей публикации в социальной сети? Когда постоянная ссылка нажата, Javascript на стороне клиента оценит параметры запроса постоянной ссылки и отобразит содержимое пользователя. Я также могу отображать содержимое пользователя в метатегах HTML, которые используются Twitter и FB для заполнения содержимого сообщения, но боты не оценивают какой-либо javascript, поэтому метатеги не отображаются.

Одно из возможных решений, которое я исследовал, — предварительный рендеринг. Возможно, моя постоянная ссылка может быть расположением HTML-файла в корзине AWS S3, которую я могу создать, как только пользователь поделится своей постоянной ссылкой. Этот HTML-файл на S3 может содержать пользовательские метатеги, и я могу предоставить их ботам социальных сетей. И когда к этому файлу обращаются, я могу перенаправить его на мою постоянную ссылку. Это кажется разумным? Я могу отчитаться после того, как попробую это.

Другим решением является использование службы предварительного рендеринга, например https://prerender.io/. Это кажется немного громоздким и закрытым, но может быть более надежным и надежным, чем мое решение S3 выше. Любые идеи?

Я открыт для отзывов и других решений, и любые предложения будут замечательными.

другая актуальная информация:

Этот ответ кажется интересным, он включает в себя активацию Facebook Javascript SDK: https://stackoverflow.com/a/34178987/1884158

И я знаю о таких инструментах, как валидатор карт Twitter и отладчик акций Facebook, здесь: https://cards-dev.twitter.com/validator https://developers.facebook.com/tools/debug/ который будет полезен для тестирования любых решений.

И если это поможет, мой сайт представляет собой приложение React, которое связано с HTML/CSS/JS и полностью отображается на клиенте.


javascript html prerender meta-tags socialshare
person modulitos    schedule 12.09.2016    source источник
comment
привет я столкнулся с точно такой же проблемой. У меня есть статический хостинг на S3, встроенный в Vue. У него есть задания, которыми нужно поделиться на Facebook и LinkedIn. Эти общие ссылки должны содержать название должности, название компании и логотип компании. Я не могу ввести эти данные в метатеги. Вы решили эту проблему?   -  person Haseeb Burki    schedule 30.05.2018
comment
@HaseebBurki Я не думаю, что это возможно, кроме предварительного рендеринга или перехода на рендеринг на стороне сервера. Я придумал хак/обходной путь, описанный ниже, но у него есть свои недостатки.   -  person modulitos    schedule 31.05.2018

Ответы (1)


arrow_upward
3
arrow_downward

Я не нашел правильного решения этой проблемы, но придумал обходной путь/хак, который включает в себя настройку отдельной службы. Вот сервис, который я придумал: https://github.com/mapseed/sharing/blob/master/share.js

Если наш статический сайт размещен на example.com, мы можем запустить сервер, работающий на sharing.example.com, который принимает запросы и либо перенаправляет запрос с sharing.example.com/my/route на example.com/my/route. Но если запрос имеет HTTP-заголовок user-agent, соответствующий поисковому роботу в социальных сетях, как мы делаем, здесь, то мы возвращаем html-страницу, содержащую только метатеги, как мы делаем здесь.

Однако этот подход имеет несколько ограничений:

  • Ссылки, которыми мы хотим поделиться в социальных сетях, должны указывать на наш субдомен sharing.example.com. Это позволит нашему сервису вернуть HTML-страницу с соответствующими метатегами, если запрос исходит от бота в социальной сети, или иным образом перенаправить запрос на наш example.com веб-сайт.

  • Чтобы сгенерировать содержимое наших метатегов, наши общие ссылки должны иметь параметры запроса для передачи всей информации для заполнения наших метатегов. Например, наша общая ссылка будет выглядеть так: sharing.example.com/post/my-post?title=my-title&desc=my-description. Это означает, что наши общие ссылки могут быть довольно длинными. Вы можете увидеть, как мы извлекаем информацию из наших параметров запроса и вставляем ее в наш HTML-шаблон с метатегами здесь: https://github.com/mapseed/sharing/blob/master/share.js#L18-L27

Если эти ограничения приемлемы, то это решение работает достаточно хорошо. Обратите внимание, что у SEO есть и обратная сторона, потому что ссылки, которыми будут делиться, исходят с sharing.example.com, а не с нашего example.com веб-сайта.

Кроме того, нам придется раскрутить дополнительный сервер для запуска этой службы. Хотя мы должны иметь возможность перенести эту реализацию на бессерверную архитектуру, такую ​​как AWS Lambda.

person modulitos    schedule 31.05.2018
comment
Это вполне хорошее решение. Однако это требует слишком много работы, и стоимость запуска нового сервера только для этой одной задачи не будет приветствоваться моим клиентом. Я попытался реализовать лямбда-функции таким образом, чтобы при доступе к определенному URL-адресу мы получали идентификатор ресурса из URL-адреса, извлекали данные из API, вставляли их в html и возвращали это в качестве ответа. У меня нет большого опыта работы с AWS Lambda, и я не смог заставить его работать. Я сейчас работаю над другим решением. Я дам вам знать, если это сработает, иначе мне, возможно, придется сделать это и по-вашему. Спасибо - person Haseeb Burki; 31.05.2018
comment
Привет. Я закончил с предварительным рендерингом файлов HTML только с метатегами и небольшим количеством javascript, чтобы перенаправить пользователя на правильную ссылку. - person Haseeb Burki; 04.06.2018
comment
Привет, я столкнулся с точно такой же проблемой. Даже у меня есть веб-приложение, разработанное в reactjs с использованием машинописного текста. Я до сих пор не нашел решения для этого. Не могли бы вы рассказать мне, как вы это сделали? Я также разместил вопрос об этом здесь - person Prasaad Patil; 28.06.2018