Back to Portfolio
February 28, 2026

OGPを設定した

ノートを書いてSNSで共有しても表示されるのは素朴なURLだけ…なんてことを令和の時代にやるわけにはいかないので少しずつOGPを充実させなければ〜ということで基本的な項目だけ埋めた。

画像は固定のサムネイルをひとつ用意するのか、記事のタイトルなどを動的に埋め込んだ画像をビルド時に生成することで対応するのかなどをまだ決められていないのでここはもう少し他の実装が落ち着いたら改めて考える。

OGPとは

The Open Graph protocolから引用。

The Open Graph protocol was originally created at Facebook and is inspired by Dublin Core, link-rel canonical, Microformats, and RDFa. The specification described on this page is available under the Open Web Foundation Agreement, Version 0.9.

Facebook（現Meta）によって策定された、WEBページのURLをリッチオブジェクトとして表現可能にするためのプロトコルということらしい。

ReactといいGraphQLといい、Meta社は「足りないものは自分たちで作る」という思想が節々に感じられて本当にすごい。

実装は上記の公式のドキュメントにあるように、meta要素のpropertyにog:という命名規則に沿って提供されている属性を用いて設定をしていく。

これらのメタ情報を使ってどのように表現するのかはSNSプラットフォーム側の実装に依るため、WEPページを公開している側としてはこのプロトコルに沿って適切に実装さえしておけば良い。

今回設定したもの

まだ画像を用意できていないので、取り急ぎ今回は以下の属性を追加した。

  • og:title: 記事のタイトル
  • og:description: 記事の概要
  • og:type: ページの種類（今回はwebsiteを指定）
  • og:url: 共有するページのURL
  • og:site_name: WEBサイトの名称
  • og:locale: 言語および国（今回はja_JPを指定）

og:titleについてはarticleという値もあってブログ記事の用途であればこちらの方が適切なのか？と思ったが、この値が何に作用するかまではあまりよくわからなかったのでとりあえずどの画面でも幅広く表現できるwebsiteを指定した。

og:localは言語コード（ISO 639）と国コード（ISO 3166）をハイフンで連結したものを指定する。
僕は日本語以外まともに書いたり話したりできるレベルにないので、迷わず日本を指定した。
og:locale:alternateというプロパティで他のlocaleも任意の数だけ指定できるようなので、多言語対応しているページの場合はこういうのが使えるんだろうなと思う。

今回はやらなかったこと

og:image関連のプロパティはまだ指定できていないので、なるべく早めに対応したい。
Structured Propertiesに沿って設定すればよさそうなので、あとは画像を用意する仕組みさえ作れればという感じ。

Astroでの設定

astro.config.tsの実装

Astroがビルドをする際に正規URLを判断するために、siteプロパティを予め指定しておく必要がある。（後述するレイアウト側の実装で利用するAstro.siteが参照する値になる）

import { defineConfig } from "astro/config";

export default defineConfig({
	site: "https://tacona.net", // 👈 Setting your domain!
});

レイアウトの実装

Astroではnew URL(Astro.url.pathname, Astro.site).toString()といった形でAstro.url.pathnameとAstro.siteの内容をもとに現在表示している画面のURLを生成できる。
これをog:urlに設定することで表示している画面に応じて適したURLを指定できるようになる。

---
const url = new URL(Astro.url.pathname, Astro.site).toString();
---
<html>
  <head>
    <meta property="og:url" content={url} />
  </head>
</html>

無事に表示されました。🚀