WordPressでFacebookとTwitterのOGPタグを設置する方法2016
ブログへのFacebook&TwitterのOGPタグ設置は、いまや必須となっています。ところが調べてみると、なぜか、OGP専用プラグイン設置でサクッと完了とはいかないようです。 利用しているテーマがOGPタグ設置に対応していなければ、自力でテーマを編集してしまうのが、一番確実です。 作業内容は、この通りです。 OGPタグを設置する理由を理解する header.phpを編集する Facebookのapp_idを取得する functions.phpにコードを追記する twittercardを申請する Facebook Debugerで確認する では、順番に説明します。 0.なぜ、OGPタグを設置する必要があるのか？ ズバリ、FacebookとTwitterからブログへのアクセス流入が増えるからです。 OGPタグを設置すると、記事がシェアされた時に、キャッチ画像と概要文付きで表示され、人の目を
FacebookのOGP画像に「顔」が入っている場合のトリミング位置についてまとめ
FacebookのOGP画像のサイズと、ニュースフィードでの表示サイズについては、過去にも数回に渡ってまとめていますが、今回は画像の中に人間の顔が入っている場合の動きについて検証してみます。 どうやら、画像内に人間の顔が入っている場合、トリミングの仕様が通常とは異なり、顔の位置を自動検出してそこを起点にトリミングを行うようです。 なんと言う余計なお世話ハイテクシステム！ ※過去のFacebook OGP画像関連のまとめ FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版 ※9.21追記） FacebookのOGP画像、最新サイズでの作成例をご紹介 本題に入る前に、簡単におさらいです。 FacebookのOGP画像のニュースフィード上のサイズは、w1.91：h1 w468px以上でないと大きく表示されない（※Face
最近お世話になったWeb制作に関するお役立ちツール＆プラグイン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの白浜です。春ですね。4月生まれなので春はなんだか気合が入ります。 さて、挨拶とは関係ありませんが、最近Web制作をする上で役に立ったツールやプラグインをご紹介したいと思います。 画像作成編 無料で半透過マルチアイコンやファビコン（favicon.ico）作成 http://ao-system.net/alphaicon/ アルファチャンネルを持った綺麗なマルチアイコンが一発で作れます。仕上がりが綺麗だったのでお気に入りです。favicon画像作成のお供に。 OGP画像シミュレータ | og:image Simulator http://ogimage.tsmallfield.com/ 画像をアップロードするだけでFacebookのタイムライン上にどのようにトリミングされて配置されるかを一発でシミュレートしてくれます。 「あっこのままだとロゴが欠ける…」とかぱっと見で
これで一撃！簡単にOGP画像をつくれる2つの秘密道具！
こんにちは！デザイナーのわりえもんです！ ドラえもんみたいな見た目の、のび太みたいななにかです。 デザイン制作に役立つ秘密道具を紹介します！ さて今回はサイト・アプリ制作に必需品な Facebook OGP画像つくりに役立つ2つの秘密道具をお教えします！ 2014年1月現在、OGP画像の表示には大きくわけて2種類あります。 一つの画像で、どっちの表示でもきれいにつくるのは結構悩みますよね。 のび太くんには到底つくれなさそうです。 でも、たった2つのの秘密道具で、OGPつくりは劇的に楽になります！ 秘密道具その1 : ただ画像をいれるだけ！秘密のpsd！ 今回のために用意した秘密のpsd を用意しました！ こちらからダウンロードしてみてください！ PSD DOWNLOAD 「見せたい要素が横長」の場合 これは横長いロゴです。ロゴの部分がどんな表示でも切れないようにしたいですね。 これを全ての
FacebookのOGP画像がどのように表示されるかブラウザ上でシミュレートできる「og:image Simulator」｜BLACKFLAG
Facebook上にWebページをシェアした際に表示されるOGP画像。 最近では様々な表示パターンがあり 実際にどう表示されるか、画像を作成する際に悩みどころだったりします。 そんな際にFacebook上でOGP画像がどう表示されるか ブラウザ上でシミュレートできるサービス「og:image Simulator」が この先便利に使えそうだったので自分用メモとして紹介してみます。 OGP画像シミュレータ | og:image Simulator OGP画像シミュレータ | og:image Simulator ページ上部の画像ドラッグエリアに 作成したOGP画像をドラッグ＆ドロップするだけで 複数パターンのFacebookのOGPサンプル枠に作成した画像がはめ込まれ、 Facebook上でどの様に表示されるかが一目で分かるようになります。 推奨画像サイズも明記されていてとても親切。 当ブログ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
