OGPしたい(sphinxext-opengraph

$ pip3 install sphinxext-opengraph
1# conf.py
2extensions = [
3    ...,
4    "sphinxext.opengraph",
5    ...
6]

SphinxJPハッカソンに参加して教えてもらった拡張パッケージです。 sphinxext-opengraphを使うと、ウェブサイトにOGP情報を追記できます。 conf.pyextensionsにパッケージ名を追記するだけで、HTML中に最低限のOGP情報が追加されるので、とりあえず使っておくとよいと思います。

OGPはconf.pyで全体、フロントマターでページごとに設定できます。

このページは以下のOGP情報が追加されました。

<meta content="ROOT, Python" name="keywords" />
<meta property="og:title" content="OGPしたい(sphinxext-opengraph)" />
<meta property="og:type" content="website" />
<meta property="og:url" content="sphinx/sphinx-extensions-opengraph.html" />
<meta property="og:site_name" content="KumaROOT" />
<meta property="og:description" content="SphinxJPハッカソンに参加して教えてもらった拡張パッケージです。 sphinxext-opengraph を使うと、ウェブサイトにOGP情報を追記できます。 conf.py で全体のOGPを設定でき、フロントマターでページごとのOGPを設定できます。 conf.py の extensions にパッケージ名を追記するだけで、HTML中に最低限のOGP情報が追加されるので、とりあえず使っ..." />

サイト設定したい(conf.py

 1# conf.py
 2
 3## Options for OGP (sphinxext-opengraph)
 4
 5### Required
 6ogp_site_url = "https://kumaroot.readthedocs.io/ja/latest/"  # サイトの公開URL
 7
 8### Optional
 9ogp_description_length = 200
10ogp_site_name = "サイト名" # デフォルトは project で設定した文字列
11ogp_social_cards = # あとで調べる
12ogp_image = "サイトOGP画像のパス" # ogp_site_urlからの相対パス
13ogp_image_alt = "サイトOGP画像の代替テキスト" # デフォルトは ogp_site_name で設定した文字列
14ogp_use_first_image = True
15ogp_type = "website"
16ogp_custom_meta_tags = [
17    '<meta property="og:ignore_canonical" content="true" />',
18]
19ogp_enable_meta_description = True

conf.pyにサイト全体のOGP情報を設定できます。 ogp_use_first_imageogp_enable_meta_descriptionも有効にしました。

ヒント

次のようなサイトを使って、OGP表示を確認できます。

「OGP確認ツール」で検索するとヒットします。

ページ設定したい

---
ogp_description_length: 150
og:description: "ページの説明"
description : "ページの説明"
og:title: "ページのタイトルを上書き"
og:type: "article"
og:image: "OGP画像の絶対パス"
og:image:alt: "OGP画像の代替テキスト"
---

# タイトル

本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

ページ先頭のfield listを使って、ページごとにOGP設定を変更できます。

リファレンス