★★Facebook・TwitterのOGP設定方法まとめ｜ferret [フェレット]
運営しているホームページやWebサイトで、OGP設定は行っていますか？ OGPとは「Open Graph protocol」の略称。FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。SNSでの拡散を通じて多くの人に記事をみてもらうためには必須の設定といえます。 そこで今回は、最新のFacebookの仕様に準ずるOGPの設定や確認方法、注意点などを紹介します。 OGPとは OGPとはOpen Graph Protcolの略称で、FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。 上の赤枠のように表示を目立たせることが可能で、URLだけの場
![★★Facebook・TwitterのOGP設定方法まとめ｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ded3c626dd8aed6f4410bbdd0395c88db2470395/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F610%2Fog_image%2Fdefault-bdf2027367621662f48bdc85408bf81b.jpg)
React Helmetを使ってOGP対応した
Reaact Helmetを使ってこのブログのOGP対応した。 nfl/react-helmet: A document head manager for React OGP対応するとtwitterとかfacebookとかslackとかでいい感じに展開してくれて、イケてる感じになる。 まあwebで記事を書くなら必須だろう。 このブログはReactを使って書かれているのでOGP対応がちょいめんどい。 しかし、React Helmetを使って簡単に可能できた。 gatsby.jsだとwrappers/md.jsに以下を追記した。 <Helmet title={title} meta={[ { name: 'description', content: description }, { property: 'og:title', content: post.title }, { property
WordPressをFacebookのOGPに対応させるなら「WP-OGP」より「Open Graph Pro」がオススメ
Facebookをはじめ、さまざまなSNSサイトで使われるようになったOGP。 OGP（Open Graph Protocol）とは、簡単言うとそのページになにが書いてあるかという情報をプログラムから読める形でHTMLに追加する方法のことです。 このブログでもそのうちやろうと思いつつ先延ばしにしてきたのですが、いいね！ボタンのコードが新しくなっていたので、チェックも兼ねて自分で押してみたところ、サムネイルがなんだかへんなのを引っ張ってきて酷いことになっていました。 なぜかTumblrのボタンがサムネイルになっています。 これはちょっと直しておかねばと人気のWordPressプラグイン「WP-OGP」を入れてみましたが、いろいろと不具合があるらしく「appid」を「app_id」に直したり、サムネイルを記事内の最初の画像にするためにコードを差し替えたりとしなくてはいけないようでして。。。 そ
＜遂に公開＞SEOの2倍のアクセスを稼ぐFacebook「OGP」と「いいね！」ボタンの活用術。 « 株式会社ガイアックス｜SNSマーケティング支援サービス
a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
