Node.js 단일 페이지 애플리케이션에서 소셜 공유 강화

SPA(단일 페이지 애플리케이션)는 클라이언트측 렌더링 템플릿을 기반으로 하여 최종 사용자에게 매우 역동적인 경험을 제공합니다. 최근 Google은 일반 사용자와 마찬가지로 웹페이지를 크롤링하고 JavaScript를 실행하여 SPA 프레임워크(Angular, Ember, Vue 등)로 구동되는 웹사이트를 Google의 불이익 없이 크롤링할 수 있다고 발표했습니다.

검색 외에도 다른 웹 크롤러도 사이트 가시성에 중요합니다. 즉, 메타 태그에 의존하는 풍부한 소셜 공유 봇은 JavaScript를 인식하지 못합니다.

이 튜토리얼에서는 대부분의 SPA 프레임워크와 함께 사용할 수 있고 귀하의 웹사이트가 Twitter, Facebook 및 Pinterest Share에 풍부하게 소개될 수 있도록 Express 및 Node.js 서버를 위한 대체 라우팅 및 렌더링 모듈을 구축합니다.

경고

이 튜토리얼은 사회적으로 공유된 정보를 추출하는 웹봇 전용입니다. 검색 엔진 웹 크롤러에는 이 기술을 사용하지 마세요. 검색 엔진 회사는 이러한 행동을 심각하게 받아들이고 이를 스팸이나 사기로 간주할 수 있으므로 순위가 빠르게 떨어질 수 있습니다.

마찬가지로 풍부한 소셜 공유를 통해 제공하는 콘텐츠가 사용자가 보는 내용과 봇이 읽는 내용과 일치하는지 확인하세요. 이러한 일관성을 유지하지 못하면 소셜 미디어 사이트가 제한될 수 있습니다.

풍부한 소셜 공유

Facebook에 업데이트를 게시하고 URL을 포함하면 Facebook 봇이 HTML을 읽고 OpenGraph 메타 태그를 찾습니다. Envato Tuts+ 홈페이지의 예는 다음과 같습니다.

페이지를 검사하고 head 태그에 이 미리보기를 생성한 관련 태그가 있습니다.

으아악

Pinterest는 Facebook 및 OpenGraph와 동일한 프로토콜을 사용하므로 공유 방식이 거의 동일합니다.

트위터에서는 이 개념을 "카드"라고 부르며, 트위터에는 콘텐츠를 표현하려는 방식에 따라 여러 가지 변형이 있습니다. 다음은 GitHub의 Twitter 카드 예입니다.

이 카드를 생성하는 HTML은 다음과 같습니다.

으아악

참고: GitHub는 이 튜토리얼에 설명된 것과 유사한 기술을 사용합니다. 페이지 HTML은 이름 속성이 twitter:description로 설정된 태그와 약간 다릅니다. 올바른 메타 태그를 얻으려면 이 문서의 뒷부분에 설명된 대로 사용자 에이전트를 변경해야 했습니다.

클라이언트 측 렌더링 문제

전체 웹사이트에 대한 제목, 설명 또는 이미지만 필요한 경우 메타 태그를 추가하는 것은 문제가 되지 않습니다. 이 값을 HTML 문서의 head에 하드코딩하면 됩니다. 그러나 더 복잡한 웹사이트를 구축하고 URL에 따라 다양한 소셜 공유를 원할 수도 있습니다(이는 프레임워크가 작동하는 HTML5 기록 API에 대한 래퍼일 수 있음).

첫 번째 시도는 다른 것을 추가하는 것처럼 템플릿을 만들고 메타 태그에 값을 추가하는 것일 수 있습니다. 이 정보를 추출하는 봇은 현재 JavaScript를 실행하지 않으므로 공유하려고 할 때 예상 값 대신 템플릿 태그가 표시됩니다.

봇이 웹사이트를 읽을 수 있도록 하기 위해 우리는 소셜 공유 봇의 사용자 에이전트를 감지하는 미들웨어를 구축한 다음 봇에 올바른 콘텐츠를 제공하는 폴백 라우터를 구축하여 SPA 프레임워크의 사용을 방지합니다.

사용자 에이전트 미들웨어

클라이언트(봇, 웹 크롤러, 브라우저)는 모든 요청의 HTTP 헤더에 사용자 에이전트(UA) 문자열을 보냅니다. 이를 통해 클라이언트 소프트웨어를 식별해야 합니다. 웹 브라우저에는 다양한 UA 문자열이 있지만 봇은 다소 안정적인 경향이 있습니다. Facebook, Twitter 및 Pinterest는 봇의 사용자 에이전트 문자열을 무료로 게시합니다.

Express에서는 UA 문자열을 user-agent 包含在 request 개체로 사용할 수 있습니다. 저는 대체 콘텐츠를 제공하는 데 관심이 있는 다양한 봇을 식별하기 위해 정규식을 사용하고 있습니다. 미들웨어에 포함시켜보겠습니다. 미들웨어는 경로와 비슷하지만 경로나 메서드가 필요하지 않으며 (일반적으로) 요청을 다른 미들웨어나 경로로 전달합니다. Express에서는 경로와 미들웨어가 연속되어 있으므로 Express 앱의 다른 경로 위에 배치하세요.

으아악

위 정규식은 UA 문자열 시작 부분에서 "facebookexternalhit", "Twitterbot" 또는 "Pinterest"를 찾습니다. 있는 경우 UA가 콘솔에 기록됩니다.

전체 서버입니다:

으아악

미들웨어 테스트

Chrome에서 새 서버(http://localhost:8000/여야 함)로 이동합니다. DevTools를 열고 개발자 창 왼쪽 상단에 있는 스마트폰 아이콘을 클릭하여 장치 모드를 켭니다.

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

다음 단계

실제 구현에서는 데이터 소스와 라우팅의 통합을 처리해야 합니다. SPA 코드에 지정된 경로를 검토하고 공유될 수 있다고 생각되는 모든 항목의 대체 버전을 만드는 것이 좋습니다. 공유 가능한 경로를 설정한 후에는 누군가가 의도하지 않은 페이지를 공유하는 경우 대체 역할을 할 meta 태그를 기본 템플릿에 설정하세요.

Pinterest, Facebook, Twitter가 소셜 미디어 시장의 큰 부분을 차지하고 있지만 통합하고 싶은 다른 서비스도 있습니다. 일부 서비스에서는 소셜 공유 봇의 이름을 게시하지만 다른 서비스에서는 그렇지 않을 수도 있습니다. 사용자 에이전트를 결정하려면 console.log 콘솔 출력을 확인하세요. 바쁜 사이트에서는 사용자 에이전트를 결정하는 것이 어려울 수 있으므로 먼저 비프로덕션 서버에서 이 작업을 시도해 보세요. 그 시점부터 미들웨어의 정규식을 수정하여 새로운 사용자 에이전트를 캡처할 수 있습니다.

풍부한 소셜 미디어 공유는 사람들을 아름다운 단일 페이지 앱 기반 웹사이트로 유도하는 좋은 방법입니다. 봇에게 기계가 읽을 수 있는 콘텐츠를 선택적으로 전달함으로써 봇에게 올바른 정보를 제공할 수 있습니다.

위 내용은 Node.js 단일 페이지 애플리케이션에서 소셜 공유 강화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!