レシピページのOGP画像を動的に生成する - クックパッド開発者ブログ
こんにちは、クックパッドでエンジニアをやっている @morishin です。入社してわりと長い間 iOS アプリやそのバックエンドの開発を中心にやってきましたが、最近は専らウェブフロントエンドとその基盤をいい感じにするというのをやっています。先日クックパッドウェブサイトのレシピページの OGP 画像を素敵に刷新したのでそのお話をしたいと思います。 ※ ここで OGP 画像と呼んでいるのは Open Graph Protocol で定義されている og:image プロパティに指定する画像のことです。 ※ OGP 画像と呼んでいますが厳密には今回変更したのは Twitter Card (twitter:image) 用の画像のみなので、その他の SNS に表示される画像 (og:image) は変わっていません。 できたもの これまではレシピ作者さんがアップロードされた料理写真を単にクロップ
2022年版：OGPの正しい設定方法まとめ。確認方法や画像サイズも | Web Design Trends
OGPは、WebサイトのSNSからの流入を増やすためには欠かせない存在ですが、意外とWebサイト公開時に忘れがちになってしまいます。 ただしくOGPが設定されていないと、せっかくSNSでURLがシェアされてもアクセス数が伸びず、大きな機会損失に繋がってしまう可能性があります。 今回は、WebサイトにおけるOGPの正しい設定方法や、適切な画像サイズ、OGPが正しく設定されているかの確認方法をご紹介したいと思います。 OGPとは？ OGPとは、「Open Graph Protcol（オープングラフプロトコル）」の略称で、TwitterやFacebook、LINEやSlackなどでWebサイトをシェアした時に表示されるタイトルや画像を設定するためのものです。 例えば、TwitterでWebサイトをシェアすると上記の画像のようにリンクがカードで表示されますね。 このように、OGPが正しく設定されて
CloudFront+S3なSPAにLambda@EdgeでOGP対応する | DevelopersIO
吉川@広島です。 案件でCloudFront+S3なSPAに対してOGP対応が必要になってきそうなため、Lambda@Edgeを使った対応について検証しました。 現状、FacebookやTwitterのBotは基本的にクライアントサイドJSを解釈できず、SPA単体でのOGP対応は難しいとされています。OGPメタタグはSSRで返してあげる必要があるため、「UserAgentでBot判定し、その時だけOGPメタタグ入りのHTMLをエッジサーバでレンダリングして返す」というのが基本戦略になります。 SPAをホスティングするCloudFront+S3を作成する S3バケットを作成する バケット名だけ入力し、後はデフォルト値で作成します。 そして、本来であればSPA用のHTML/JS/CSSリソースをアップロードするのですが、今回はLambda@Edgeの動作確認ができれば良かったためパスしました（
FacebookのOGPでちょっと気になった事があったんですけど誰か / Maka-Veli .com
Facebook眺めていて、OGPがちゃんと設定されてるのに表示されないモノがあったので少し調べてたんです。先に言っとくと、その件は個人の中ではまだ解決してないんですが、その他のところで気になったのがあったのでメモしときます。 OGPってアレですね、Facebook等でシェアされた時に表示される情報を設定するヤツ。例えば <meta property=”og:title” content=”MAKA-VELI.COM” /> としたら投稿のタイトルが MAKA-VELI.COM になるヤツ。 詳しくはこちら で、気になったのは、これらがきちんと設定されていたページにも関わらず、ogpのimageが表示されていなかったんです。 デバッガー通せばキャッシュされて表示されるかな？と思ったんですが、 なぜかデバッガーではきちんと設定されていた項目になぜか警告とエラーが。 ソース中で
og:image 徹底解説、意味も設定画像スペックもこれでばっちり！ 2024年1月更新-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
この記事のポイントは… 主に個人ブログやブログ形式のオウンドメディアを運営する皆さまを対象に、アイキャッチ画像の概要と設定方法を詳しく紹介する記事です。 アイキャッチ画像（サムネイル画像やOGP画像とも呼ばれます）とは、サイト内やSNSのタイムライン上に記事URLと共に流れる記事の顔となる画像のこと。 アイキャッチ画像を利用するために必要な知識、画像の仕様と非デザイナー向けの作成方法、アイキャッチ画像をHTMLのメタ要素OGP内で指定する方法を記事内で詳しく解説しています。 この記事は、2024年01月12日に更新しました！ ウェブ記事のアイキャッチとなるタイトルを載せた画像、ソーシャルメディア上で、良く見ませんか？まさにこの文章のすぐ上にある「徹底解説」と書かれた画像も、アイキャッチ画像のひとつです。 この記事は、主に個人ブログやブログ形式のオウンドメディアを運営する皆さまを対象に、アイ
Facebookインサイト設定の落とし穴、app_id, admins の違いとは-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
皆さま、お久しぶり！ヒカルよ。今日はFacebookインサイト(公式のアクセス解析ツール)を使うための最初の難関、OGP設定の謎を私が解明するわ！私と一緒に、めくるめくソーシャルマーケティングへの扉を開きましょ。 ......って、え？私のことを知らない？......そうか、そうよね。最近 Facebookの六離庵ページ に閉じこもっていたものね。 改めて、自己紹介するわ。 わたしと六離庵について わたしは、ソーシャルメディア課長のヒカル。 和菓子屋六離庵ソーシャルメディア繁盛記 というサイトをご存知かしら？ このサイトは吉祥寺にある架空の和菓子屋さん「六離庵」のソーシャルメディア活用のストーリーを連載しているサイトなの。中小規模の法人がどんなふうにソーシャルメディアをどう活用していけばいいかの一例として、企画から運用、効果測定までの流れを小説形式でひと通りご紹介しているわ。全八話で公開さ
CakePHP に自動で OGP タグを埋め込んで Facebook に対応させるためのヘルパーを作ったよ
CakePHP に自動で OGP タグを埋め込んで Facebook に対応させるためのヘルパーを作ったよ 2011年12月07日 15:00CakePHP ※ これは CakePHP 1.3 時代の記事です。2.0以降だとこのままでは動かないと思います。 OGP (Open Graph Protocol) という約束事がありますね。 例えばウェブページで Facebook の「いいね！」(Like) ボタンが押されたとき どんな画像や説明文を表示さるかを指定するのに使われるやつ。 このブログの <head /> 内にも埋め込んであります。 本来は誰か(何か)と誰か(何か)の関係の集まりであるソーシャルグラフの中で それは誰(何)なのかを表現するための決め事と理解してますけど、 まあ実質「いいね！」のためにウェブサイトで使われることが多いので。 実際には何も書いておかなくても Facebo
Open Graph protocol
2011年04月20日00:13 by oklahomer Open Graph protocol カテゴリドキュメント http://developers.facebook.com/docs/opengraph/ Open Graph Protocolは、あなたのwebページがソーシャルグラフと連携することを可能にします。今のところ、実世界に存在する物（映画、スポーツチーム、セ レブ、レストランなど）を象徴するwepページ用にデザインされています。Open Graphタグをwebページに含めることで、あなたのページはFacebook Pageと 同等の物になります。つまり、ユーザがページ上のLikeボタンを押すと、ページとユーザの間にconnectionが作られます。ページはユーザプロ フィールの"Likes and Interests"セクションに表示され、更新情報をユーザへ通知するこ
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
