.. index::
single: Sphinx Extensions; OGP
$ pip3 install sphinxext-opengraph
# conf.py
extensions = [
...,
"sphinxext.opengraph",
...
]
SphinxJPハッカソンに参加して教えてもらった拡張パッケージです。
sphinxext-opengraphを使うと、ウェブサイトにOGP情報を追記できます。
{file}conf.py
のextensions
にパッケージ名を追記するだけで、HTML中に最低限のOGP情報が追加されるので、とりあえず使っておくとよいと思います。
OGPは{file}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
## Options for OGP (sphinxext-opengraph)
### Required
ogp_site_url = "https://kumaroot.readthedocs.io/ja/latest/" # サイトの公開URL
### Optional
ogp_description_length = 200
ogp_site_name = "サイト名" # デフォルトは project で設定した文字列
ogp_social_cards = # あとで調べる
ogp_image = "サイトOGP画像のパス" # ogp_site_urlからの相対パス
ogp_image_alt = "サイトOGP画像の代替テキスト" # デフォルトは ogp_site_name で設定した文字列
ogp_use_first_image = True
ogp_type = "website"
ogp_custom_meta_tags = [
'<meta property="og:ignore_canonical" content="true" />',
]
ogp_enable_meta_description = True
conf.py
にサイト全体のOGP情報を設定できます。
ogp_use_first_image
とogp_enable_meta_description
も有効にしました。
:::{hint}
次のようなサイトを使って、OGP表示を確認できます。
「OGP確認ツール」で検索するとヒットします。
:::
---
ogp_description_length: 150
og:description: "ページの説明"
description : "ページの説明"
og:title: "ページのタイトルを上書き"
og:type: "article"
og:image: "OGP画像の絶対パス"
og:image:alt: "OGP画像の代替テキスト"
---
# タイトル
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
ページ先頭のfield listを使って、ページごとにOGP設定を変更できます。