タグ

関連タグで絞り込む (7)

タグの絞り込みを解除

OGPとFacebookに関するvent0819のブックマーク (5)

  • OGPにおける記述方法の勘違いと修正方法（2015年春時点での最新情報？）

    OGPとは OGPとは「Open Graph Protocol」の略でSNSで使われる共通仕様を指します。 ただ、そうは行っても共通で使える部分と、各SNS専用の項目が必要な場合があります。 ここでは主要SNSについて紹介していきます。 あと、HTML5を基本ベースとして書いていますのでその点はご了承ください。 基本的なOGPの設定項目一覧 OGPの記述はの中で行います。 head要素の変更 まずはhead部分にprefixを追加します。 <head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#"> OGP設定のおまじないみたいなものです。この設定を行う事によってOGPを認識するようです。 注意点ですがog: http://ogp.me/ns#の部分でog:の後は必ず半角スペースを入れて下さい。これはOGP

    OGPにおける記述方法の勘違いと修正方法（2015年春時点での最新情報？）

  • これで一撃！簡単にOGP画像をつくれる2つの秘密道具！

    こんにちは！デザイナーのわりえもんです！ ドラえもんみたいな見た目の、のび太みたいななにかです。 デザイン制作に役立つ秘密道具を紹介します！ さて今回はサイト・アプリ制作に必需品な Facebook OGP画像つくりに役立つ2つの秘密道具をお教えします！ 2014年1月現在、OGP画像の表示には大きくわけて2種類あります。 一つの画像で、どっちの表示でもきれいにつくるのは結構悩みますよね。 のび太くんには到底つくれなさそうです。 でも、たった2つのの秘密道具で、OGPつくりは劇的に楽になります！ 秘密道具その1 : ただ画像をいれるだけ！秘密のpsd！ 今回のために用意した秘密のpsd を用意しました！ こちらからダウンロードしてみてください！ PSD DOWNLOAD 「見せたい要素が横長」の場合 これは横長いロゴです。ロゴの部分がどんな表示でも切れないようにしたいですね。 これを全ての

    これで一撃！簡単にOGP画像をつくれる2つの秘密道具！

  • OGP制作に便利！facebook-ogpsd.psdとOGP画像シミュレータ - 別冊webメモ

    KAYACメンバーがつくった これで一撃！簡単にOGP画像をつくれる2つの秘密道具！ が、便利だったのでメモ。 ↑リンク先で、正方形だったり長方形だったり調節が面倒な OGPの制作に便利なfacebook-ogpsd.psdがダウンロードできます。 そしてOGPシミュレータ。 画像をアップするだけでパターンを見せてくれるのでわかりやすいです。 OGP画像シミュレータ | og:image Simulator いいね！

    OGP制作に便利！facebook-ogpsd.psdとOGP画像シミュレータ - 別冊webメモ

  • Facebookなどでサイトが共有された時、リッチ表示するOGPの設定

    Facebookでシェアされたり、いいねを押すとニュースフィードにWebサイトやブログ記事が表示されます。サイトによっては画像が大きく表示されたり、概要がいい感じで思わずクリックして読んでみたくなるときってないでしょうか？ これは、ブログなどのサイトにOGP（Open Graph protocol）と呼ばれるMetadataが設定されていて、Facebookがそれを認識し表示してくれているからです。 当サイトでのOGPの実装は、WordPressのプラグインの「Open Graph Pro」を使用していましたが、プラグインが更新されていなく、古くなっていたので自分で実装しなおしました。その際にOGPについて調べたことをまとめます。 OGPとは何か？ OGP（Open Graph protocol）は、冒頭で少し述べたようにFacebookやmixiなどのSNSでシェアされたときに、そのペー

    Facebookなどでサイトが共有された時、リッチ表示するOGPの設定

  • ★★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 [フェレット]
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.