Q&A
Closed
例に挙げた下記サイトのように、サイト内に別のサイトのtwitterカード（ORG）の内容を表示したいのですが、表示方法の検討が付かず、調べ方もわからないため、質問させていただきます。
https://lit.link
例）https://lit.link/AliceTerasawa
https://linktr.ee
例）https://linktr.ee/TaraJapan
最後まで読んでいただきありがとうございます。
ご存じの方がいらっしゃいましたら、ご教示いただけますと幸いです。
やったことないけどこういうこと？
@Kobayashi0620
Questioner
説明不足だったかもしれません
前提と行いたいこととしては下記になります
＃前提
・上記画像のように、SNSサイトやSNSアプリ以外のサイトにTwitterカードを表示させるようにしたい
・自身で作成した他サイトには、orgタグ等々の内容を記述済みでtwitterにも表示されることは確認済み
＃行いたいこと
・自身のポートフォリオサイトを作成する
・ポートフォリオサイト内に、twitterで表示されるようなTwitterカードを表示させる
@Kobayashi0620 その画像に Twitter カードは写っていませんよ。
Twitter カードとは、以下の画像中央のように、ツイートの中に埋め込まれたサムネイルと説明文のことを指します。ツイートに URL を書いた場合、リンク先ページの meta タグに Twitter カード用のデータまたは OGP データが書かれていれば、そのデータがカードの内容として表示されます。
Twitter 以外のサイトでも貼られたリンク先からデータを引っ張ってきたら Twitter カード相当の表示はできますが、その画像に写っているテキストやサムネイルはリンク先の OGP データとは異なります。その画像のページ作者が手入力したものでしょう。
質問の意図としては、自分のポートフォリオサイトにリンクを貼ったら自動でリンク先の Twitter カード用データを引っ張ってきてカード状に表示したいということでしょうか。
それを補助するライブラリは色々あると思いますが、ポートフォリオサイトをどの言語でどう作っているかによります。
それと ORG ではなく OGP です。 Twitter カードと OGP は同じ目的に使われるよく似た規格ですが別物なので、どちら（あるいは両方）に対応するかをはっきりさせたほうがいいです。
@Kobayashi0620
Questioner
バニラのjsで書いています
@Kobayashi0620 フロントエンド JS だけでは無理です。（ページを開くたびにリンク先からデータを fetch して表示することは一応できますが、リンク先への負荷を考えると実用的ではありません。）バックエンドでデータを取得してキャッシュする必要があります。
@Kobayashi0620
Questioner
承知しました
現実的に実現可能なものだと
成果物のtwitterカードの画像をプロジェクトに入れて、参照するか
リンクから張り付けるかした方がいいってことになりますね
そうなりますね。
