VuePressでOGP自動設定 (seoプラグイン＆placehold.jp編)

「vuepress-plugin-seo」というmetaタグを生成してくれるプラグインと、文字列を指定するといい感じで画像にしてくれる「placehold.jp」というサービスを使って、SNSでリンクした際などにプレビュー表示に利用されるOGPを自動で生成するようにしてみました。

# seoプラグイン導入

lorisleiva/vuepress-plugin-seo: 🔌 Generate SEO friendly meta header for every page

# インストール

yarn add -D vuepress-plugin-seo

# 設定

.vuepress/config.jsのmodule.exports = {の中に、以下を追加

plugins: {
    'seo': {  }
},

# 確認

デフォルト設定で生成されるmetaタグの確認。

<meta property="article:published_time" content="2020-01-21T00:00:00.000Z">
<meta property="og:site_name" content="DORASU Tech. BLOG">
<meta property="og:title" content="自前サーバーのGitLab-CEリポジトリからNetlifyにデプロイ">
<meta property="og:type" content="website">
<meta property="og:url" content="/posts/2020/01/21/netlify-gilabce.html">
<meta name="twitter:title" content="自前サーバーのGitLab-CEリポジトリからNetlifyにデプロイ">
<meta name="twitter:url" content="/posts/2020/01/21/netlify-gilabce.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:label2" content="Filed under">
<meta name="twitter:data2" content="VuePress, Netlify, GitLab">
<meta property="article:tag" content="VuePress">
<meta property="article:tag" content="Netlify">
<meta property="article:tag" content="GitLab">

# カスタマイズ

frontmatterにdescriptionがないと、description系のタグが生成されない
urlにドメインが入っていない
frontmatterにimageがないと、image系のタグが生成されない

# descriptionの自動生成

.vuepress/config.jsの、プラグインの設定のところに以下の設定

plugins: {
  'seo': {
      description: ($page, $site) => $page.frontmatter.description || ($page.excerpt && $page.excerpt.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, "")) || $site.description || "",
      title: ($page, $site) => $page.title || $site.title,
    }
},

以下ルールでdescription系のmetaタグを生成。

frontmatterにdescriptionがあれば、それを使う
excerpt(記事のなかでまで)があれば、それを使う
サイトの概要を使う

ついでにtitleも、トップページやPOSTページだと入らなかったので追加しました。

# urlにドメインが入っていない

$site.themeConfig.domainを利用するようなので、設定します。

.vuepress/config.js内のthemeConfigにdomain項目を追加します

themeConfig: {
   domain: 'https://dorasu-tech.netlify.com',

ドメインの最後に/をつけると２重で/がついてしまうので注意！

# imageの自動生成

.vuepress/config.jsのseoプラグインの設定の個所に以下を追加します。

image: ($page, $site) => $page.frontmatter.image && (($site.themeConfig.domain || '') + $page.frontmatter.image) || 'https://placehold.jp/40//fff/600x315.png?css=%7B"padding"%3A"%200%2080px"%2C"background-image"%3A"%20url(https%3A%2F%2Fplacehold.jp%2F057%2F333%2F130x40.png%3Ftext%3Ddorasu-tech)"%7D&text='+encodeURIComponent($page.title||$site.title),

画像の生成に、以下のサービスを使わせてもらっています。
Placehold.jp｜ダミー画像生成モック用画像作成
こちらのサイトのexampleページに、OGPとしてURLを埋め込む方法もあったので、利用規約上も問題ないと思われます。

今回は、

背景の生成
タイトル文字の画像生成

で２重に呼び出しをしています。

# 背景の生成

https://placehold.jp/057/333/130x40.png?text=dorasu-tech

130x40の画像に、「dorasu-tech」と書いてある画像を生成。

# タイトル文字の画像生成

上記で作った画像をcssを使って背景画像として利用。
左右に余白を作るために、cssでpadding設定。
600x315ピクセルの画像として、ページのタイトルを使って画像生成。

https://placehold.jp/40//fff/600x315.png?css=%7B"padding"%3A"%200%2080px"%2C"background-image"%3A"%20url(https%3A%2F%2Fplacehold.jp%2F057%2F333%2F130x40.png%3Ftext%3Ddorasu-tech)"%7D&text=600x315ピクセルの画像として、ページのタイトルを使って画像生成

↑こんな感じのOGPイメージを生成します。

# 最終的に生成されたmetaタグ

<meta property="article:published_time" content="2020-01-21T00:00:00.000Z">
<meta property="og:site_name" content="DORASU Tech. BLOG">
<meta property="og:title" content="自前サーバーのGitLab-CEリポジトリからNetlifyにデプロイ">
<meta property="og:description" content="Netlifyは、GitHubやGitLab.comなどのリポジトリサービスにだけ対応していると思っていたのですが、自前サーバーにインストールしたGitLab-CEからも、Netlifyにデプロイできるっぽいので試してみました。
">
<meta property="og:type" content="website">
<meta property="og:url" content="https://dorasu-tech.dorasu.com/posts/2020/01/21/netlify-gilabce.html">
<meta property="og:image"
    content="https://placehold.jp/40//fff/600x315.png?css=%7B&quot;padding&quot;%3A&quot;%200%2080px&quot;%2C&quot;background-image&quot;%3A&quot;%20url(https%3A%2F%2Fplacehold.jp%2F057%2F333%2F130x40.png%3Ftext%3Ddorasu-tech)&quot;%7D&amp;text=%E8%87%AA%E5%89%8D%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AEGitLab-CE%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%8B%E3%82%89Netlify%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">
<meta name="twitter:title" content="自前サーバーのGitLab-CEリポジトリからNetlifyにデプロイ">
<meta name="twitter:description" content="Netlifyは、GitHubやGitLab.comなどのリポジトリサービスにだけ対応していると思っていたのですが、自前サーバーにインストールしたGitLab-CEからも、Netlifyにデプロイできるっぽいので試してみました。
">
<meta name="twitter:url" content="https://dorasu-tech.dorasu.com/posts/2020/01/21/netlify-gilabce.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image"
    content="https://placehold.jp/40//fff/600x315.png?css=%7B&quot;padding&quot;%3A&quot;%200%2080px&quot;%2C&quot;background-image&quot;%3A&quot;%20url(https%3A%2F%2Fplacehold.jp%2F057%2F333%2F130x40.png%3Ftext%3Ddorasu-tech)&quot;%7D&amp;text=%E8%87%AA%E5%89%8D%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AEGitLab-CE%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%8B%E3%82%89Netlify%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">
<meta name="twitter:label2" content="Filed under">
<meta name="twitter:data2" content="VuePress, Netlify, GitLab">
<meta property="article:tag" content="VuePress">
<meta property="article:tag" content="Netlify">
<meta property="article:tag" content="GitLab">