# Link3でのOGP活用術 By [neaf](https://paragraph.com/@0xneaf) · 2022-12-26 --- Link3の個人プロフィールでOGPを活用して画像(動画)を貼る方法。 をおねだりされたので雑にまとめました。ハイ。 そもそもOGPって何？ ----------- OGPとは、”Open Graph Protcol” の略称。SNSでユーザーがリンクをシェアした際に、リンク先のタイトルや詳細を画像や短文で伝えるHTML要素です。 Twitter、Facebook、Lineなどでよく見かける、写真付きのリンクといえば伝わりやすいかも。 ![SNSでよく見かけるこういうやつ](https://storage.googleapis.com/papyrus_images/29784f8cc2ae2b6bd47c9718718f67c2a8f60c629f57d2ab22ee5c5afe2ee70f.png) SNSでよく見かけるこういうやつ 今回はコレをLink3に利用します。 OGP用のページ作成 ---------- まずはOGPを表示させる為のページを作る為、Link3外にスペースを準備します。 これはどんな所でもok。広告やドメインに拘らない人であれば無料のレンタルサーバーとかで全然ok。 スペースが準備出来たら、ページを作って以下のコードをコピペします。 日本語部分は自分が表示したいものに要変更。 画像は400×100くらいのイメージで。gifならアニメーションも流せます。 Link3側での設定 ---------- 通常Link3でプロフィール用のリンク(Twitterなど)を貼る場合、 ”Add a Section” ⇒ “Official Links” を使用しますが、今回は ”Add a Section” ⇒ “Featured Content” ⇒ “Other Link(一番右)” を使用します。 ![](https://storage.googleapis.com/papyrus_images/190675fcec730d005f3152578cf0f233c595f139793e12d38f575fcb4809ebc1.png) ここに先程作ったページのURLを入れるだけ。 ![](https://storage.googleapis.com/papyrus_images/af5e0633017b3e9c29be65ecb2e1fd5cb78ad6ebcd1f73a12d8e6e790e2339a8.png) ハイ完成。超簡単。 オマケ --- リンク間の隙間を事前に計算する事で、縦長の一枚絵を疑似的に表現する事も出来ます。 gifなら縦長動画も流せます…が、読込時に若干ズレるので動画はオススメしません。 ![読込がほぼ成功したチェン〇ーマンの図。安定してくれれば使うんだけどなぁ](https://storage.googleapis.com/papyrus_images/0687806cf99947e8add2be1fc79b2275e51448cedb5d9639c0409a2560125bae.gif) 読込がほぼ成功したチェン〇ーマンの図。安定してくれれば使うんだけどなぁ 画像や動画を多用するとページの読み込みが遅くなるので、ほどほどにしましょうね。 雑なまとめですが、何かの参考になれば幸いです。皆様よいLink3ライフを♪ --- *Originally published on [neaf](https://paragraph.com/@0xneaf/link3-ogp)*