簡単ホームページ作成ツールならAMS - まずはお試し

全国対応!まずはご相談ください 電話番号0120-55-4682

ツイッターでシェアされた時にツイート内に指定した画像を表示させる方法

2021/8/30

ツイッターでシェアされた時にツイート内に指定した画像を表示させる方法

ツイッターでタイムラインを見ていると、ウェブページにリンクを貼って紹介(シェア)されているというのをよく目にしますよね。そしてそのリンク先の画像も表示されているのでつい目にとまる。

これはそのウェブページにSNS用のタグが記載されているためです。

そのやりかたについてお伝えします。

SNS向けのタグ、OGP

SNS向けのhtmlタグにOGPというものがあります。

このOGPをウェブページにhtmlで書いて設定することで、ツイッターなどのSNSでリンクを貼って紹介(シェア)されたとき、「指定した任意の画像」や「任意のテキスト」が表示されるようにすることができるのです。

検索エンジンだけに頼らない集客方法として人気のSNSからのアクセスを期待するためにも、ぜひとも設定しておきたいのがOGPです。

OGPの書き方

下記がOGPのベースとなる記述です。

htmlで<head>要素のなかで記述していきます。

<head prefix="og:https://ogp.me/ns#">
<meta property="og:url" content=" ページのURL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページのタイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像のURL" />

Twitter向けに追記する記述

<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />

「Twitterカードの種類」というのは、ツイート上でOGPの内容が表示される「形式」のことです。

  • summary:サマリーカード。画像と記事のタイトル・説明文が表示される。
  • summary_large_image:大型画像サマリーカード。大きなサイズの画像と記事タイトル、説明文が表示される。

参考になれば幸いです。

常時SSL+スマホサイト最適化の効果の出るホームページが39,800円!
【0120-55-4682】月~金曜9:00~18:00

月~金曜9:00~18:00

メールでのお問い合わせ
AMS簡単ホームページ作成ツール
あなたのサイトをPRしましょう!
AMSマニュアル
よくある質問と回答
AMSお問合わせ

月別アーカイブ