TwitterカードやOGPなど、head内のmetaに記述するコードを簡単に生成できるオンラインサービス -Hey Metahead内のmetaに記述するTwitterカードやFacebookのOGPのコード、Googleなどの検索エンジン用のコードを確認・生成できるオンラインサービスを紹介します。
FacebookのOGP画像の仕様変更 キーワードは「1200px × 630px」と「PNG」 - OPTPiX Labs Blog
こんにちは、ウェブ担当の嶋です。2015年もどうぞよろしくお願いいたします。 さて、以前「OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法」というエントリーでFacebookでシェアした時に表示される画像の件を取り上げました。その後Facebookの仕様が変更され、画像の取り扱いが変わりましたので改めて整理してみたいと思います。キーワードは「1200px × 630px」、そして「PNG」です。 以前ご紹介した内容のおさらい 以前のエントリーでご紹介した物を簡単におさらいすると、下記のようになります。 推奨は「1200px × 630px」（縦横比 1.91:1） 最低でも「600px × 315px」 特定の条件で画像の中心部分が正方形にトリミングされる 特に最後の「正方形にトリミング」はPC用ページのタイムラインのみ適用されるという曲者で、対策として下記のよ
記事ごとにOGPを簡単設定 for WordPress | Webエンジニアブログ
プラグインを使わずに設定 OGPメタタグを追加する専用のプラグインを利用せずに、HTMLのhead領域にメタタグを出力するコードをfunctions.phpに追加する方法でOGPに対応します。 やり方 functions.phpの場所 WordPressで設定中のテーマ内にfunctions.phpが配置されています。公式テーマtwentythirteenの場合は、 wp-content/themes/twentythirteen/functions.php に配置されています。 コピペするコード functions.phpの最後に下のPHPコードをコピーして追加します。 function add_ogp() { // 変数の設定 $site_name = get_bloginfo('name'); $permalink = esc_url((empty($_SERVER["HTTPS"]
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タグを設置すると、記事がシェアされた時に、キャッチ画像と概要文付きで表示され、人の目を
OGP画像シミュレータ | og:image Simulator
OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月
【最新】facebook いいねボタン設置時のOGP対応方法♪
webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile（ウェブモバイル）は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ
リニュメモ【コーディング（OGP設定）編】 | 10press
今回のリニューアルでは今流行り（？）の OGP を設定してみました。 OGP とは？ Open Graph Protocol の略で、「このウェブページには何が書いてあるか」ということをプログラムから読める形で HTML に付加する記述方法のことです。 で、これがなんで今注目されているのかというと、「いいね」ボタンや「チェック」ボタンで mixi や Facebook などの SNS に web ページの情報を流す時にそれらの SNS ページ内でどのようにその情報を表現すべきかを指定できるからです。もし「いいね」ボタンや「チェック」ボタン、Google「＋１」ボタンを設置しているなら設定しない手はないということです。…多分。正直 Facebook はほぼ放置、mixi は旧友や遠方の身内とのコミュニケーションにしか使っていないのでこのサイトとの紐付で同効果があるのかちょっと未知数だったりし
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
