任意のURLにOGPを設定(した感じに)できるサイトを作りました
OGPer | 簡単OGP設定ツール
ユーザが指定したURLにユーザが指定したOGPを簡単に設定(した感じに*)できるサイトを作りました!
OGPとは
OGP（Open Graph Protocol）は、ウェブページのメタデータをソーシャルメディアで共有する際に、リッチなプレビューを表示するための技術です
OGPタグを適切に設定することで、タイトル、説明、画像などの情報を効果的に表示できます
OGPerを作った動機
OGPタグの設定は多くの場合、開発者にとって少し面倒な作業だと思っています。なくても良いですがあったほうがより良い程度のサイトにOGPを頑張って設定するのは非効率的です。
そこで、簡単にOGP付きURLを生成・管理できるツールがあれば便利だと考え、OGPerを開発しました!
(サイト自身のOGPがダサいことをお許しください...)
デモ
☝️のデモで👇のOGP付きURLが生成されました!
OGPerの機能
- シンプルなUIでの指定したURLに指定したOGPを設定できる
- 1MBまでの画像アップロード対応
- 生成したOGP用URLのXでの共有できる
- 自分が生成したOGP用URLを一覧できる
システム構成図
無料で動くように無料枠がリッチなサービスを組み合わせています
Database | Supabase
PostgreSQLが使えるクラウドサービスです
OGPerではOGP情報の管理に使っています
GUIをポチポチするだけでTBLの作成やINDEXの付与、レコードの一覧が出来ます
Applcaition | Render
Goを含むWebアプリケーションをデプロイできるクラウドサービスです
OGPerではOGP情報の保存や取得を行うGo製APIサーバを動かしています
Hosting | Cloudflare Pages
静的サイトのホスティングサービスです
OGPerではReact製のフロントエンドのホスティングに使っています
コードのあるGitHubリポジトリを指定することでpushをトリガーにデプロイできます
File Storage | Cloudflare R2 Storage
ファイルストレージのクラウドサービスです
OGPerではOGP画像の保存に使っています
ファイルの操作にAWS S3のSDKがそのまま利用でき便利です
仕組み | ネタバラシ...
正体は「短縮URLにOGPを付けたもの」です!
使ってみるとすぐにわかるのですが、ユーザが指定したWebページに直接OGPを設定しているわけではなくユーザが指定したURLへリダイレクトするページを生成し、そのページに指定したOGP画像を設定しています
OGPの設定方法は以下の書籍のChapter16を参考にしています
上記書籍に記載のあるフォームから指定されたOGP画像やタイトル等の情報をheaderのmetaタグに詰めたページをGoのhtml/templateを使って生成しています、意図しないHTMLを生成しないように入力をEscapeしてくれる優れものです
アプリケーションコード
func (r *Repository) GetHtml(site *domain.Site) (string, error) {
tmpl, err := template.New("sample").Parse(ogpHtmlTmpl)
if err != nil {
return "", err
}
data := map[string]any{
"title": site.Title(),
"description": site.Description(),
"name": site.Name(),
"siteURL": site.SiteURL(),
"imageURL": site.ImageURL(),
}
var buf strings.Builder
if err := tmpl.Execute(&buf, data); err != nil {
return "", err
}
return buf.String(), nil
}
テンプレート
<body>
<head>
<title>{{.title}}</title>
<meta http-equiv="Refresh" content="0; URL={{.siteURL}}" />
<meta property="og:title" content="{{.title}}" />
<meta property="og:description" content="{{.description}}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{.siteURL}}" />
<meta property="og:image" content="{{.imageURL}}" />
<meta property="og:site_name" content="{{.name}}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{{.title}}" />
<meta name="twitter:description" content="{{.description}}"/>
<meta name="twitter:image" content="{{.imageURL}}" />
</head>
</body>
少し工夫が必要だった点として、HTTP Response HeaderのLocationにリダイレクト先URLを設定して3xxでリダイレクトする方法だと大抵のWebサービスではリダイレクト先のOGP情報を読み取ってしまうことが実験でわかりました
そのため対策としてリダイレクトはheadタグに以下で実現することでOGPer側で生成したリダイレクト元のOGPを読み取らせています
<meta http-equiv="Refresh" content="0; URL=リダイレクト先のURL" />
フロントエンドはほとんどはCline+DeepSeekに書いてもらいました
今回Cline初めて使ってみたのですがGoogle Formsで出来る程度のUIであれば性能や拡張性を抜きにして触れるだけのものを作るのならもう人の手を返す必要はないのだなと今更体感しました...
GitHubのリポジトリは以下になります!
まとめ
OGPerは、OGPカードの生成と管理を簡単にするオープンソースツールです。
無料で利用可能なクラウドサービスを活用し、低コストで運用できるように設計されています。
OGPerは誰でも自由に利用・改変が可能です。ぜひお試しください！
Discussion