Node.js シングルページ アプリケーションでのソーシャル共有の強化

シングル ページ アプリケーション (SPA) はクライアント側のレンダリング テンプレートを利用しており、エンド ユーザーに非常に動的なエクスペリエンスを提供します。最近、Google は、通常のユーザーと同じように Web ページをクロールして JavaScript を実行し、SPA フレームワーク (Angular、Ember、Vue など) を利用した Web サイトを Google からのペナルティなしでクロールできるようにすると発表しました。

検索に加えて、他の Web クローラーもサイトの可視性にとって重要です。つまり、メタ タグに依存するリッチ ソーシャル共有ボットは JavaScript を認識しません。

このチュートリアルでは、ほとんどの SPA フレームワークで使用できる Express および Node.js サーバー用の代替ルーティングおよびレンダリング モジュールを構築し、Web サイトを Twitter、Facebook、Pinterest でのリッチ共有に表示できるようにします。 ＃＃＃警告＃＃＃

このチュートリアルは、ソーシャルで共有された情報を抽出する Web ボットに特化しています。

検索エンジンの Web クローラーではこの手法を試さないでください。

検索エンジン会社はこの行為を深刻に受け止め、スパムまたは詐欺とみなす可能性があるため、ランキングが急速に低下する可能性があります。 同様に、豊富なソーシャル共有では、提示するコンテンツがユーザーに表示される内容やボットが読み取る内容と一致していることを確認してください。この一貫性を維持できない場合、ソーシャル メディア サイトが制限される可能性があります。

豊富なソーシャル共有

Facebook に更新を投稿して URL を含めると、Facebook ボットは HTML を読み取り、OpenGraph メタ タグを探します。 Envato Tuts のホームページの例を次に示します:

ページの

head

タグを調べてください。このプレビューを生成した関連タグは次のとおりです: リーリー Pinterest は Facebook や OpenGraph と同じプロトコルを使用しているため、共有はほぼ同じように機能します。

Twitter では、この概念は「カード」と呼ばれており、コンテンツをどのように提示したいかに応じて、Twitter にはいくつかの異なるバリエーションがあります。 GitHub の Twitter カードの例を次に示します:

これは、このカードを生成する HTML です:

リーリー

注: GitHub は、このチュートリアルで説明されているものと同様のテクノロジーを使用しています。ページの HTML は、name 属性が

twitter:description に設定されたタグとは若干異なります。正しいメタ タグを取得するには、この記事で後述するようにユーザー エージェントを変更する必要がありました。 クライアント側レンダリングの問題

Web サイト全体にタイトル、説明、または画像のみが必要な場合は、メタ タグを追加しても問題ありません。これらの値を HTML ドキュメントの

head

にハードコードするだけです。ただし、より複雑な Web サイトを構築していて、URL (フレームワークが動作している HTML5 History API のラッパーである可能性があります) に基づいて充実したソーシャル共有を変更したい場合があります。 最初の試みは、他のものを追加するのと同じように、テンプレートを構築し、メタ タグに値を追加することです。この情報を抽出するボットはこの時点では JavaScript を実行しないため、共有しようとすると期待される値ではなくテンプレート タグが使用されてしまいます。

Web サイトをボットが読み取れるようにするために、ソーシャル共有ボットのユーザー エージェントを検出し、ボットに正しいコンテンツを提供するフォールバック ルーターを構築するミドルウェアを構築しています。これにより、SPA フレームワークの使用が回避されます。

ユーザー エージェント ミドルウェア

クライアント (ボット、Web クローラー、ブラウザー) は、すべてのリクエストの HTTP ヘッダーでユーザー エージェント (UA) 文字列を送信します。これによりクライアント ソフトウェアが識別されるはずです。Web ブラウザにはさまざまな UA 文字列がありますが、ボットは多かれ少なかれ安定している傾向があります。 Facebook、Twitter、Pinterest は、便宜上、ボットのユーザー エージェント文字列を公開しています。

Express では、UA 文字列は

req

uest オブジェクトに user-agent として含まれます。正規表現を使用して、代替コンテンツを提供したいさまざまなボットを識別しています。ミドルウェアに含めていきます。ミドルウェアはルートに似ていますが、パスやメソッドを必要とせず、(通常は) リクエストを別のミドルウェアまたはルートに渡します。 Express では、ルートとミドルウェアは連続しているため、Express アプリ内の他のルートの上に配置します。 リーリー 上記の正規表現は、UA 文字列の先頭で「facebookexternalhit」、「Twitterbot」、または「Pinterest」を検索します。存在する場合、UA はコンソールに記録されます。

これはサーバー全体です:

リーリー

ミドルウェアをテストする

Chrome で、新しいサーバーに移動します (

http://localhost:8000/

である必要があります)。 DevTools を開き、開発者ペインの左上隅にあるスマートフォンのアイコンをクリックしてデバイス モードをオンにします。 <p><img src="https://img.php.cn/upload/article/000/000/164/169383487314699.png" alt="增强 Node.js 单页应用程序中的社交共享"></p> <p>在设备工具栏上，将“Twitterbot/1.0”放入UA编辑框中。</p> <p><img src="https://img.php.cn/upload/article/000/000/164/169383487339079.png" alt="增强 Node.js 单页应用程序中的社交共享"></p> <p>现在，重新加载页面。</p> <p>此时，您应该在页面中看到“Serve SPA”，但是查看 Express 应用程序的控制台输出，您应该看到：</p> <p><code class="inline">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”。

＃＃＃次のステップ＃＃＃

実際の実装では、データ ソースとルーティングの統合を処理する必要があります。 SPA コードで指定されているルートを確認し、共有される可能性があるものについては代替バージョンを作成することをお勧めします。共有できるルートを確立したら、メイン テンプレートに

meta

タグを設定します。これは、誰かが意図しないページを共有した場合のフォールバックとして機能します。 Pinterest、Facebook、Twitter がソーシャル メディア市場の大部分を占めていますが、統合したいサービスは他にもあります。ソーシャル共有ボットの名前を公開するサービスもあれば、公開しないサービスもあります。ユーザー エージェントを特定するには、console.log

を実行してコンソール出力を調べることができます。混雑したサイトでユーザー エージェントを特定しようとするのは難しい場合があるため、まず非運用サーバーでこれを試してください。その時点から、ミドルウェアの正規表現を変更して、新しいユーザー エージェントをキャプチャできるようになります。 リッチなソーシャル メディア共有は、美しい単一ページのアプリケーション ベースの Web サイトに人々を誘導する優れた方法です。ボットを機械可読コンテンツに選択的に誘導することで、ボットに適切な情報を提供できます。

以上がNode.js シングルページ アプリケーションでのソーシャル共有の強化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。