🔎
OGPを確認するための CLI を作った
OGP 情報をいい感じに見るための CLI を作ったので紹介します。
作ったもの
HTML から OG タグの情報を取得して表示するための CLI です。
インストール方法
Mac の方は homebrew を使ってインストールすることができます。
$ brew install uzimaru0000/tap/oglens
また Cargo が入っている人は cargo install でもインストールできます。
$ cargo install oglens
その他 OS の方は GitHub のrelease ページから DL することができます。
使い方
基本的な使い方は og コマンドの引数として HTML の path を指定する形になります
$ og index.html
また、pipe として HTML 文字列を受け付けるので curl 等で取得した HTML に対しても実行することができます
$ curl -s https://ogp.me | og
+-----------------+-----------------------------------------------------------------------------------------+
| property | content |
+-----------------+-----------------------------------------------------------------------------------------+
| og:title | Open Graph protocol |
+-----------------+-----------------------------------------------------------------------------------------+
| og:type | website |
+-----------------+-----------------------------------------------------------------------------------------+
| og:url | https://ogp.me/ |
+-----------------+-----------------------------------------------------------------------------------------+
| og:image | https://ogp.me/logo.png |
+-----------------+-----------------------------------------------------------------------------------------+
| og:image:type | image/png |
+-----------------+-----------------------------------------------------------------------------------------+
| og:image:width | 300 |
+-----------------+-----------------------------------------------------------------------------------------+
| og:image:height | 300 |
+-----------------+-----------------------------------------------------------------------------------------+
| og:image:alt | The Open Graph logo |
+-----------------+-----------------------------------------------------------------------------------------+
| og:description | The Open Graph protocol enables any web page to become a rich object in a social graph. |
+-----------------+-----------------------------------------------------------------------------------------+
その他の meta タグを取得
Twitter の OG タグは og: で始まらないで twitter: で始まっていたり、property 属性ではなく name だったりします。
それらの OG タグも検証したいときは --prefix オプションを使います
例として Twitter の OG タグの取得をします。
Twitter の OG タグは <meta name="twitter:image:src" content="..." /> という形式になっているので、--prefix オプションに渡す値は twitter:name になります。
<meta xxx="yyy:image" content="..." /> の場合は yyy:xxx という形になります。
$ curl -s https://github.com/uzimaru0000/oglens | og --prefix=twitter:name
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| property | content |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| og:image | https://opengraph.githubassets.com/cbcf7dfe0db5d090c8463b53042af5be0331d865b61ecfce48b561b9b3c4f802/uzimaru0000/oglens |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| og:image:alt | Tools for viewing OGP. Contribute to uzimaru0000/oglens development by creating an account on GitHub. |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| og:image:width | 1200 |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| og:image:height | 600 |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| og:site_name | GitHub |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| og:type | object |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| og:title | GitHub - uzimaru0000/oglens: Tools for viewing OGP |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| og:url | https://github.com/uzimaru0000/oglens |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| og:description | Tools for viewing OGP. Contribute to uzimaru0000/oglens development by creating an account on GitHub. |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| twitter:image:src | https://opengraph.githubassets.com/cbcf7dfe0db5d090c8463b53042af5be0331d865b61ecfce48b561b9b3c4f802/uzimaru0000/oglens |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| twitter:site | @github |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| twitter:card | summary_large_image |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| twitter:title | GitHub - uzimaru0000/oglens: Tools for viewing OGP |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
| twitter:description | Tools for viewing OGP. Contribute to uzimaru0000/oglens development by creating an account on GitHub. |
+---------------------+------------------------------------------------------------------------------------------------------------------------+
このように、OGP のタグの他に twitter の OG タグも取得できます
JSON 形式で取得
他の CLI で利用するケースでは JSON で取得できる方が扱いやすいかもしれません
そんなときには、--json prefix を使います
$ curl -s https://ogp.me | og --json
{
"og:description": "The Open Graph protocol enables any web page to become a rich object in a social graph.",
"og:url": "https://ogp.me/",
"og:type": "website",
"og:image": "https://ogp.me/logo.png",
"og:title": "Open Graph protocol",
"og:image:alt": "The Open Graph logo",
"og:image:type": "image/png",
"og:image:width": "300",
"og:image:height": "300"
}
最後に
OG タグの設定をするときの確認や Web ページから OG タグを抽出したいときに使ってみてください！
利用していてバグ等がありましたら issue で報告してくれるとありがたいです。
Discussion