Vue метатеги приложения для социального обмена - PullRequest
Новая
       37

Vue метатеги приложения для социального обмена

0 голосов
/ 02 мая 2020

Я разработал приложение Vue, которое имеет навигацию и контент на каждой странице. Мне нужно настроить метатеги для каждой отдельной страницы для карточек Twitter и Facebook. Для этого я использую библиотеку vue -meta, и у меня есть следующий код: 

metaInfo() {
  return {
    meta: [
      {
        property: 'og:title',
        content: `Card #${this.card_no ? this.card_no : ''}`,
        vmid: 'og:title'
      },
      {
        property: 'og:image',
        content: `${this.card ? this.card.participantA.image : ''}`,
        vmid: 'og:image'
      },
      {
        property: 'og:description',
        content: `${this.card ? this.card.description : ''}`,
        vmid: 'og:description'
      },
      {
        property: 'twitter:title',
        content: `Card #${this.card_no ? this.card_no : ''}`,
        vmid: 'twitter:title'
      },
      {
        property: 'twitter:image',
        content: `${this.card ? this.card.participantA.image : ''}`,
        vmid: 'twitter:image'
      },
      {
        property: 'twitter:description',
        content: `${this.card ? this.card.description : ''}`,
        vmid: 'twitter:description'
      },
      {
        name: 'twitter:card',
        content: `summary_large_image`,
        vmid: 'twitter:card'
      }
    ]
  }
}

Свойства извлекаются из API на крюке mount (), и я вижу, что они добавлены правильно , Но совместное использование еще не работает, я считаю, что их нужно добавить в основной индекс. html? Но в моем случае это невозможно, поскольку они являются динамическими c и не всегда фиксированы. Есть ли способ обойти это? Я знаю, что SSR может решить эту проблему, но в настоящее время это не вариант, поскольку переписывание большей части приложения с использованием Nuxt в данный момент неприемлемо.

Ответы [ 4 ]

0 голосов
/ 04 мая 2020

Чтобы просто объяснить, что я сделал, воспользовался некоторыми советами из всех вышеприведенных комментариев и использовал промежуточное решение, вскоре я добавил еще одну промежуточную программу в свой Express бэкэнд, которая будет перехватывать социальные боты: 

//Social bots intercept
app.use('/info/:id', function (req, res, next) {
  let userAgent = req.headers['user-agent'];
  if (userAgent.startsWith('facebookexternalhit/1.1') ||
      userAgent === 'Facebot' ||
      userAgent.startsWith('Twitterbot')) {
...

Поэтому, если запрос от бота, я просто отображаю представление, используя усы 

    res.render('index', injectData)

Если запрос, если не от бота, я просто вызываю 

next()

А ниже приведен код файл index.mustache, который я использую: 

<!DOCTYPE html>
<html class="no-js" xmlns:fb="http://ogp.me/ns/fb#">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# business: http://ogp.me/ns/business#">

    <!-- Facebook metadata -->
    <meta property="og:title" content="{{title}}">
    <meta property="og:description" content="{{description}}">
    <meta property="og:image" content="{{image}}">
    <meta property="og:url" content="{{url}}">
    <meta name="twitter:card" content="summary_large_image">


    <meta property="og:site_name" content="{{site_name}}">
    <meta name="twitter:image:alt" content="{{alt_image}}">
</head>
<body>
<div id="fb-root"></div>

<div id="app"></div>
</body>
</html>
0 голосов
/ 02 мая 2020

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

Вы можете увидеть мой вопрос здесь - Сохранение ресурса и публикации c путь отличается в vue приложении для CDN

Я наконец обведен Rendertron и это сработало как шарм. Если у вас возникнут какие-либо проблемы в настройке, я могу помочь вам в дальнейшем. Вы можете увидеть, как rendertron отображает определенную страницу в этом приложении-песочнице - https://render-tron.appspot.com/

0 голосов
/ 02 мая 2020

Сканеры не выполняют JS, поэтому любое решение, использующее JS, не будет работать. Вы увидите, что мета отображается, потому что ваш браузер выполняет ее.

У меня была похожая проблема, и я решил использовать следующее решение.

  • Я обслуживал приложение, используя AWS CloudFront и у меня был REST API, из которого поступали данные
  • Я создал Lambda@Edge, который проверял реферер, а затем я
  • Начал делать API REST вызывает и просто отображает пустую страницу с мета-метами.

Это решение легко реализовать, если вы уже используете AWS в качестве хостинга.

Примечание: Google and co не рассматривайте это как маскировку, по крайней мере, на данный момент.

0 голосов
/ 02 мая 2020

Вы можете реализовать SSR без nuxt в любом приложении vue. К сожалению, я сам этого не сделал. Но вы можете посмотреть на этот пакет:

https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer#readme

...