タグ

OGPに関するmut00tumのブックマーク (6)

  • OGPにつけるprefix属性とは何か調べてみた。 - Qiita

    OGPの設定をする時に何となくつけていた prefix属性について一体何なのか調べてみました。(これ↓) 尚、html5版のOGPに関する内容です。 <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

    OGPにつけるprefix属性とは何か調べてみた。 - Qiita
    mut00tum
    mut00tum 2018/03/29
  • PHPを使わずにmetaタグやogタグを取得する方法 | スターフィールド株式会社

    あらゆるサイトのHTMLをパースしてデータ(画像やmeta、ogなど)を取得したかったのだが 1つのサービスから特定のサイトを何回もこのような形でアクセスすると、ブロックされてしまう可能性が高いので クライアント側からアクセスすることができないかと思い、サンプルを作ってみた。 デモ 基的にjsでクロスドメインの処理はできないので、今回は jquery.xdomainajax.js をつかって制限を回避した。 ダウンロードはこちら https://github.com/padolsey-archive/jquery.fn/tree/master/cross-domain-ajax JSの読み込み <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <script type="text/javascri

  • 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画像の仕様変更 キーワードは「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
  • フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記

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

    フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
  • Facebookでのウケ方が段違い!もはや必須なOGPを設定する方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。sekoです。 昨今、ウェブサイトを多くの人に見てもらう為に、SNSを利用して広めていく事はもはや常識となっています。 その際、とても重要となるのがウェブサイトにOGPの設定することです。 今回はOGPについて紹介していきます。 OGPとは OGPの正式名称は”Open Graph Protocol”と言います。 facebookやmixi、google+などのSNSとウェブページを連携させる為に設定する記事情報で、各種ウォール、ニュースフィードに「こういうサイトです」と明言するために必要な仕様です。 例えばfacebookにおいて、OGPを設定していないサイトで「いいね!」を押すと「〇〇さんがリンクについていいね!と言ってます」と自分のウォールには投稿されますがニュースフィードには反映されないため他の人の目に記事がさらされる事はなかなかありません。 しかしOGP設定をしたサイ

    Facebookでのウケ方が段違い!もはや必須なOGPを設定する方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 1