OGP画像の埋め込みを実装したい(しない)
OGP画像というのがあって、ついったーとかﾌｪｰｽﾌﾞｯｸとかでURLを貼るとリンク先のページの説明文と画像が表示されるみたいなやつがあると思うんだけどそういうアレ。 URLを貼ると自分のサイトにアレを動的に埋め込めるようにしたいというのが目標。 まぁあんなん「クライアントサイドでちょちょっとやったらできるやろ～ｗ」と思ってたんだけどどうもそんな簡単ではないことに最近気が付いたので記事に書いてみた。 (なお実装はしてない、めんどすぎる) (知ってる人にはすごい当たり前の話だと思うけど調べてもあんまりヒットしなかったので) なぜクライアントサイドだけでは無理か OGP画像は各サイトのmetaタグの該当箇所を引っ張ってくることにより得られるが、そもそもJavaScriptで別のサイトにアクセスしてその結果で何かをしようとすると確実にCORS(Cross-Origin Resource Shar
独り言形式で綴る「OGP & SSR」
OGP画像を表示させたい 「よし、Webサービスを作ったぞ」 「プログラミングに関する記事を投稿できるWebサービスだ」 「このサイトの記事をTwitterとかでシェアしてもらって、人気が出るといいな」 「シェアしてもらったときに、やっぱりOGP画像が表示された方がいいよな」 「よくあるような、記事のタイトルとかサイト名が入ったサムネ画像みたいなのを表示したいな」 「よし、そのためには、HTMLのmetaタグに、OGPの情報が入るようにしないとな」 Next.jsでheadタグの中をいじる 「今回のWebサービスでは、フロント部分をNext.js[1]で実装したから」 「Next.jsでheadタグの中をいじって、metaタグにOGP情報を埋め込もう」 <Head> <meta property="og:title" content="記事タイトル" /> <meta property="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
