👆埋め込みしたときに画像が表示されるようにしてみました。
さらにファビコンの設定もしてみたので、タブにもアイコンが出ます。
かわいいｗ
リンクカードの設定方法（OGP設定）
リンクカードで画像を表示するには、
OGP（Open Graph Protocol） を設定します。
トップページのHTMLの <head>～</head> の間に、以下のmetaタグを入れます。
<meta property="og:title" content="タイトル">
<meta property="og:description" content="説明文">
<meta property="og:image" content="サムネイル画像のURL">
<meta property="og:url" content="トップページのURL">
<meta property="og:type" content="website">
サムネイル画像の作り方
画像は jpg または png でOK。
私はトップページのスクショをそのまま使いました。
オリジナルで描いてもよさそう･･･！
（ブログや作品の雰囲気が出るのでおすすめ）
▶備考
・推奨サイズ：1200×630px
・文字は大きめ＆シンプルに
→ SNSで見たときにかなり印象が変わる
X（Twitter）用の表示設定
Xにリンクを貼ったときの表示は、こちらのタグで調整できます。
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="説明文">
<meta name="twitter:image" content="サムネイル画像のURL">
これで、ポストしたときに画像付きで表示されます。
画像が更新されないとき
一度リンクを貼るとキャッシュされて、画像を変更しても反映されない場合があります。
以前は「X カードバリデーター」というサイトで更新で来たみたいなんですが、現在はサービス提供されてないのかな？
自動的にキャッシュが更新されるのを待つしかないみたい。
ファビコンの設定方法
ファビコンとは、サイトを開いたときタブに表示される小さなアイコンのこと。
同じく <head>～</head> の間にこちらを追加します。
<link rel="icon" href="アイコン画像URL">
ファビコン画像のポイント
・サイズ：16×16 / 32×32
・形式：png（またはico）
かなり小さく表示されるので、細かい絵はつぶれやすいです。
シンプルなデザインがおすすめ
色々と改造してみるのも面白いですね･･･！
参加中👆よろしければポチっと応援お願いします！
