t_wの輪郭

Feedlyでフォローするボタン
あれ

OGP

2022/5/8 15:30:00
あれあれ輪郭のOGPあれ【解決済み】OGPのog:descriptionに輪郭の本文を記載して欲しいあれ手書きデータの画像化『t_wの輪郭』のOGP表示を改善『t_wの輪郭』をOGPに対応させるOGP自動生成

希哲18年1月30日の開発にて解決済み

動機

SNSに輪郭のリンクを投稿した際に、よりクリックされて欲しいため、リンク先の内容が表示されてほしい。

期待動作

SNS（Misskey.io）に輪郭のリンクを投稿した場合、以下のように表示される。

実際の動作

SNS（Misskey.io）に輪郭のリンクを投稿した場合、以下のように表示される。

あれ

2023/9/25 1:13:00

OGPがうごいてはるわ

あれ

2023/9/24 23:33:00

RSSとOGPでけたら乗り換えやな

「はよやれ」になったのでやるか

あれ

2023/9/24 16:30:00

ノリと勢いで『t_wの輪郭』をReactで作り直しだウェーイってしてるけど、SEO死ぬんじゃねこれ

あとOGP対応無理くねコレ

何ならRSSも無理っぽい

AWS AmplifyでSSRする方法探すか

使用できますAWS Amplifyサーバー側レンダリング (SSR) を使用する Web アプリをデプロイしてホストします。現在、Amplify ホスティングは Next.js フレームワークを使用して作成されたアプリをサポートしています。

公式の日本語が怪しいけど、AWS AmplifyはNext.jsでSSR出来るらしい。

React+DataStoreからNext.jsに切り替えるぞッ！！！！

ここまで作ったフロントエンドを捨てることになるけど、メリットはあるし、やるしかねぇ。

  • フロントエンドの実装はまだほとんど進んでない
  • AmplifyでNext.jsで動かす勉強になる

あれ

2023/2/21 21:29:00

Misskey.ioでちょっと試して見た限り、やはりリンクを張るよりも画像（スクリーンショット）を張る方が反応が良い。

衆目を集めるだけなら、サイトのリンクを張らずにスクリーンショットを張るのが合理的なんだろうなぁ。

OGPで一部情報が表示されるとはいえ、今見てる（慣れてる）SNSから、どんな作りになってるかわからないリンク先を見に行くのは億劫な気持ちは私もある。

OGPを通して画像を要求された際に、
■ 手書きデータ→SVG→ブラウザのCanvasに描画→スクショ→PNGとして返す
っていう処理になってたのを、
■ 手書きデータ→ブラウザのCanvasに描画→スクショ→PNGとして返す
っていう処理に書き換えた


そもそもなんでブラウザやねんとなっており、
■ 手書きデータ→PNG
にしたい


現状だとサーバーでChromiumを起動するpuppeteerが走っており、これが大変遅い。起動やらなんやらするだけで1秒かかる。画面遷移に時間がかかってる説があるのでその辺の高速化がいりそう。

<head>内を共通化したらバグったので修正すること。
思考停止して共通化したらこうなってしまった。

修正した。
ついでに画像も表示するようにした。Faviconを表示するように修正。