FLYNNLABAboutMeCodingActivityStudy 2024초등수학
SPA og tag 적용 방법
2015-05-07
angularjs, ogtag, SPA, meteor

ISSUE

meteor와 angularjs로 프로젝트를 하고 있다. SPA로 페이지를 구성하다 보니 og tag가 수집 이슈가 발생했다.

RESOLVE

1. phantomjs를 활용해서 해결

angularjs - angular-seo meteor - spiderable

장점

동작하는 서비스를 변경 할 필요가 없다.

단점

phantomjs를 서버에 설치해둬야 한다. phantomjs를 통하다 보니 server CPU 사용량이 올라가고 응답속도가 느리다.

2. user-agent나 ?_escaped_fragment_= 체크를 통해서 다른 렌더링이 되도록 처리

var userAgentRegExps = [/^facebookexternalhit/i, /^linkedinbot/i, /^twitterbot/i, /^pinterest/i, /^kakaostory-og-reader/i];
var Url = Iron.Url;
var matchPath = '/b/:_id';
var path = new Url(matchPath);
SSR.compileTemplate('metaBookEnd', Assets.getText('metaBookEnd.html'));

WebApp.connectHandlers.use(function(req, res, next) {
  var userAgent = req.headers['user-agent'];
  var urlPath = req.url;
  if(path.test(req.url)) {
    console.log(req.headers['user-agent']);
  }
  if(path.test(urlPath) && _.any(userAgentRegExps, function(re) {
      return re.test(userAgent);
    })) {
    var params = path.params(urlPath);
    var book = Books.findOne(params._id);
    if(book) {
      var head = SSR.render("metaBookEnd", book);
      res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
      return res.end('<!DOCTYPE html><html>' + head + '</html>');
    }
  }
  next();
});

장점

응답 속도가 빠르다.

단점

추가적인 로직을 준비해야 한다.