# Link3でのOGP活用術

**Published by:** [neaf](https://paragraph.com/@0xneaf/)
**Published on:** 2022-12-26
**URL:** https://paragraph.com/@0xneaf/link3-ogp

## Content

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

## Publication Information

- [neaf](https://paragraph.com/@0xneaf/): Publication homepage
- [All Posts](https://paragraph.com/@0xneaf/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@0xneaf): Subscribe to updates
- [Twitter](https://twitter.com/0xneaf): Follow on Twitter