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