🔎
haml-lintでOGPの設定ミスを防ぐカスタムルール
はじめに
あぶなかった…。OGPの設定をせずに、リリースしてしまうところでした。
ざっと作ったあと、見た目を確認してもらうと、そのあと油断するんですよね…。
こういうミスはツールでなんとかしたい。
今、haml-lintを使っているので、そこで検知してもらうのがよさそうと思って作りました。
前提
ここでは↓のものを使っています。
- rails
- haml
- haml-lint
また、レイアウトが↓のようになっており、content_forでOGPのtitleやdescriptionを注入するようになっています。
app/views/layouts/application.html.haml
!!!
%html
%head
(省略)
%meta{ content: title, property: 'og:title' }/
%meta{ content: og_description, property: 'og:description' }/
(省略)
%body
= yield
詳細
プロジェクトごとに違うだろうし、誤検知があればすぐ直せばいいだろう、ということで割と単純に、ファイル内にOGPの設定がされているか検索するだけにしました。
細かいことはコードと一緒のほうがわかりよいと思ったので、そちらを見てください。
lib/haml_lint/ogp_description.rb
# frozen_string_literal: true
module HamlLint
class Linter
class OgpDescription < Linter
include LinterRegistry
def visit_root(root) # ファイル全体に対するチェック
# 部分テンプレートだったり、htmlのテンプレートでなければチェックしない
# レイアウトはファイル名で区別がつかないので、設定ファイルで除外
file_name = document.file.split('/').last
return unless file_name.match?(/\A[^_].*\.html\.haml\Z/)
# ソース内にOGPのdescriptionを埋めるコードがあるかチェック
# プロジェクトごとに違うので適宜変更
source = document.source
return if source.match?(/content_for +:og_description/)
# 警告を出力
record_lint(root, 'Did you forget a description?')
end
end
end
end
titleのためのlinterは…ほとんど変わらないので、省略します。
linterは作っただけではもちろんダメなので、設定ファイルで読み込むように指示します。
また、デフォルトはdisableになっているので、必ず有効化します。
.haml-lint.yml
require:
- './lib/haml_lint/ogp_description.rb'
- './lib/haml_lint/ogp_title.rb'
linters:
OgpDescription:
enabled: true
exclude:
- app/views/layouts/**/*
OgpTitle:
enabled: true
exclude:
- app/views/layouts/**/*
最後に
作ったあと、プロジェクト全体調べたら結構設定漏れがありました。
みんなレビューもしてますが、やっぱり抜けちゃいますよね…。
Discussion