StrapiでURLからOGPを展開する方法

Strapiを使っていて記事にURLを貼り付けたらそのURLのサムネイルを一緒に表示したくなりますよね。そんな時はOGPを使うという方法もあります。

OGPの情報を保存するFieldを追加

Content-Type Builderで記事のTypeにURLとOGPの情報を保存するフィールドを追加します。
今回はsite_title site_image site_descriptionに情報を保存することにします。

記事の保存時にOGP情報を取得する処理を追加

ogp情報を取得するためにopen-graph-scraperというライブラリを使います。
まずプロジェクトにopen-graph-scraperを追加します。

npm install -g open-graph-scraper

ModelのLifecycle hooksという機能を使って実装します。
以下のソースはcontent-typeをnoteという名前で作った時のものです。
コンテンツの作成、更新時に処理が実行されるように設定しました。

src/api/note/content-tpes/note/lifecycles.js

const ogs = require('open-graph-scraper');

async function updateSitedata(event)
{
    const url = event.params.data.url;

    const options = { url: url };
    try{
        const data = await ogs(options);

        const { error, result, response } = data;
        if(!error){
            event.params.data.site_title = result.ogTitle;
            event.params.data.site_image = result.ogImage ? result.ogImage.url : null;
            event.params.data.site_description = result.ogDescription;
        }else{
            event.params.data.error = result.errorDetails;
        }
    }catch(e){
        event.params.data.error = e.result.error;
    }
}


module.exports = {
    async beforeCreate(event) {
        await updateSitedata(event);
    },
  
    async beforeUpdate(event) {
        await updateSitedata(event);
    },
  };