初学者向けプログラミング学習環境 PEN 開発メモWiki

授業資料/2015年度/京都ノートルダム女子大学/情報処理G/OGPの設定

OGP(Open Graph protocol)の設定

HEADタグ内に以下の情報を記述すると検索エンジンやSNSでシェアしたときに
かっこよくページを紹介してくれるようになります。

記述例

<meta property="og:title" content="初学者向けプログラミング学習環境 PEN" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.media.osaka-cu.ac.jp/PEN/" />
<meta property="og:image" content="http://www.media.osaka-cu.ac.jp/PEN/images/og_image.jpg" />
<meta property="og:site_name" content="初学者向けプログラミング学習環境 PEN" />
<meta property="og:description" content="PENは初学者向けのプログラミング学習環境で、プログラム記述の入力支援機能があり、プログラムのトレース機能も備えてた環境になっています。" />
<meta name="description" content="PENは初学者向けのプログラミング学習環境で、プログラム記述の入力支援機能があり、プログラムのトレース機能も備えてた環境になっています。" />
<meta property="fb:app_id" content="966242223397117">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@rn_magi">

表示例

Googleでの検索結果

授業資料/2015年度/京都ノートルダム女子大学/情報処理G/OGPの設定/Google.png

Twitter

授業資料/2015年度/京都ノートルダム女子大学/情報処理G/OGPの設定/Twitterカード.png

Facebook

授業資料/2015年度/京都ノートルダム女子大学/情報処理G/OGPの設定/Facebook.png

記述に必要なメタタグ

<meta property="og:title" content="ここにタイトル" />
<meta property="og:type" content="ページタイプ" />
<meta property="og:url" content="ページURL" />
<meta property="og:image" content="ページをシェアしたときのに表示される画像" />
<meta property="og:description" content="ページをシェアしたときに表示されるサイト概要(200字以内)" />
<meta name="description" content="検索サイトで表示されるサイト概要(200字以内)" />

Facebookでシェアするときに必要な追加メタタグ

<meta property="fb:app_id" content="Facebookでの管理ID">
  1. 上記ページでシェアしたいページのURLを入力
  2. 「When shared, this is what will be included」の項目でエラー
    • Otherwise, the default app id( 999999999999999 ) will be assigned.
  3. 上記の強調した数字の羅列が仮の管理IDになります

Twitterでシェアするときに必要な追加メタタグ

<meta name="twitter:card" content="カードの種類">
<meta name="twitter:site" content="TwitterID">

Menu

Wikiについて

最近の更新