ogpの導入(Pelican)

in pelican

tagged pelican, ogp, facebook, twitter

table contens

OGPを導入して、twitter や slack などで共有した時の見栄えを調整する。

1 アイコンの作成

アイコンの作成は、ここでお世話になった。

[https://logo.squarespace.com/:embed]

!embed

!embed

2 OGP

theme/theme名/base.html (style linkを埋め込むべき template file) に 以下のように記述する。

記事詳細(article) と TOPページやサマリー表示と title と url を分けて設定できるようにする。

  <meta property="og:type" content="website" />


  <meta property="og:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/icons/apple-touch-icon.png" />


  <meta property="og:site_name" content="{{ SITENAME }}" />




  {% if article %}


  <meta property="og:title" content="{{ SITENAME }} | {{ article.title }}" />


  <meta property="og:url" content="{{ SITEURL }}/{{ article.url }}" />


  {% else %}


  <meta property="og:title" content="{{ SITENAME }}" />


  <meta property="og:url" content="{{ SITEURL }}" />


  {% endif %}

3 slack の出力結果

sample
sample