A framework for building Open Graph images
EngineeringProductA framework for building Open Graph imagesWe recently set about creating a framework and service for automatically generating social sharing images for repositories and other resources on GitHub. You know that feeling when you make your latest hack project public, and you’re ready to share it with the world? And when you go to Twitter to post a link to your repository, you just s
OGP画像を簡単に作れるvercelのRuntimeを作りました！
どうも、 @uzimaru0000 です。 タイトルにもあるように OGP 画像を簡単に作れる vercel の Runtime を作りました。 作ったもの 使い方としては vercel.json に以下のように記述します。 { "version": 2, "functions": { "api/**/*.(html|tsx)": { "runtime": "@uzimaru0000/vercel-og-image@1.4.0", "memory": 1024 } } } functions の api/**/*.(html|tsx) に対応するファイルがこの Runtime で処理されます。 html と tsx に対応しています。 tsx は、React の Component を default で export することでその Component を元にした OGP 画像が生成され
ホルモン記事を書いたら、OGPがぷりっぷりと褒められ（？）ました - ayanologはてな館
なんと！ はてなの中の人にお呼ばれして、こんな記事を書かせていただいたのです。えっへっへ。その記事が公開されたので、満を持して宣伝お知らせします！ → 【ぐるなび×はてなブログ企画】第4週 東京の東側でぴっかぴかのホルモンを焼く - みんなのごはん グルメ系サイトの老舗にして大手「ぐるなび」と、はてなブログがタッグを組み、はてなブロガーの中から4人が交代でグルメ記事を連載する、という企画。4週連続の企画でトリを勤めさせていただきました。どれもすごく面白いです。 【ぐるなび×はてなブログ企画】 第1週 1人だけど1人ではない地元でのひとり飲み （ id:rocketboy_miya さん） 第2週 立ち飲みでカウンターの向こう側にある景色を探す （ id:pinkpeco さん） 第3週 気軽に古き良き東京を感じられる甘味処3軒 ( id:thyself2005 さん) 第4週 東京の東側
FacebookのOGP画像に「顔」が入っている場合のトリミング位置についてまとめ
FacebookのOGP画像のサイズと、ニュースフィードでの表示サイズについては、過去にも数回に渡ってまとめていますが、今回は画像の中に人間の顔が入っている場合の動きについて検証してみます。 どうやら、画像内に人間の顔が入っている場合、トリミングの仕様が通常とは異なり、顔の位置を自動検出してそこを起点にトリミングを行うようです。 なんと言う余計なお世話ハイテクシステム！ ※過去のFacebook OGP画像関連のまとめ FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版 ※9.21追記） FacebookのOGP画像、最新サイズでの作成例をご紹介 本題に入る前に、簡単におさらいです。 FacebookのOGP画像のニュースフィード上のサイズは、w1.91：h1 w468px以上でないと大きく表示されない（※Face
OGPやメタ要素をサイト全体一括チェックできるツール | ブログ | SINAP - 株式会社シナップ
開発者向けにOGP設定等をまとめてチェックするブックマークレットを作成しました。先輩の柿内が以前にも「OGPタグ確認に便利！ブックマークレットで手早くチェック」という記事でブックマークレットを公開していますがあれのパクr・・・もとい、リスペクトした拡張版みたいな物です。 ソースは一から全て書きましたので、後継版とかバージョンアップではなく、全く別ものとなっております。 なぜこれを作ったかというと、以前の物も機能は十分だったのですが「ページ数が多くなると確認が面倒くさい」といういかにもダメなエンジニア思考(ディレクターさんにも同意を得ましたが)に依ります。一回で全部チェックできたらよくね？っていう事で作りました。 このOGPチェック/サイトマップローダーは動作したウェブページのsitemap.xmlを取得し解析、記載される全てのURLを読み込んでOGPタグ等の設定をチェックします。特性上大量
Google+ は OGP より Microdata を優先するみたい
Google+ にリンクを投稿する際、ページに指定された OGP よりも Microdata の方が優先されることで起こった問題と、その解決方法について解説します。 この Blog では、Google+ ページも運用していて、記事を更新した際にそっちにも投稿しています。 ところが、ちょっと前からリンクを投稿したときに、OGP （Open Graph Protocol） に指定した概要文 （og:description の値に入れてるテキスト） とかが無視されて、Blog 自体の概要が出ちゃって、なんでかなぁって思いながらも今度調べよってことで放置していたわけですが、さっきちょっと時間を見つけてテストしてみたら、どうも Microdata の指定の仕方でこういう現象が起こるらしいことがわかったので、共有します。 具体的にどういう現象が起こるか OGP に指定した概要文が無視される件ですが、例
Chrome の拡張機能でogpとかを確認するのを作ってみた - めも帖
Chrome の拡張機能でogpとかを確認するのを作ってみました。 確認できる項目は、 ogp:title ogp:url ogp:description ogp:image canonical title description keywords ogpの状態を確認するのが、HTMLを見たり、facebookのツールで確認したり（これが一番確実なんですが）するのが面倒になりました。そこで、Bookmarklet（ブックマークレット）でやってみようとしていたんですが、Chrome の拡張機能の方が、見やすいかも？なんて思って作ってみました。 「WEB+DB PRESS Vol.72」に「Backlog/Cacoo開発ノウハウ大公開」という特集があり、何かあると「Chrome の拡張機能で...」という解決方法を見ると、これはこれでアリなのかなあ...と思っていました。問題解決の為にちょっと
FacebookのOGPを簡単に確認するための5つの便利ツール | Creazy!
ご無沙汰しております、ヤガーです。 今までのFacebook関連のネタや、OGPに関する記事を書いてきましたが、さすがに企業サイトやブログなどではOGPの設定が浸透してきていると思います。OGPがあるとないとではウォールに流れた際の反応が全然違いますからね。で、このOGPなんですがFacebookはパフォーマンスのためか一度読んだものはキャッシュしてしまいます。metaタグの構成を変えたり、そもそも記事内容を変更したとしても、1度でもいいね！押されているとその状態のOGP設定が残ってしまいます。 そこで、OGPの設定を確認するためのFacebook公式ツール「デバッガー」を使うのですが、このデバッガーを使うとキャッシュもクリアできるので、表示が切り替わらないって場合にも有効です。 このデバッガー関連の便利ツールを５つ紹介します。 １）Facebook公式デバッガー デバッガー – Face
Six Apart ブログ編集会議 vol.1 〜 OGPが難しい！編-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
こんにちは。マーケティング担当の伊藤大地です。 今回は、オープン＆シェアということで、先日行われたSix Apart ブログの編集会議の模様をお伝えしたいと思います。このプロジェクトは、企画段階からワイワイガヤガヤ、みんなで冗談を交えて談笑しながら準備してきました。そんな現場の空気感が少しでも伝わるといいなと思います。では、どうぞ。 まずはアクセス状況 無事、27日にSix Apart ブログがオープンしました。今日、大越さんのFacebookについての大作が公開されまして、まずはアクセス状況を見てみたいと思います。 だいたい、（オープンして1日半で）2,000を超えるくらいですね。流入経路はFacebookとTwitterが圧倒的です。当たり前ですけど、最初の記事が「はじめます」という内容だけなので、検索からの流入はないですね。 お昼休み前の時間帯に公開して、一時間くらいで一気にアクセス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - vercel/og-image: Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc