タグ

OGPに関するso-do12のブックマーク (8)

  • TwitterカードやOGPなど、head内のmetaに記述するコードを簡単に生成できるオンラインサービス -Hey Meta

    head内のmetaに記述するTwitterカードやFacebookのOGPのコード、Googleなどの検索エンジン用のコードを確認・生成できるオンラインサービスを紹介します。

    TwitterカードやOGPなど、head内のmetaに記述するコードを簡単に生成できるオンラインサービス -Hey Meta
  • FacebookのOGP画像の仕様変更 キーワードは「1200px × 630px」と「PNG」 - OPTPiX Labs Blog

    こんにちは、ウェブ担当の嶋です。2015年もどうぞよろしくお願いいたします。 さて、以前「OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法」というエントリーでFacebookでシェアした時に表示される画像の件を取り上げました。その後Facebookの仕様が変更され、画像の取り扱いが変わりましたので改めて整理してみたいと思います。キーワードは「1200px × 630px」、そして「PNG」です。 以前ご紹介した内容のおさらい 以前のエントリーでご紹介した物を簡単におさらいすると、下記のようになります。 推奨は「1200px × 630px」(縦横比 1.91:1) 最低でも「600px × 315px」 特定の条件で画像の中心部分が正方形にトリミングされる 特に最後の「正方形にトリミング」はPC用ページのタイムラインのみ適用されるという曲者で、対策として下記のよ

    FacebookのOGP画像の仕様変更 キーワードは「1200px × 630px」と「PNG」 - OPTPiX Labs Blog
    so-do12
    so-do12 2016/03/08
  • 記事ごとに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"]

    記事ごとにOGPを簡単設定 for WordPress | Webエンジニアブログ
  • WordPressでFacebookとTwitterのOGPタグを設置する方法2016 

    ブログへのFacebook&TwitterOGPタグ設置は、いまや必須となっています。ところが調べてみると、なぜか、OGP専用プラグイン設置でサクッと完了とはいかないようです。 利用しているテーマがOGPタグ設置に対応していなければ、自力でテーマを編集してしまうのが、一番確実です。 作業内容は、この通りです。 OGPタグを設置する理由を理解する header.phpを編集する Facebookのapp_idを取得する functions.phpにコードを追記する twittercardを申請する Facebook Debugerで確認する では、順番に説明します。 0.なぜ、OGPタグを設置する必要があるのか? ズバリ、FacebookとTwitterからブログへのアクセス流入が増えるからです。 OGPタグを設置すると、記事がシェアされた時に、キャッチ画像と概要文付きで表示され、人の目を

    WordPressでFacebookとTwitterのOGPタグを設置する方法2016 
  • 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月

    OGP画像シミュレータ | og:image Simulator
  • 【最新】facebook いいねボタン設置時のOGP対応方法♪

    webmobileは、みんなが知りたいPixel/iPhone/amazon/SIMの使い方を発信しています! 当メディアで公開されている文章、写真・画像などに関する権利は、当方に帰属します。 著作者の許諾を得ることなく転載、改変、複製、販売、出版など、著作権法そのほか法律に触れる行為は禁止しています。 ※ 画像使用・文章引用はリンクを張った上でご利用ください。 ホーム|サイトマップ|プライバシーポリシー お問合せ|運営者情報|公式YouTube

    【最新】facebook いいねボタン設置時のOGP対応方法♪
    so-do12
    so-do12 2013/04/03
  • てがろぐスキンデモサイトリニュ&新スキン配布開始 | 10press

    ホーム ブログ サイト制作 てがろぐスキンデモサイトリニュ&新スキン配布開始 「CMSkin for てがろぐ」デモとして稼働していたサイトをリニューアルして自作スキン全般を見られるようにしてみました。向こうでは先走って7月の間にリニューアルのお知らせをしていたんですがいろいろ修正したりしていて一段落ついたかなということでこちらでもお知らせです。新しくなったデモサイトてんぷろぐをよろしくお願いいたします。 CMSkinとしてはCSSやJSのコードをブラッシュアップ(当社比)したり新しい独自装飾デザインや機能を盛り込んだつもりです。今後はこれらをもとに新スキンを作っていく予定です。また、それぞれをパーツ・小技として解説記事も作っていくつもりです。 というわけでてがろぐスキン「ポストイット」の配布を開始しました。動作確認は入念にしたつもりですがいかんせん一人作業なので見落としあるかもしれません

    てがろぐスキンデモサイトリニュ&新スキン配布開始 | 10press
  • フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記

    みなさん、こんにちは お元気ですか?僕は元気です。 さて 最近よく、「いいね!」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP (Open Graph Protocol)と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー??とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す

    フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
  • 1