Verbesserung des sozialen Teilens in Node.js Single-Page-Anwendungen

Single Page Applications (SPA) basieren auf clientseitigen Rendering-Vorlagen und bieten Endbenutzern ein sehr dynamisches Erlebnis. Kürzlich kündigte Google an, dass sie Webseiten crawlen und JavaScript wie normale Benutzer ausführen würden, sodass Websites, die auf SPA-Frameworks (Angular, Ember, Vue usw.) basieren, ohne Strafen von Google gecrawlt werden können.

Über die Suche hinaus sind auch andere Webcrawler wichtig für die Sichtbarkeit Ihrer Website, nämlich Rich-Social-Sharing-Bots, die auf Meta-Tags basieren, bleiben für JavaScript blind.

In diesem Tutorial erstellen wir ein alternatives Routing- und Rendering-Modul für Ihre Express- und Node.js-Server, das Sie mit den meisten SPA-Frameworks verwenden können und es ermöglichen, dass Ihre Website auf Twitter, Facebook und Pinterest reichlich vorgestellt wird.

Warnung

Dieses Tutorial ist Webbots gewidmet, die in sozialen Netzwerken geteilte Informationen extrahieren. Versuchen Sie diese Technik nicht mit Webcrawlern von Suchmaschinen. Suchmaschinenunternehmen nehmen dieses Verhalten möglicherweise ernst und betrachten es als Spam oder Betrug, sodass Ihr Ranking schnell sinken kann.

Stellen Sie bei Rich Social Sharing außerdem sicher, dass der von Ihnen präsentierte Inhalt mit dem übereinstimmt, was Benutzer sehen und was Bots lesen. Wenn diese Konsistenz nicht eingehalten wird, kann es zu Einschränkungen auf Social-Media-Seiten kommen.

Reichhaltiges Teilen in sozialen Netzwerken

Wenn Sie ein Update auf Facebook veröffentlichen und eine URL angeben, liest der Facebook-Bot den HTML-Code und sucht nach dem OpenGraph-Meta-Tag. Hier ist ein Beispiel der Envato Tuts+-Homepage:

Sehen Sie sich die Seite an. Im Tag head finden Sie hier die relevanten Tags, die diese Vorschau generiert haben:

Pinterest verwendet das gleiche Protokoll wie Facebook und OpenGraph, daher funktioniert das Teilen ungefähr gleich.

Auf Twitter wird dieses Konzept „Karten“ genannt und Twitter bietet einige verschiedene Variationen, je nachdem, wie Sie Ihre Inhalte präsentieren möchten. Hier ist ein Beispiel einer Twitter-Karte von GitHub:

Dies ist der HTML-Code, der diese Karte generiert:

Hinweis: GitHub verwendet eine ähnliche Technologie wie die in diesem Tutorial beschriebene. Der Seiten-HTML unterscheidet sich geringfügig von Tags, bei denen das Namensattribut auf twitter:description gesetzt ist. Ich musste den Benutzeragenten wie später in diesem Artikel beschrieben ändern, um die richtigen Meta-Tags zu erhalten.

Probleme beim clientseitigen Rendering

Wenn Sie nur einen Titel, eine Beschreibung oder ein Bild für Ihre gesamte Website benötigen, ist das Hinzufügen von Meta-Tags kein Problem. Codieren Sie diese Werte einfach fest in das head des HTML-Dokuments. Möglicherweise erstellen Sie jedoch eine komplexere Website und möchten, dass Rich Social Sharing je nach URL variiert (dies kann ein Wrapper für die HTML5-Verlaufs-API sein, mit der Ihr Framework arbeitet).

Ein erster Versuch könnte darin bestehen, eine Vorlage zu erstellen und den Wert zum Meta-Tag hinzuzufügen, so wie Sie alles andere hinzufügen würden. Da der Bot, der diese Informationen extrahiert, zu diesem Zeitpunkt kein JavaScript ausführt, erhalten Sie beim Versuch, sie zu teilen, statt des erwarteten Werts das Template-Tag.

Um die Website für Bots lesbar zu machen, bauen wir eine Middleware, um den Benutzeragenten von Social-Sharing-Bots zu erkennen, und bauen dann einen Fallback-Router, um den Bots den richtigen Inhalt bereitzustellen und so die Verwendung von SPA-Frameworks zu vermeiden.

User Agent Middleware

Clients (Bots, Webcrawler, Browser) senden die User Agent (UA)-Zeichenfolge im HTTP-Header jeder Anfrage. Dies sollte die Client-Software identifizieren; während Webbrowser über eine große Vielfalt an UA-Strings verfügen, sind Bots in der Regel mehr oder weniger stabil. Facebook, Twitter und Pinterest veröffentlichen aus Gefälligkeit die User-Agent-Strings ihrer Bots.

In Express sind UA-Strings als user-agent 包含在 request-Objekte verfügbar. Ich verwende reguläre Ausdrücke, um verschiedene Bots zu identifizieren, denen ich alternative Inhalte bereitstellen möchte. Wir werden es in die Middleware einbinden. Middleware ähnelt Routen, erfordert jedoch keinen Pfad oder keine Methode und leitet die Anforderung (normalerweise) an eine andere Middleware oder Route weiter. In Express sind Routen und Middleware zusammenhängend. Platzieren Sie sie daher über allen anderen Routen in Ihrer Express-App.

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();
});

Der obige reguläre Ausdruck sucht nach „facebookexternalhit“, „Twitterbot“ oder „Pinterest“ am Anfang der UA-Zeichenfolge. Falls vorhanden, wird der UA an der Konsole protokolliert.

Das ist der gesamte Server:

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.');
  }
);

Testen Sie Ihre Middleware

Navigieren Sie in Chrome zu Ihrem neuen Server (sollte http://localhost:8000/ sein). Öffnen Sie DevTools und aktivieren Sie den Gerätemodus, indem Sie auf das Smartphone-Symbol in der oberen linken Ecke des Entwicklerbereichs klicken.

在设备工具栏上，将“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”。

Nächste Schritte

In der tatsächlichen Implementierung müssen Sie sich um die Integration von Datenquellen und das Routing kümmern. Es ist eine gute Idee, die im SPA-Code angegebenen Routen zu überprüfen und alternative Versionen von allem zu erstellen, was Ihrer Meinung nach geteilt werden könnte. Sobald Sie einen Weg für eine mögliche Freigabe festgelegt haben, richten Sie in Ihrer Hauptvorlage ein meta-Tag ein, das als Ausweichmöglichkeit für den Fall dient, dass jemand eine Seite teilt, die Sie nicht beabsichtigen.

Während Pinterest, Facebook und Twitter einen großen Teil des Social-Media-Marktes ausmachen, gibt es noch andere Dienste, die Sie möglicherweise integrieren möchten. Einige Dienste veröffentlichen die Namen ihrer Social-Sharing-Bots, andere möglicherweise nicht. Um den Benutzeragenten zu ermitteln, können Sie console.log und die Konsolenausgabe überprüfen – versuchen Sie dies zunächst auf einem Nicht-Produktionsserver, da es auf einer stark ausgelasteten Site schwierig sein kann, den Benutzeragenten zu ermitteln. Von diesem Zeitpunkt an können Sie den regulären Ausdruck in unserer Middleware ändern, um den neuen Benutzeragenten zu erfassen.

Reichhaltiges Social-Media-Sharing ist eine großartige Möglichkeit, Menschen auf Ihre schöne App-basierte Website mit nur einer Seite zu locken. Indem Sie Bots gezielt auf maschinenlesbare Inhalte leiten, können Sie den Bots die richtigen Informationen bereitstellen.

Das obige ist der detaillierte Inhalt vonVerbesserung des sozialen Teilens in Node.js Single-Page-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!