他ブログ最新記事

FC2ブログでOGP設定が可能に!FC2ブログ利用者は有効にしておけ!

2015年10月03日 21:38

customize.jpg
設定可能なってたの気づかなかったw

OGPとはなんぞや?


FC2ブログのインフォメーションを眺めていたら9月4日の記事で

【ブログ】OGP設定を追加しました

というものがあった

おそらくほとんどの人が「?」となるだろう
だが、私はこの設定を待ちに待っていたのだ
だからこそ1ヶ月も前に設定可能になっていたことに驚愕したw

さて、OGPの設定が可能になったらどうなるのか?
そもそもOGPとはなんぞ??

OGPはOpen Graph Protocolの略称である
これを設定しておくとFacebookやTwitterなどのSNSと連携する際に、
記事情報(画像や説明文)を表示してくれる

まぁ簡単に言うとだ
OGPを設定しておけばTwitterのTLでブログのツイートがこのように表示されるようになる

2015100302.jpg

OGP設定を有効にする方法


OGP設定を有効にするには
「管理画面」>「環境設定」>「ブログの設定」>「メタタグの設定」
にあるOGP設定を「有効」にするだけ

OGP設定を有効にした場合デメリットはあるのか?
おそらく、無いと思う
FC2ブログ利用者はとりあえず有効にしておけばいいんじゃね?

OGPを有効にするとmetaタグが追加される
ブログの見た目が変わるということはないので安心して欲しい

Twitterカードの設定方法は・・・忘れたw


上記画像にあるTwitterでの表示は「Twitterカード」と呼ばれている
実は当ブログではOGPの設定が可能となる前から自力でOGP設定をしていた
しかしFC2ブログのクソ仕様のせいで非常に困っていたのだ
だからこそ公式のOGP設定を待っていた

公式のOGP設定前の当ブログのTwitterカードはこのようになっていた
2015100301.jpg

Twitterカードを表示させるにはmetaタグの設定が必須
なので自力で以下のmetaタグを埋め込んだ

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@moche_">
<meta name="twitter:creator" content="@moche_">
<!--permanent_area-->
<meta name="twitter:image" content="<%image>" />
<meta name="twitter:title" content="<%sub_title>" />
<meta name="twitter:url" content="<%url>blog-entry-<%pno>.html" />
<meta name="twitter:description" content="<!--topentry--><%topentry_discription><!--/topentry-->" />
<!--/permanent_area-->


FC2ブログの何がクソ仕様かというと、記事の最初に表示される画像の変数がない
なのでTwitterカードにアイキャッチ画像を表示させることが出来ず、
やむを得ずプロフィール画像を表示させていた

それが公式のOGP設定を有効にするとアイキャッチ画像を表示させることが可能となり
2015100302.jpg
このようなTwitterカードを表示させられるようになったのだ

ちなみにOGP設定をした後にTwitterカードを表示させるには

<meta name="twitter:card" content="○○">
<meta name="twitter:site" content="@○○">
<meta name="twitter:creator" content="@○○">


このmetaタグのみ自力で埋め込めばよい
その後にいろいろ設定すればTwitterカードが表示されるようになる

本当は「いろいろ」の部分を説明したかったのだが
幾分設定したのが随分と前のことなので忘れてしまったのだw
Twitterカードを表示したかったら後は自力で調べてくれw
関連記事
スポンサーサイト


1クリックしようとすると璃緒ちゃんが微笑みます


コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://mocheblog.blog22.fc2.com/tb.php/1331-8d6feec7
    この記事へのトラックバック