Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

他サイトのtwitterカード(ORG)を自分のサイトに表示したい

解決したいこと

例に挙げた下記サイトのように、サイト内に別のサイトのtwitterカード(ORG)の内容を表示したいのですが、表示方法の検討が付かず、調べ方もわからないため、質問させていただきます。

https://lit.link
例)https://lit.link/AliceTerasawa

https://linktr.ee
例)https://linktr.ee/TaraJapan

最後まで読んでいただきありがとうございます。
ご存じの方がいらっしゃいましたら、ご教示いただけますと幸いです。

0

1Answer

Comments

  1. @Kobayashi0620

    Questioner

    説明不足だったかもしれません

    image.png

    前提と行いたいこととしては下記になります
    #前提
    ・上記画像のように、SNSサイトやSNSアプリ以外のサイトにTwitterカードを表示させるようにしたい
    ・自身で作成した他サイトには、orgタグ等々の内容を記述済みでtwitterにも表示されることは確認済み

    #行いたいこと
    ・自身のポートフォリオサイトを作成する
    ・ポートフォリオサイト内に、twitterで表示されるようなTwitterカードを表示させる

  2. @Kobayashi0620 その画像に Twitter カードは写っていませんよ。

    Twitter カードとは、以下の画像中央のように、ツイートの中に埋め込まれたサムネイルと説明文のことを指します。ツイートに URL を書いた場合、リンク先ページの meta タグに Twitter カード用のデータまたは OGP データが書かれていれば、そのデータがカードの内容として表示されます。

    Screenshot 2025-03-19 20.40.22.png

    Twitter 以外のサイトでも貼られたリンク先からデータを引っ張ってきたら Twitter カード相当の表示はできますが、その画像に写っているテキストやサムネイルはリンク先の OGP データとは異なります。その画像のページ作者が手入力したものでしょう。


    質問の意図としては、自分のポートフォリオサイトにリンクを貼ったら自動でリンク先の Twitter カード用データを引っ張ってきてカード状に表示したいということでしょうか。

    それを補助するライブラリは色々あると思いますが、ポートフォリオサイトをどの言語でどう作っているかによります。

  3. それと ORG ではなく OGP です。 Twitter カードと OGP は同じ目的に使われるよく似た規格ですが別物なので、どちら(あるいは両方)に対応するかをはっきりさせたほうがいいです。

  4. @Kobayashi0620

    Questioner

    バニラのjsで書いています

  5. @Kobayashi0620 フロントエンド JS だけでは無理です。(ページを開くたびにリンク先からデータを fetch して表示することは一応できますが、リンク先への負荷を考えると実用的ではありません。)バックエンドでデータを取得してキャッシュする必要があります。

  6. @Kobayashi0620

    Questioner

    承知しました

    現実的に実現可能なものだと
    成果物のtwitterカードの画像をプロジェクトに入れて、参照するか
    リンクから張り付けるかした方がいいってことになりますね

  7. そうなりますね。

Your answer might help someone💌