SNSでシェアしたときに自動で出る画像を設定する
公開 2024/06/13 14:53
最終更新
2024/06/14 12:16
SNS(LINE、Twitterなど)でwebページをシェアしたときにLINEやTwitterの方でだしてくれる画像のことをOGP画像といいます。
これLINEやツイッターの方で内容をAIが読んで要約して勝手にだしてくれてるのかなと思ってたんですが実際はホームページ側の方で出している画像でして、作成者が事前に設定しておいたものがでてるそうなんです。
OGP画像はHTMLのmetaタグで設定します。
HTMLの<head></head>の中に上のコードを記述し、""の中を自分の指定したいものに書き換えます。
ページのURLは自分のホームページURLを絶対パスで記述します。
ページの種類には下記のものがあります。
トップページならwebsite、他のページならarticleで大丈夫いいと思います。
ページのタイトル、説明文、サイト名はそれぞれ日本語で好きなように記述します。
最後にOGP画像を設定します。こちらも絶対パスで記述します。
OGP画像のサイズは1200×630pxが望ましいとのことであらかじめそのサイズで画像を作り設定します。
OGP画像を設定したのにでないとき
OGP画像が適用になるまでに時間がかかることがあります。
私の体感だと、設定してからアップロードしたものは1日〜２日ぐらいで適用になりましたがすでにアップロードされているページに設定を追加して再度アップロードした場合、前のホームページのデータが少し残っているようで新しく適用されるまでに5日くらい(体感で)かかりました。
最初に設定してからアップロードすると良いと思います。
これLINEやツイッターの方で内容をAIが読んで要約して勝手にだしてくれてるのかなと思ってたんですが実際はホームページ側の方で出している画像でして、作成者が事前に設定しておいたものがでてるそうなんです。
OGP画像はHTMLのmetaタグで設定します。
<meta property="og:url" content=" ページの URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />HTMLの<head></head>の中に上のコードを記述し、""の中を自分の指定したいものに書き換えます。
ページのURLは自分のホームページURLを絶対パスで記述します。
ページの種類には下記のものがあります。
website: WebサイトのTOPページ
blog: ブログのトップページ
article: 記事ページなど、WebサイトのTOP以外のページ
product: 製品の紹介ページトップページならwebsite、他のページならarticleで大丈夫いいと思います。
ページのタイトル、説明文、サイト名はそれぞれ日本語で好きなように記述します。
最後にOGP画像を設定します。こちらも絶対パスで記述します。
OGP画像のサイズは1200×630pxが望ましいとのことであらかじめそのサイズで画像を作り設定します。
OGP画像を設定したのにでないとき
OGP画像が適用になるまでに時間がかかることがあります。
私の体感だと、設定してからアップロードしたものは1日〜２日ぐらいで適用になりましたがすでにアップロードされているページに設定を追加して再度アップロードした場合、前のホームページのデータが少し残っているようで新しく適用されるまでに5日くらい(体感で)かかりました。
最初に設定してからアップロードすると良いと思います。
☔️{いらっしゃいませ〜〜⭐️]
備忘録だったり思ってることだったりいろいろかきます。
備忘録だったり思ってることだったりいろいろかきます。
最近の記事
タグ