LINE | https://breakcontinue.net Sat, 29 Jun 2019 02:03:39 +0000 ja hourly 1 https://wordpress.org/?v=6.8.2 https://breakcontinue.net/wp-content/uploads/2019/08/bc15-75x75.png LINE | https://breakcontinue.net 32 32 webページにOGPを取り付ける https://breakcontinue.net/archives/81 Wed, 19 Jun 2019 07:28:06 +0000 http://breakcontinue.net/?p=81 OGPとは、「Open Graph Protcol」の略で、Webページに設定することでをFacebookやTwitterやLINEなどのSNSでリンクした時に、そのWEBページのタイトルや画像などをかっこよく表示させる […]

The post webページにOGPを取り付ける first appeared on .

]]> OGPとは、「Open Graph Protcol」の略で、Webページに設定することでをFacebookやTwitterやLINEなどのSNSでリンクした時に、そのWEBページのタイトルや画像などをかっこよく表示させる仕組みです。

サンプルコードを以下に示します。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
　　　　・・・
	<meta property="og:site_name" content="BCタロット">
	<meta property="og:title" content="愚者[逆位置]">
	<meta property="og:type" content="article">       
	<meta property="og:url" content="http://xxxxx.net/yyyyy.html">
	<meta property="og:image" content="http://xxxxx.net/yyyyy.jpg">
	<meta property="og:locale" content="ja_JP">
	<meta property="og:description" content="成熟、無計画、不安定、愚か、心配、放浪者の悪い面、意味のない行動、コロコロと変わる気分、軽率な行動、無謀な計画や願望、非現実的な考え、行動が気まぐれ、失敗や偏見、計画が必要、用心深すぎる、本能とつながらない" />
	<meta property="fb:app_id"      content="xxxxxxxxx" />
	<meta name="twitter:card" content="summary" />
</head>

LINEでシェアすると以下のように表示されます。

facebook でシェアすると以下のように表示されます。

Facebookの場合このようになります

Twitter でシェアすると以下のように表示されます。

Twitterの場合このようになります

<meta property="fb:app_id"　content="xxxxxxxxxx" />　はFacebookに連携する場合に必要なIDとなります。 facebook for developpers(https://developers.facebook.com/) のマイアプリから作成できます。

<meta name="twitter:card" content="summary" />　はTwitterでの表示のスタイルの指定になります。4種類あります。

  • 小さい画像（ content="summary" ）
  • 大きい画像 （ content=" summary_large_image” ）
  • アプリ （ content="app”）
  • 動画

Facebookでの表示をシュミレーターで確認する方法は、『OGPのFacebookでの表示を確認する方法』にあります。

The post webページにOGPを取り付ける first appeared on .

]]>