| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
文字サイズ変更：
トップページ ＞ 他言語について
●他言語について●
2022-11-11 17:59:12HTML：OGP
OGPとは、Open Graph Protocolの頭文字をとったものです。
皆さんは、TwitterやLINEなどでWeb Siteのシェアをしたときに、その記事のURLとタイトル、簡単な説明や画像がまとめて表示されているのを見たことがあると思います。
OGPは、その記事（ブログなど）でひとまとめにされた情報を扱う為に使います。
そのため、以下にOGPについての記事を貼り付けます。
OGPは、HTMLファイルの中のheadタグ内に設置します。
metaタグでそれぞれのURLやタイトルなどの情報を記述していきます。
合わせてそれぞれのSNSのIDやアカウントを記述することで、SNSと連携させましょう。
* TwitterのOGP表示 *
Summary Card（サマリーカード）
「Summary Card」とは、以下のようにタイトルと短いディスクリプション、正方形のサムネイル画像を表示する形式です。
※Summary Cardの紹介のためにITmedia NEWSの公式アカウントの投稿を引用しました。
Summary Card（サマリーカード大）
「Summary Card with Large Image」とは、以下のように「Summary Card」と同様のタイトルと短いディスクリプションに加え、サムネイル画像を長方形に大きく表示する形式です。
* OGPの種類 *
OGPには、主に以下の5つの情報を設定する必要があります。例えばog:urlであれば
<meta name="og:url" content="https://www.snow2021.net/index2.cgi?mode=view&category=8&y=2022&m=11&d=11#2022-11-11%2015:15:32">
のように、それぞれmetaタグに入れて設定します。
ここで紹介する項目はTwitterのOGP設定にも共通して入れる情報です。
[og:url WebページのURL]
og:urlには、その名の通り、シェアするWebページのURLの情報を設定します。
[og:title Webページのタイトル]
og:titleには、SNSでシェアした際に表示させるWebページのタイトルを設定します。Googleの検索結果に表示されるタイトルの文字数は一般的に30字までとされていますが、シェアするSNSによってOGPのタイトルの文字数は以下のように異なりますので注意が必要です。
Google検索（PC） 30文字
Google検索（スマホ） 20文字
Twitter（PC） 34文字
Twitter（スマホ） 20文字
Facebook（PC） 50文字
Facebook（スマホ） 約48文字
※ただし、文字数は全角の日本語で換算しており、デバイスによっても異なるため、数値はあくまでも目安です。
[og:image 画像のURL]
og:imageには、Webサイトのサムネイル画像のURLを設定します。今回はこのWebサイトがSNSでシェアされた際に表示されるサムネイル画像設定の際の注意点を紹介していきます。
[og:description Webページのディスクリプション]
og:descriptionには、WebサイトをSNSでシェアされた際に表示する、Webサイトの内容の紹介文を設定します。ディスクリプションはSEO対策にも有効とされているので、1ページずつ適切な紹介文を設定しましょう。
[og:type Webページの種類]
og:typeには、Webサイトの種類を設定します。例えば、コーポレートサイトのトップページなどは「website」とし、記事やブログのページには「article」とするなど、多くの種類が用意されていますので、シェアするものに合わせたタイプを選んでください。 一般的には「website」か「article」しか使用しませんが、他のタイプを使用したい場合には、様々なtypeが一覧で確認できるThe Open Graph protocolをご覧ください。
* OGPの設置方法 *
では、実際にOGPの設定はどのように行うのでしょうか。OGPの設定には、先ほど紹介したOGPの種類のタグに加えて、それぞれのSNS個別の設定を行う必要があります。
[headタグにprefix属性を追加]
OGPに設定するそれぞれの情報をheadタグ内に記述する前に、OGPを使用することを宣言する必要があります。以下のような記述をOGP設定の初めに入力しましょう。
<head prefix="og: http://ogp.me/ns#">
[共通するOGP設定を追加]
次に、先ほど「OGPの種類」で紹介したOGPに設定する情報をmetaタグに入れて追加していきます。
例えば、先ほどTwitterカードで紹介した「秋の写真撮影2022」の記事のTwitterのOGP設定は以下のようになります。
[TwitterのOGP設定]
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta property="og:description" content="秋の公園「秋」、「紅葉」をテーマに写真を撮ってきました。今日は、秋にしては、天気よく、暑い日でしたね。秋の空秋になりて紅葉の樹木紅葉の樹木２秋を透かして晩秋秋を満喫できたでしょうか。それでは。">
<meta property="og:site_name" content="SNOW Web Site">
<meta property="og:title" content="秋の写真撮影2022">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.snow2021.net/p.cgi?m=go&i=2022111102">
<meta property="og:image" content="https://www.snow2021.net/photo/co_20221111_105114.jpg">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://www.snow2021.net/photo/co_20221111_105114.jpg">
<meta name="twitter:creator" content="@michan2021" />
<meta name="twitter:description" content="秋の公園「秋」、「紅葉」をテーマに写真を撮ってきました。今日は、秋にしては、天気よく、暑い日でしたね。秋の空秋になりて紅葉の樹木紅葉の樹木２秋を透かして晩秋秋を満喫できたでしょうか。それでは。">
<meta name="twitter:title" content="秋の写真撮影2022">
[OGP画像のサイズ]
OGP画像のサイズはSNSの種類によって異なるため、どのようなSNSにも対応できる画質のサイズを選択する必要があります。
[TwitterのOGP画像のサイズ]
TwitterのOGP画像のサイズは、Twitterカードの種類のどちらを選ぶかによって変わります。
a. Summary Card
Twitterの「Summary Card」では、1:1の比率の144x144px以上、4096x4096px以下のサイズの画像をOGP画像として設定することができます。
OGP画像の画像フォーマットはJPG・PNG・WEBP・GIFに対応しています。
b. Summary Card with Large Image
Twitterの「Summary Card with Large Image」では、2:1の比率の300x157px以上、4096x4096px以下のサイズの画像をOGP画像として設定することができます。
対応している画像フォーマットは「Summary Card」と同じです。
* OGP画像のシュミレーションをする *
ここまで各SNSのOGP設定方法を紹介してきましたが、OGP設定でよくあるのがOGP画像のサイズや比率のミスです。Webサイトの公開前にメイン画像のサイズが適切かどうかを確認するには、各SNSのOGP画像のシュミレーションサイトが有効です。今回は、TwitterのOGP画像のシュミレーションサイトを紹介します。
[TwitterのOGPシュミレーション]
TwitterのTwitterカードがどのように表示されるかをシュミレーションするには、Twitterが出している「Twitter Card Validator」というWebサイトがおすすめです。WebサイトのURLを「Card URL」に入力すると、右側の「Card Review」にTwitterカードが表示されます。
Twitter Card Validator
[TwitterのOGPの情報をキャッシュさせる]
TwitterのOGP情報をキャッシュさせるには、先ほど紹介した「Twitter Card Validator」でWebサイトのURLを入力して、左側の「Review Card」をクリックすると情報が更新されます。
記事はここまで、です。
Facebookの情報を見たい場合は、出典のリンクをご覧ください。
ちなみに、日本ブログ村などのサイトでもOGPは必須です。
URLなどは、１文字でも実際のページで違うと画像や紹介文は表示されないようです。
OGPを駆使して、どんどんSNSでも紹介できるといいですね。
それでは。
出典「WebMedia OGPとは？OGPの基本からOGP画像のサイズや設定方法を分かりやすく解説」
|
Print
Twitter(test)
short URL
いいね:3 back to the TOP |
 |
 |
 |
