Meningkatkan perkongsian sosial dalam aplikasi satu halaman Node.js

Aplikasi Halaman Tunggal (SPA) dikuasakan oleh templat pemaparan sebelah pelanggan, memberikan pengalaman yang sangat dinamik kepada pengguna akhir. Baru-baru ini, Google mengumumkan bahawa mereka akan merangkak halaman web dan melaksanakan JavaScript seperti pengguna biasa, membenarkan tapak web yang dikuasakan oleh rangka kerja SPA (Angular, Ember, Vue, dll.) dirangkak tanpa penalti daripada Google.

Selain carian, perangkak web lain juga penting untuk keterlihatan tapak anda, iaitu bot perkongsian sosial yang kaya yang bergantung pada tag meta tetap buta JavaScript.

Dalam tutorial ini, kami akan membina modul penghalaan dan pemaparan alternatif untuk pelayan Express dan Node.js anda yang boleh anda gunakan dengan kebanyakan rangka kerja SPA dan membolehkan tapak web anda dipaparkan di Twitter, Facebook dan Pinterest Kongsi dengan kaya.

Amaran

Tutorial ini khusus untuk bot web yang mengekstrak maklumat yang dikongsi secara sosial. Jangan cuba teknik ini dengan perangkak web enjin carian. Syarikat enjin carian mungkin memandang serius tingkah laku ini dan melihatnya sebagai spam atau penipuan, jadi kedudukan anda mungkin turun dengan cepat.

Begitu juga, dengan perkongsian sosial yang kaya, pastikan kandungan yang anda bentangkan konsisten dengan perkara yang dilihat pengguna dan perkara yang dibaca oleh bot. Kegagalan untuk mengekalkan konsistensi ini boleh mengakibatkan sekatan pada tapak media sosial.

Perkongsian sosial yang kaya

Jika anda menyiarkan kemas kini dalam Facebook dan memasukkan URL, bot Facebook akan membaca HTML dan mencari tag meta OpenGraph. Berikut ialah contoh halaman utama Envato Tuts+:

Periksa halaman, dalam teg head, berikut ialah teg berkaitan yang menghasilkan pratonton ini: head 标记中，以下是生成此预览的相关标记：

Pinterest 使用与 Facebook、OpenGraph 相同的协议，因此它们的共享工作原理大致相同。

在 Twitter 上，这个概念被称为“卡片”，并且 Twitter 有几种不同的变体，具体取决于您想要如何呈现内容。以下是来自 GitHub 的 Twitter 卡示例：

这是生成此卡片的 HTML：

注意：GitHub 使用与本教程中描述的类似技术。页面 HTML 与名称属性设置为 twitter:description 的标签略有不同。我必须按照本文后面所述更改用户代理才能获得正确的元标记。

客户端渲染的问题

如果您只需要整个网站的一个标题、描述或图像，添加元标记不是问题。只需将这些值硬编码到 HTML 文档的 head 中即可。然而，您可能正在构建一个更加复杂的网站，并且您希望丰富的社交共享根据 URL 的不同而变化（这可能是您的框架正在操作的 HTML5 History API 的包装器）。

第一次尝试可能是构建模板并将值添加到元标记，就像添加任何其他内容一样。由于此时提取此信息的机器人不会执行 JavaScript，因此在尝试共享时，您最终会得到模板标签，而不是预期的值。

为了使网站能够被机器人读取，我们正在构建一个中间件来检测社交共享机器人的用户代理，然后构建一个备用路由器，为机器人提供正确的内容，从而避免使用 SPA 框架。

用户代理中间件

客户端（机器人、网络爬虫、浏览器）在每个请求的 HTTP 标头中发送用户代理 (UA) 字符串。这应该可以识别客户端软件；虽然网络浏览器有各种各样的 UA 字符串，但机器人往往或多或少都稳定。 Facebook、Twitter 和 Pinterest 出于礼貌发布其机器人的用户代理字符串。

在 Express 中，UA 字符串作为 user-agent 包含在 request 对象中。我使用正则表达式来识别我有兴趣提供替代内容的不同机器人。我们将把它包含在中间件中。中间件就像路由，但它们不需要路径或方法，并且它们（通常）将请求传递给另一个中间件或路由。在 Express 中，路由和中间件是连续的，因此请将其放置在 Express 应用中的任何其他路由之上。

app.use(function(req,res,next) {
  var
    ua = req.headers['user-agent'];

  if (/^(facebookexternalhit)|(Twitterbot)|(Pinterest)/gi.test(ua)) {
    console.log(ua,' is a bot');
  } 

 next();
});

上面的正则表达式在 UA 字符串的开头查找“facebookexternalhit”、“Twitterbot”或“Pinterest”。如果存在，则会将 UA 记录到控制台。

这是整个服务器：

var
  express   = require('express'),
  app       = express(),
  server;

app.use(function(req,res,next) {
  var
    ua = req.headers['user-agent'];

  if (/^(facebookexternalhit)|(Twitterbot)|(Pinterest)/gi.test(ua)) {
    console.log(ua,' is a bot');
  } 

  next();
});

app.get('/',function(req,res) {
  res.send('Serve SPA');
});

server = app.listen(
  8000,
  function() {
    console.log('Server started.');
  }
);

测试您的中间件

在 Chrome 中，导航到您的新服务器（应该是 http://localhost:8000/

nonSPArouter = express.Router();
nonSPArouter.get('/', function(req,res) {
  res.send('Serve regular HTML with metatags');
});

Pinterest menggunakan protokol yang sama seperti Facebook dan OpenGraph, jadi perkongsian mereka berfungsi dengan cara yang sama. 🎜 🎜Di Twitter, konsep ini dipanggil "kad" dan Twitter mempunyai beberapa variasi berbeza bergantung pada cara anda ingin mempersembahkan kandungan anda. Berikut ialah contoh kad Twitter daripada GitHub: 🎜 🎜🎜 🎜Ini ialah HTML yang menjana kad ini: 🎜

var
  express   = require('express'),
  app       = express(),
  
  nonSPArouter      
            = express.Router(),
  server;

nonSPArouter.get('/', function(req,res) {
  res.send('Serve regular HTML with metatags');
});

app.use(function(req,res,next) {
  var
    ua = req.headers['user-agent'];

  if (/^(facebookexternalhit)|(Twitterbot)|(Pinterest)/gi.test(ua)) {
    console.log(ua,' is a bot');
    nonSPArouter(req,res,next);
  } else {
    next();
  }
});

app.get('/',function(req,res) {
  res.send('Serve SPA');
});

server = app.listen(
  8000,
  function() {
    console.log('Server started.');
  }
);

🎜🎜Nota: GitHub menggunakan teknologi yang serupa dengan yang diterangkan dalam tutorial ini. HTML halaman berbeza sedikit daripada teg dengan atribut nama ditetapkan kepada twitter:description. Saya terpaksa menukar ejen pengguna seperti yang diterangkan kemudian dalam artikel ini untuk mendapatkan tag meta yang betul. 🎜🎜 🎜Masalah dengan rendering sebelah pelanggan🎜 🎜Jika anda hanya memerlukan tajuk, penerangan atau imej untuk keseluruhan tapak web anda, menambah tag meta tidak menjadi masalah. Hanya tegarkan nilai ini ke dalam head dokumen HTML anda. Walau bagaimanapun, anda mungkin sedang membina tapak web yang lebih kompleks dan anda mahu perkongsian sosial yang kaya berbeza-beza berdasarkan URL (ini mungkin pembalut untuk API Sejarah HTML5 yang rangka kerja anda beroperasi). 🎜 🎜Percubaan pertama mungkin ialah membina templat dan menambah nilai pada teg meta seperti anda menambah apa-apa lagi. Memandangkan bot yang mengekstrak maklumat ini tidak melaksanakan JavaScript pada ketika ini, anda akan mendapat teg templat dan bukannya nilai yang dijangkakan apabila cuba berkongsi. 🎜 🎜Untuk menjadikan tapak web boleh dibaca oleh bot, kami sedang membina perisian tengah untuk mengesan ejen pengguna bot perkongsian sosial dan kemudian membina penghala sandaran untuk menyampaikan kandungan yang betul kepada bot, sekali gus mengelakkan penggunaan rangka kerja SPA. 🎜 🎜Pertengahan Ejen Pengguna🎜 🎜Pelanggan (bot, perangkak web, penyemak imbas) menghantar rentetan Ejen Pengguna (UA) dalam pengepala HTTP bagi setiap permintaan. Ini harus mengenal pasti perisian klien manakala pelayar web mempunyai pelbagai jenis rentetan UA, bot cenderung lebih atau kurang stabil. Facebook, Twitter dan Pinterest menerbitkan rentetan ejen pengguna bot mereka sebagai ihsan. 🎜 🎜Dalam Express, rentetan UA disertakan dalam reqobjek pengguna sebagai user-agent. Saya menggunakan ungkapan biasa untuk mengenal pasti bot berbeza yang saya berminat untuk menyediakan kandungan alternatif. Kami akan memasukkannya ke dalam middleware. Middleware adalah seperti laluan, tetapi mereka tidak memerlukan laluan atau kaedah, dan mereka (biasanya) menghantar permintaan kepada middleware atau laluan lain. Dalam Express, laluan dan perisian tengah adalah bersebelahan, jadi letakkannya di atas mana-mana laluan lain dalam apl Express anda. 🎜

doctype html
html
  head
    title= title
    meta(property="og:url"  name="twitter:url" content= url)
    meta(property="og:title" name="twitter:title" content= title)
    meta(property="og:description" name="twitter:description" content= descriptionText)
    meta(property="og:image" content= imageUrl)
    meta(property="og:type" content="article")
    meta(name="twitter:card" content="summary")
  body
    h1= title
    img(src= img alt= title)
    p= descriptionText

🎜 Regex di atas mencari "facebookexternalhit", "Twitterbot" atau "Pinterest" pada permulaan rentetan UA. Jika ada, UA dilog ke konsol. 🎜 🎜Ini adalah keseluruhan pelayan: 🎜

var
  express   = require('express'),
  app       = express(),
  
  nonSPArouter      
            = express.Router(),
  server;

nonSPArouter.get('/', function(req,res) {
  var
    img   = 'placeholder.png';
    
  res.render('bot', { 
    img       : img,
    url       : 'https://bot-social-share.herokuapp.com/',
    title     : 'Bot Test', 
    descriptionText 
              : 'This is designed to appeal to bots',
    imageUrl  : 'https://bot-social-share.herokuapp.com/'+img
  });
});

app.use(function(req,res,next) {
  var
    ua = req.headers['user-agent'];

  if (/^(facebookexternalhit)|(Twitterbot)|(Pinterest)/gi.test(ua)) {
    console.log(ua,' is a bot');
    nonSPArouter(req,res,next);
  } else {
    next();
  }
});

app.get('/',function(req,res) {
  res.send('Serve SPA');
});
app.use('/',express.static(__dirname + '/static'));
app.set('view engine', 'jade');
server = app.listen(
  process.env.PORT || 8000,
  function() {
    console.log('Server started.');
  }
);

🎜Uji perisian tengah anda🎜 🎜Dalam Chrome, navigasi ke pelayan baharu anda (sepatutnya http://localhost:8000/). Buka DevTools dan hidupkan Mod Peranti dengan mengklik ikon telefon pintar di penjuru kiri sebelah atas anak tetingkap pembangun. 🎜

在设备工具栏上，将“Twitterbot/1.0”放入UA编辑框中。

现在，重新加载页面。

此时，您应该在页面中看到“Serve SPA”，但是查看 Express 应用程序的控制台输出，您应该看到：

Twitterbot/1.0 是一个 bot

备用路由

现在我们可以识别机器人了，让我们构建一个备用路由器。 Express 可以使用多个路由器，通常用于按路径划分路由。在这种情况下，我们将以稍微不同的方式使用路由器。路由器本质上是中间件，因此除了 req、res 和 next 之外，就像任何其他中间件一样。这里的想法是生成一组具有相同路径的不同路由。

nonSPArouter = express.Router();
nonSPArouter.get('/', function(req,res) {
  res.send('Serve regular HTML with metatags');
});

我们的中间件也需要更改。现在，我们不再只是记录客户端是机器人，而是将请求发送到新路由器，重要的是，如果 UA 测试失败，则仅将其与 next() 一起传递。因此，简而言之，机器人获得一台路由器，其他人获得为 SPA 代码提供服务的标准路由器。

var
  express   = require('express'),
  app       = express(),
  
  nonSPArouter      
            = express.Router(),
  server;

nonSPArouter.get('/', function(req,res) {
  res.send('Serve regular HTML with metatags');
});

app.use(function(req,res,next) {
  var
    ua = req.headers['user-agent'];

  if (/^(facebookexternalhit)|(Twitterbot)|(Pinterest)/gi.test(ua)) {
    console.log(ua,' is a bot');
    nonSPArouter(req,res,next);
  } else {
    next();
  }
});

app.get('/',function(req,res) {
  res.send('Serve SPA');
});

server = app.listen(
  8000,
  function() {
    console.log('Server started.');
  }
);

如果我们使用与上面相同的例程进行测试，将 UA 设置为 Twitterbot/1.0 浏览器将在重新加载时显示：

使用元标记 提供常规 HTML

使用标准 Chrome UA，您将获得：

服务SPA

元标签

正如我们上面所讨论的，丰富的社交共享依赖于 HTML 文档头部内的 meta 标签。由于您正在构建 SPA，因此您甚至可能没有安装模板引擎。在本教程中，我们将使用玉。 Jade 是一种相当简单、诱人的语言，其中空格和制表符是相关的，并且不需要结束标签。我们可以通过运行来安装它：

npm 安装jade

在我们的服务器源代码中，在 app.listen 之前添加此行。

app.set('视图引擎', '玉石');

现在，我们将仅输入想要提供给机器人的信息。我们将修改 nonSPArouter。由于我们已经在应用程序集中设置了视图引擎，因此 res.render 将进行玉石渲染。

让我们设置一个小玉模板来服务于社交共享机器人：

doctype html
html
  head
    title= title
    meta(property="og:url"  name="twitter:url" content= url)
    meta(property="og:title" name="twitter:title" content= title)
    meta(property="og:description" name="twitter:description" content= descriptionText)
    meta(property="og:image" content= imageUrl)
    meta(property="og:type" content="article")
    meta(name="twitter:card" content="summary")
  body
    h1= title
    img(src= img alt= title)
    p= descriptionText

这个模板的大部分内容是 meta 标签，但您也可以看到我在文档正文中包含了这些信息。在撰写本教程时，似乎没有一个社交共享机器人实际上会查看元标记之外的任何其他内容，但如果在以下位置实施任何类型的人工检查，则最好以某种人类可读的方式包含信息：稍后的日期。

将模板保存到应用程序的 view 目录并将其命名为 bot.jade。不带扩展名的文件名（“bot”）将是 res.render 函数的第一个参数。

虽然在本地开发总是一个好主意，但您将需要在其最终位置公开您的应用程序以完全调试您的 meta 标记。我们的小型服务器的可部署版本如下所示：

var
  express   = require('express'),
  app       = express(),
  
  nonSPArouter      
            = express.Router(),
  server;

nonSPArouter.get('/', function(req,res) {
  var
    img   = 'placeholder.png';
    
  res.render('bot', { 
    img       : img,
    url       : 'https://bot-social-share.herokuapp.com/',
    title     : 'Bot Test', 
    descriptionText 
              : 'This is designed to appeal to bots',
    imageUrl  : 'https://bot-social-share.herokuapp.com/'+img
  });
});

app.use(function(req,res,next) {
  var
    ua = req.headers['user-agent'];

  if (/^(facebookexternalhit)|(Twitterbot)|(Pinterest)/gi.test(ua)) {
    console.log(ua,' is a bot');
    nonSPArouter(req,res,next);
  } else {
    next();
  }
});

app.get('/',function(req,res) {
  res.send('Serve SPA');
});
app.use('/',express.static(__dirname + '/static'));
app.set('view engine', 'jade');
server = app.listen(
  process.env.PORT || 8000,
  function() {
    console.log('Server started.');
  }
);

另请注意，我使用 express.static 中间件来提供 /static 目录中的图像。

调试您的应用

将应用程序部署到可公开访问的位置后，您应该验证您的 meta 标记是否按预期工作。

首先，您可以使用 Facebook 调试器进行测试。输入您的网址并点击获取新的抓取信息。

您应该看到类似以下内容：

接下来，您可以继续使用 Twitter 卡验证器测试您的 Twitter 卡。对于此操作，您需要使用 Twitter 帐户登录。

Pinterest 提供了一个调试器，但此示例无法开箱即用，因为 Pinterest 只允许在主页以外的 URL 上使用“丰富的 pin”。

Langkah seterusnya

Dalam pelaksanaan sebenar, anda perlu mengendalikan penyepaduan sumber data dan penghalaan. Adalah idea yang baik untuk menyemak laluan yang dinyatakan dalam kod SPA dan membuat versi ganti apa sahaja yang anda fikir mungkin dikongsi. Sebaik sahaja anda telah menetapkan laluan untuk kemungkinan perkongsian, tetapkan teg meta dalam templat utama anda, yang akan berfungsi sebagai sandaran anda jika seseorang berkongsi halaman yang anda tidak mahu.

meta 标记，当有人共享您不希望的页面时，该标记可作为您的后备。

虽然 Pinterest、Facebook 和 Twitter 占据了社交媒体市场的很大一部分，但您可能还想集成其他服务。有些服务确实会公布其社交共享机器人的名称，而其他服务则可能不会。要确定用户代理，您可以 console.logWalaupun Pinterest, Facebook dan Twitter membentuk sebahagian besar pasaran media sosial, terdapat perkhidmatan lain yang mungkin anda ingin sepadukan. Sesetengah perkhidmatan menerbitkan nama bot perkongsian sosial mereka, sementara yang lain mungkin tidak. Untuk menentukan ejen pengguna, anda boleh console.log dan semak output konsol - cuba ini pada pelayan bukan pengeluaran dahulu, kerana cuba menentukan ejen pengguna di tapak yang sibuk mungkin Sangat sukar. Mulai dari itu, anda boleh mengubah suai ungkapan biasa dalam perisian tengah kami untuk menangkap ejen pengguna baharu.

Perkongsian media sosial yang kaya ialah cara terbaik untuk mendorong orang ke tapak web berasaskan apl halaman tunggal anda yang cantik. Dengan secara selektif mengarahkan bot ke kandungan yang boleh dibaca mesin, anda boleh memberikan bot maklumat yang betul.

Atas ialah kandungan terperinci Meningkatkan perkongsian sosial dalam aplikasi satu halaman Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!