Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@pokotyan

prerender-spa-pluginでogp対応

More than 1 year has passed since last update.

prerender-spa-plugin

SPAをプリレンダリングして事前に各ページのhtmlを作って動的なOGPに対応する方法としてはrendertronprerender.ionetlify などいろんな外部サービスがあるが、ページ数の少ないSPAの場合は、prerender-spa-plugin を使うのが一番お手軽だった。

使い方もwebpackに以下のような設定を入れておくだけ。

const PrerenderSPAPlugin = require("prerender-spa-plugin");
const path = require("path");

module.exports = (config, env) => {
  if (env === "production") {
    config.plugins = config.plugins.concat([
      new PrerenderSPAPlugin({
        routes: ["/", "/sign-in"], // 事前にレンダリングしておきたいページ
        staticDir: path.join(__dirname, "build")
      })
    ]);
  }

  return config;
};

このwebpackの設定をしている状態でビルドを行うと、以下のような感じで各ページごとにhtmlが吐き出される。

build
├── index.html
├── sign-in
│   └── index.html

あとはreact-helmetなどを使って各ページにmetaタグを入れておけば動的にogpが変わるようになる。

動作確認

動的にOGPが変わることをローカル環境で確認したい場合は、
1) まずビルド行なう
2) web-server-for-chromeや、serveなどを使ってビルド後のファイルが格納されているディレクトリを対象にサーバーを立てる。
3) ngrokを使って 2 で立てたサーバーを外部公開する
4) https://metatags.io/ などのogpが確認できるサイトに 3 で生成されたurlを貼り付ける。

をすれば確認できる。

ci

prerender-spa-pluginpuppeteer を使っているのでcircle ci上などでビルドしている場合は puppeteer のインストールも必要。
https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md#running-puppeteer-on-circleci

インストールしていない状態でビルドすると以下のようなエラーが出る。

Creating an optimized production build...
Error: Failed to launch chrome!
/home/circleci/repo/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libXtst.so.6: cannot open shared object file: No such file or directory

TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

トラブルシューティングの説明にもあるように、以下のようなpuppeteerをインストールするコマンドを定義し、実行しておけば上記エラーは解消された。

.circleci/config.yml
commands:
  puppeteer_install:
    description: Install puppeteer and headless chrome
    steps:
      - run:
          name: Install Headless Chrome dependencies
          command: |
            sudo apt-get install -yq \
            gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
            libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
            libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 \
            libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates \
            fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
      - run:
          name: Install puppeteer with chronium
          command: |
            yarn add puppeteer

prerender-spa-pluginはページが多いようなSPAだと不向きだが、個人で作ってるようなページ数が少ないSPAで使うなら必要十分なんじゃないかと感じた。

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
pokotyan
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?