TwitterシェアボタンとCard活用で拡散促進を（Webサイトを展開する方向け）
こんにちは。主にデータ分析、視覚化などを仕事にしている者です。この記事はWebサイトを展開されている方向けの記事です。今はすでに設定されている企業様(サイト）も多いですが、そうでない事も結構見かけていますので。まだあまり活用されていない方向けに、Twitterシェアボタン／TwitterCardのメリットなどを紹介したいと思います☆
シェアボタンについて
ボタンを押すと投稿画面が表示されるものです。ブログ／ニュースサイトなどで良く見かけるとは思うのですが、たまに古くからあるサイトですと、ボタンを押した時に「URLだけ表示される」といった事があります。これは個人的にはもったいないと思います。
このシェアボタンは任意の文字列を入れる事が出来るので、ページタイトルや記事のタイトルなどを入れる事を私はオススメします。実装コードの例も一応記載しておきます。何故かと言えば、文章があればユーザーがそのままつぶやけますので人に紹介しやすくなりますし、設置する側も入れたいワードを意図的に仕込む事も出来るからです。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-url="https://note.com/" data-text="サンプルテキスト" data-show-count="false">Twitter</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>ほかにも、data-via="Twitterユーザー名" 、 data-hashtags="ハッシュタグ名"といったものを入れられますので、是非工夫をして拡散してもらいやすくしましょう。
TwitterCardについて
ページのHTMLに特定のタグを入れておくと、URLがつぶやかれるだけで、下記の画像のように「画像付きリンク」が表示されるようになります。下の方のタピオカの画像の部分ですね。
ユーザーがサイトをシェアする時は、わざわざ画像を添付して紹介するなんていうのは稀有ですので、テキスト／画像を指定する事を強くオススメします。画像付きのつぶやきとそうでないつぶやきの印象はかなり違います。
今回は実装方法を紹介する記事では無いのでサラッと書きますが、下記のようなタグを<head>～</head>内に入れていただければ実装が可能です。「OGP 設定」などで検索するとすぐに参考サイトが出てきます。
<meta property="og:url" content="★ページURL" />
<meta property="og:title" content="★表示タイトル" />
<meta property="og:description" content="★表示説明文章" />
<meta property="og:site_name" content="★サイト名称" />
<meta property="og:image" content="★画像のURL" />
<meta property="og:type" content="article" />
<!-- 種類websiteやblogやarticleを指定 -->実装サンプル：TwitterCardとシェアボタンを仕込んでいます。 http://allcountry.sakura.ne.jp/biz/code/javascript/20200709/cookieabtest.html
実装確認サイト(公式）：サイトのURLを入れるとTwitter上でのイメージが表示されます。https://cards-dev.twitter.com/validator
まとめ
私がTwitter好きというのもありますが、2018年の発表時点で、このSNSは日本で4500万以上のユーザー数があるようです。そのユーザー達がサイトに訪れて気に入ったページを他者にシェアするという行動回数は相当なものです。
その拡散行動を実行しやすく、それがタイムラインでも目立ちやすくする事で認知拡大／集客に貢献出来ると考えています。是非ご検討、見直しを！※もちろん業種、サイトの毛色によります。
個人的にも多くのサイトにボタンとTwitterCardがあると嬉しいです（笑）シェアしやすくなりますので！
それでは最後までお読みいただきありがとうございました！