FLYNNLABAboutMeCodingActivityStudy 2024초등수학
SPA og tag 적용 방법
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();
});

장점

응답 속도가 빠르다.

단점

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