SNSなどでシェアされたときに表示される ディスクリプション画像はどこで設定できますか?

2021年12月28日
SNSなどでシェアされたときに表示される ディスクリプション画像はどこで設定できますか?

OG設定については、レイアウトやページごとのheadタグやMETAタグ内で、
任意の内容で設定いただく形となります。
(OG設定の仕様上、上から読み込まれるため)
上の階層で設定したものは下の階層で上書きが出来ない場合があるので、
レイアウト指定の場合はなるべく下の階層で設定するのが良いかと存じます。
ちなみに、アーティクルの「記事詳細ページ」で記事個別の内容を設定する場合は、
「管理画面>設定>アーティクル」の画面から、行ないます。


下記、画像中心でのご案内ですが、
descriptionやtitleでも可能なため、お試し頂ければと存じます。
設定サンプル: https://lecture-o22.296.works/_sys/setting/article/221/

(ログイン情報は制作レクチャー時の見本環境と同じです)


◆設定画面
「設定>アーティクル>ブログ」などで、
「入力項目と出力テンプレート」へと進み、
ページ中ほどの「出力テンプレート」にて
headタグ内にアーティクル投稿画像がog:imageに設定されるよう記述をすることができます。
(アーティクル記事ページのheadタグ内などに入力項目の内容を反映させるための機能です)


◆記述内容
出力先を「headタグ内」に設定し、og:image設定のために記述を入れます。


【記述例】
■og:image出力
<meta name="og:image" content="画像パス">

「画像パス」部分には、アーティクル記事の画像を出力するため、説明文下にある「■og:image出力」の記述を入れてください。

「■■■」部分を該当アーティクルの画像項目のコードに変更し、完了です。

【記述例】
https://{=$_SERVER['SERVER_NAME']=}/_img/{=current_lang()=}/{=@contents:datastore=}/{=@contents:id=}/■■■/500_500_1_ffffff/

◆画像以外の出力
なお、descriptionの出力の場合は、以下のように記述します。
タイトルも、変数部分を変更いただくことで設定可能です。

【記述例】
■description
<meta name="description" content="{=@contents:項目コード=}">