Facebookのいいね！ボタンを設置しても、OGPの設定がされていなければ意味が無い
Facebookのいいね！ボタンがとても流行していますが、いいね！ボタンの真の力を発揮させるためには、Open Graph Protocol（OGP）の設定が不可欠なのはご存じでしょうか？ 今回はOGPとは何なのか、どのように設定すれば良いのかを調べてみました。 OGPとは？ OGPとは一言で言うと、そのWebサイトのタイトルやWebサイトの説明、制作者の情報やWebサイトの種別などを、ソーシャルメディア側から正しく認識できるように決まった形で記述しておく仕組みを作ろう、というものです。 OGPについての説明は下記サイトが非常にわかりやすく詳細に載っていますので、OGPを知らない方は是非目を通して下さい。 フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記 Facebookのいいね！ボタンはOGPが必須 タイトルにも記
Facebookなどでサイトが共有された時、リッチ表示するOGPの設定
Facebookでシェアされたり、いいねを押すとニュースフィードにWebサイトやブログ記事が表示されます。サイトによっては画像が大きく表示されたり、概要がいい感じで思わずクリックして読んでみたくなるときってないでしょうか？ これは、ブログなどのサイトにOGP（Open Graph protocol）と呼ばれるMetadataが設定されていて、Facebookがそれを認識し表示してくれているからです。 当サイトでのOGPの実装は、WordPressのプラグインの「Open Graph Pro」を使用していましたが、プラグインが更新されていなく、古くなっていたので自分で実装しなおしました。その際にOGPについて調べたことをまとめます。 OGPとは何か？ OGP（Open Graph protocol）は、冒頭で少し述べたようにFacebookやmixiなどのSNSでシェアされたときに、そのペー
EC-CUBEでもOGPタグといいねボタンの設置を設置する
OGPについては「フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記」でまとめられています。 EC-CUBEのバージョンは2.11系で設定しました。 変更箇所 /PATH/TO/data/Smarty/templates/テンプレート名/site_frame.tpl まず、htmlタグに属性を追加します。 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> つぎに、商品ページのhead内にOGP用のmetaタグが出力されるように下記を追加。 <!--{assign var=detail va
Twitter カード 7タイプの使い方をカード種別ごとに解説するよ
Twitter カード 7タイプの仕様を Twitter の公式ドキュメントから翻訳して解説します。公式ドキュメントから抜粋して日本語で書き直していますので完全な翻訳ではありません。 Twitter Cards （Twitter カード）、この Blog でもかなり前から指定して使っていますが、7種類のカードから選択できたり、それぞれに指定できる値が異なってたりしてわかりにくいっていう声を聞きましたので （公式な日本語ドキュメントも今のところないし）、簡単に各カード種類別の仕様をまとめてみました。 Twitter Cards は、Facebook や Google+ などが採用している、OGP （Open Graph Protocol） を利用して、ウォールやタイムラインにリンクを投稿する際の表示内容を指定するのと同じ。それの Twitter 版です。タイムラインに URL が投稿されたと
html999 » はじめてのOGP設置方法とどこまで設定するかを考える
いまさら感ありますが、はじめてOGPを設定する機会があったのでまとめます。 （薄い知識でお届けします） そろそろ企業サイト（かため）のようなWebサイトでも、Faviconとセットくらいの感覚で設定するようおすすめした方がよさそうです。 （注意：OGPの仕様がころころかわるので、すぐに間違いになる可能性があります！だいたい2013年の4月頃に調べた内容を元にしています。気づいたところがあれば更新していく予定） ※og:imageの推奨サイズが変更になっていたので修正しました（2014/12/07追記） OGPとは SNS向けの記述で、<head>～</head>内に記述するmeta情報。 facebookなど（他にもmixi、Google＋などが対応しているらしい）で、そのページがシェア（facebookの「いいね！」とか）されたときにSNS上で表示される情報を指定するためのもの。 どんな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://it-pocket.com/wp-content/uploads/2022/11/otodoke-logo02.png
