プログラミング

TwitterでYouTubeのリンク付きサムネイルを表示させる方法【超実践的Webプログラミング活用法】

HTML JavaScript PHP Twitter YouTube
TwitterでYouTubeのリンク付きサムネイルを表示させる方法【超実践的Webプログラミング活用法】

 

Twitter(ツイッター)をブログや商品、イベントの宣伝目的で使用している人は多いです。そして、そのためのマーケティング方法や戦略は数多く練られています。

今回は、その中でもYouTubeの告知をするために特化させた内容をまとめました。

 

一般的な方法と、プログラミングの知識(HTMLJavascript等)がある程度ある人へ向けた2パターンご紹介します。

現在プログラミング学習に取り組んでいる人にとっては、より実践的で実用的な内容となりますので、「プログラミングにはこういった使い方があるんだ」と肌で感じ取り是非参考にしてください。 

今回本題であるプログラミングを使った解決方法を知りたい人は「twitter:imageを使う」まで読み飛ばして頂いて構いません。

 

最後には、ほぼコピペでもできるコードサンプルも載せておきますので、現在Twitterを使ったYouTubeの宣伝運用をしている人は自由にお使いください。

 

 

ツイートでYouTubeの動画を宣伝しよう

 

ブログの記事更新をツイートをするのと、YouTubeへの動画アップを告知ツイートするのでは大きく違いがあるのはご存知でしょうか?

 

わかりやすいように、自分のアカウントとお客さん(承認済み)のアカウントで少し比較をしてみましょう。

 

 

左が自分のアカウントで先日ブログの更新通知をした際の表示です。

それに対して、右はお客さんのアカウントでYouTubeの動画公開告知をしたツイートです(※今回の記事のために準備してもらったサンプルツイートです

 

見てわかるように、ブログの告知では画像(カード)が表示されて、実際にどういった内容の記事か伝わりやすく、また期待感もあります。

そして、スペースも広く使えるので多くの人の目に留まりやすくなります。

 

それに対して、YouTubeのURLを貼り付けただけではTwitterでは画像を表示してくれません。表示されるためには、そのツイートをタップまたはクリックしてもらって選択状態にしてもらわなければいけないのです。

 

例:ツイートを選択すると表示される

 

 

これでは、この画面を開いてもらうというハードルが高すぎて、せっかくのTwitterの利点が薄れてしまっています。

 

では、どうすれば画像を表示することができるのでしょうか。

その方法を見ていきましょう。

 

 

一般的な方法

 

こちらは一般的に紹介されている「画像を投稿する」といった方法です。

方法を知っている人は飛ばしてもらって構いません。

 

画像を投稿すれば、大きく表示されるので、URLと合わせて作成したサムネイルを投稿すれば、画像を表示することは可能です。

以下のような見え方になります。

 

確かに表示されました。しかしこれには大きな欠点があります

それは、先ほどはツイートを表示すると動画が再生出来たのに対して、投稿された画像が優先されてしまい、YouTubeのカード(再生画面)が表示されなくなるということです。

また、画像をクリックしても画像が拡大されるだけで、YouTubeへ移動してもらうには小さなURLの文字列をクリックする必要があります。

 

しかし、ツイートを目立たせたいという理由であれば、この方法でも効果は違ってくるでしょう。

画像も作成されたサムネイルを使うだけで良いので手軽です。

 

 

twitter:imageを使う

 

では本題です。

Webプログラミングの学習を始めた人は、是非この方法を試してみてください。より実用的な方法ですので、サイトやアプリケーションを作成する際の参考になるでしょう。

 

ブログで画像が表示できるのであれば、それと同じ方法を使ってYouTubeも告知が出来ます。

それでは実際に行う内容をまとめます。

空のhtml1ページを作成

メタタグのtwitter:〇〇を設定

Javascriptを使った動画URLへのリダイレクト

  

空のhtmlページを作成

 

現在自分でポートフォリオサイトやWordPressブログ、個人サイトなどを運営している場合はそちらの一部を利用しても良いでしょう。

ブログサービスを使っている場合でも、リダイレクト設定やカードの設定ができるのであれば、そちらが利用できるかも知れません。

今回は、実際にコーディングの例でご紹介します。

 

まず、空のhtmlページを作成します。

今後動画の本数が増えていくにつれて、ページを増やしていくことになるので、それ専用のフォルダを設けて置くほうが良いでしょう。

 

・youtube001.html

<!DOCTYPE html>
<html lang="jp" dir="ltr">
              <head>
                            <meta charset="utf-8">
                            <title></title>
              </head>
              <body>
                          
              </body>
</html>

 

 

メタタグのtwitter:〇〇を設定

 

Twitterで表示させるためのメタタグの設定をします。内容はほとんど同じのため、OGとタイトル、ディスクリプションの設定も合わせて記述しておきます。

また、youtube001.htmlは今回ルートへ配置するものとします。

 

・youtube001.html

<!DOCTYPE html>
<html lang="jp" dir="ltr">
              <head>

                            <meta charset="utf-8" />
                            <meta name="application-name" content="YouTubeのチャンネル名等"/>

                            <!-- OGの設定 -->
                            <meta property="og:site_name" content="YouTubeのチャンネル名等" />
                            <meta property="og:locale" content="ja_JP" />
                            <meta property="og:url" content="https://ドメイン名/youtube001.html" />
                            <meta property="og:title" content="動画タイトル" />
                            <meta property="og:type" content="article">
                            <meta property="og:image" content="サムネイルURL" />
                            <meta property="og:description" content="動画の説明文" />

                            <!-- twitterの設定 -->
                            <meta name="twitter:site" content="ツイッター名(@****)" />
                            <meta name="twitter:card" content="summary_large_image" />
                            <meta name="twitter:title" content="動画タイトル" />
                            <meta name="twitter:url" content="https://twitter.com/ツイッター名" />
                            <meta name="twitter:image" content="サムネイルURL" />
                            <meta name="twitter:description" content="動画の説明文" />
 
                            <title>動画タイトル</title>
                            <meta name="description" content="動画の説明文" />

              </head>
              <body>                           

              </body>
</html>

 

これでTwitter上で表示させるための準備が完了しました。

サムネイルURLについては、どこかへサムネイル画像をアップしてそこへのURLを指定するか、YouTubeのサムネイルURLを指定しましょう。

以下、YouTubeのサムネイルURL記述例です。

 

・YouTubeのサムネイル選択欄に表示されているものを取得 ※一番左が0.jpg

https://img.youtube.com/vi/【動画ID】/0.jpg
https://img.youtube.com/vi/【動画ID】/1.jpg
https://img.youtube.com/vi/【動画ID】/2.jpg
https://img.youtube.com/vi/【動画ID】/3.jpg

 

・デフォルトサイズ

https://img.youtube.com/vi/【動画ID】/default.jpg

 

・高品質

https://img.youtube.com/vi/【動画ID】/hqdefault.jpg

 

・中品質

https://img.youtube.com/vi/【動画ID】/mqdefault.jpg

 

・サムネイル標準

https://img.youtube.com/vi/【動画ID】/sddefault.jpg

 

・サムネイル最大解像度

https://img.youtube.com/vi/【動画ID】/maxresdefault.jpg

 

YouTubeのサムネイル画像をURL指定で利用する場合は、実際にアクセスをしてみて正しく表示されるか確認しておきましょう。

比較的綺麗に表示される、最後の「maxresdefault.jpg」辺りがおすすめです。

  

 

Javascriptを使った動画URLへのリダイレクト

 

これで、「https://ドメイン名/youtube001.html」のアドレスをTwitterへ貼り付ければ、ブログと同じ様にサムネイルを表示させることができます。

しかし、押されたとしてもリンク先のページでは何も表示されません。

 

なので、以下のようにJavascriptを使って動画URLへリダイレクト指定しましょう。

 

youtube001.html

<!DOCTYPE html>
<html lang="jp" dir="ltr">
              <head>
                            <meta charset="utf-8" />
                            <meta name="application-name" content="YouTubeのチャンネル名等"/>

                            <!-- OGの設定 -->
                            <meta property="og:site_name" content="YouTubeのチャンネル名等" />
                            <meta property="og:locale" content="ja_JP" />
                            <meta property="og:url" content="https://ドメイン名/youtube001.html" />
                            <meta property="og:title" content="動画タイトル" />
                            <meta property="og:type" content="article">
                            <meta property="og:image" content="サムネイルURL" />
                            <meta property="og:description" content="動画の説明文" />

                            <!-- twitterの設定 -->
                            <meta name="twitter:site" content="ツイッター名(@****)" />
                            <meta name="twitter:card" content="summary_large_image" />
                            <meta name="twitter:title" content="動画タイトル" />
                            <meta name="twitter:url" content="https://twitter.com/ツイッター名" />
                            <meta name="twitter:image" content="サムネイルURL" />
                            <meta name="twitter:description" content="動画の説明文" />

                            <title>動画タイトル</title>
                            <meta name="description" content="動画の説明文" />

                            <!-- 動画URLへリダイレクト -->
                            <script type="text/javascript">location.href="動画URL";</script>
                          
              </head>
              <body>
                      
              </body>
</html>

 

以上が完成コードのサンプルです。(テンプレートとしてご利用ください)

 

あとは作成したファイルをアップして、「https://ドメイン名/youtube001.html」のURLTwitterへ貼り付けると、ブログと同じように画像をクリックするだけでYouTubeへ誘導することができます

以下が完成後のTwitter表示例です。

 

いかがでしょうか。

実際にこれだと目に留まりやすく、クリックしてもらえるとそのままYouTubeへの誘導ができるので、動画を閲覧してもらいやすくなります。

良い動画を作成しても、実際に見てもらうまでのハードルが高く、苦戦している人達にとっては、こういった工夫をするだけで大きな効果が得られるでしょう。

 

 

(おまけ)PHPを利用した効率化

 

上記で紹介した方法だと、毎回htmlページを作って量産しなければならないので少し手間がかかります。PHPを利用すると少し簡略化が出来るので、効率も上がります。

 

以下、サンプルコードになります。

<?php

$title = '動画タイトル';
$description = '動画の説明文';
$youtube_id = '動画ID';

 ?>

<!DOCTYPE html>
<html lang="jp" dir="ltr">
              <head>

                            <meta charset="utf-8" />
                            <meta name="application-name" content="YouTubeのチャンネル名等"/>

                            <!-- OGの設定 -->
                            <meta property="og:site_name" content="YouTubeのチャンネル名等" />
                            <meta property="og:locale" content="ja_JP" />
                            <meta property="og:url" content="https://ドメイン名/youtube001.html" />
                            <meta property="og:title" content="<?=$title?>" />
                            <meta property="og:type" content="article">
                            <meta property="og:image" content="https://img.youtube.com/vi/<?=$youtube_id?>/maxresdefault.jpg" />
                            <meta property="og:description" content="<?=$description?>" />
 
                            <!-- twitterの設定 -->
                            <meta name="twitter:site" content="ツイッター名(@****)" />
                            <meta name="twitter:card" content="summary_large_image" />
                            <meta name="twitter:title" content="<?=$title?>" />
                            <meta name="twitter:url" content="https://twitter.com/ツイッター名" />
                            <meta name="twitter:image" content="https://img.youtube.com/vi/<?=$youtube_id?>/maxresdefault.jpg" />
                            <meta name="twitter:description" content="<?=$description?>" />

                            <title><?=$title?></title>
                            <meta name="description" content="<?=$description?>" />

                            <!-- 動画URLへリダイレクト -->
                            <script type="text/javascript">location.href="https://youtu.be/<?=$youtube_id?>";</script>
                           
              </head>
              <body>
                          
              </body>

</html>

 

この様に使い回したいものは先に設定してしまうと、量産の手間は楽になります。

また、動画のURLとサムネイルへのURLは動画IDさえわかっていれば、他は同じなので、このように指定しておくとミスの軽減にもなります。

 

動的な使い方をすれば、他にも応用を効かせることができ、より便利な自分専用のアプリケーションとなってくれるので、より実用的なものを目指して自身でカスタマイズしていってください。

 

 

まとめ

 

今回は、Twitterのツイート一覧にYouTubeのサムネイルを表示させるための方法をご紹介しました。

自分が「これ、どうにかならないかな?」と感じたことをまとめた内容となりましたが、プログラミング学習をしている方にとっても、Twitterを使った運用をしている方にとっても役立つ内容ではないかと思います。

 

これは執筆時現在は有効な方法ですが、Twitterのシステム内部が変更されたり、YouTube側の変更によって必要なくなったり、通用しなくなるかも知れません。

また、SEOの観点からも影響を受けてしまうこともあるので、nofollownoindexを用いて対策したりと現在の環境に合わせて対応するようにしてください。

 

注目の記事

ポケモン図鑑編 PHPポケモン 88
プログラミング
PHP,PHPポケモン,ポケモン
ポケモン図鑑編 PHPポケモン 88

ポケモン図鑑とは ポケモンに出会ったり、仲間にしたりすると、ポケモン図鑑のデータがどんどんと埋まっていきます。PHPポケモンでもこの仕組みを実現させるために、ポケモン図鑑を作成していきましょう。   クラスによる管理 ポケモン図鑑はクラス管理をしていきます。プレイヤー1人に対して1つのポケモン図...

人員配置計算機〜放課後等デイサービス・児童発達支援〜
プログラミング
JavaScript,児童デイ,児童発達支援,放課後等デイサービス,福祉,計算機
人員配置計算機〜放課後等デイサービス・児童発達支援〜

最近はずっとPHPポケモン開発にかかりっきりでしたが、そろそろ「役立つもの」を作りたくなったので、思いつきで作ってみました。 もちろん「汎用性」のあるものは、既に世の中に存在しているため、ありそうでなさそうなニッチなものを攻めてみます。   そんな中、今回挑んだのは「人員配置計算機」です。 ※実際に...

いかり編 PHPポケモン 42
プログラミング
PHP,PHPポケモン,ポケモン
いかり編 PHPポケモン 42

いかり(技)とは 2020年10月段階での最新シリーズである「ソード・シールド」では、今まであった技が使用不可能になっているものが数多くあります。その1つが「いかり」という技です。 いかり(ポケモンwiki) https://wiki.ポケモン.com/wiki/いかり   使えなくなっている技の中には、世代を経...

会話スキルに自信がない人必見!会議やミーティングで失敗しないコツとは
雑記
Skype,Zoom
会話スキルに自信がない人必見!会議やミーティングで失敗しないコツとは

  話下手なので会議で置物状態 Zoomミーティングは発言しづらい 会議の時間が退屈で無駄   そんな悩みや不満を抱えている方はいませんか? 確かに会議は退屈ですし、話下手な人からすれば嫌な時間の1つかも知れませんね。 ですが、立ち回りのポイントを3つ押さえておくだけで、無駄・退屈だと感じて...

プログラミングで躓く人必見!一人前になるためのSDCとは
プログラミング
プログラミング学習
プログラミングで躓く人必見!一人前になるためのSDCとは

  「プログラミング学習を始めたけど中々身につかない」 「挑戦したいけど何から始めればいいかわからない」   プログラミング教育が始まるとともに、プログラミング学習のニーズも日々高まってきています。ですが、興味はあっても中々挑戦までは至らなかったり、始めたは良いものの現実は厳しく躓いてし...

ポケモン預かりシステム編 PHPポケモン 85
プログラミング
PHP,PHPポケモン,ポケモン
ポケモン預かりシステム編 PHPポケモン 85

ポケモン預かりシステムとは ポケモンは手持ち(パーティー)に6匹しか入れることができません。そのため、ポケモンを捕まえた際にその上限に達していれば、ボックスへ転送するという仕組みをPHPポケモンでも実装していきます。これが、ポケモン預かりシステムです。 今回は前段階であるボックスの仕様決めをメイン...

PHPポケモン「オートロード編(修正版)」17 おまけ:日本語化
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「オートロード編(修正版)」17 おまけ:日本語化

  前回実装したオートローダーの使い方が盛大に間違っていたので、今回その間違いの説明をしながら、正しい実装方法をご紹介します。 申し訳ありません。(誠意)    オートロードについて(再)  必要なタイミングで必要なファイルをrequireまたはincludeするあれです。   前回spl_autoload_reg...

起業・独立を考えている人に向けた具体的なアドバイス3選
雑記
起業・独立を考えている人に向けた具体的なアドバイス3選

  「どのタイミングで起業すべき?」 「会社を作るためにはどういったことをすればいいの?」   あなたはこんな悩みを抱えていませんか? 今回は、これから独立・起業をしようと考えている方や、そういった野望をいだいている人に向けて、自らの経験を元に具体的なアドバイスを3つピックアップしてご紹...

カテゴリ

SEO対策 イベント デザイン ネットワーク ビジネスモデル フリーランス プログラミング マーケティング ライティング 動画編集 雑記

タグ

5G Adobe AfterEffects AI ajax amazon Animate api artisan atom Automator AWS Bluetooth CSS CVR description EC-CUBE4 ECショップ ESLint Facebook feedly foreach fortify function Google Google AdSense Honeycode htaccess HTML IEEE 802.11ax Illustrator Instagram IoT JavaScript jetstream jQuery jQuery UI keyword LAN Laravel Linux MacBook MAMP meta MLM MySQL NoCode note OS OSI参照モデル Paypal Photoshop PHP phpMyAdmin PHPポケモン PremierePro rss SEO SEO対策 Sequel Pro Skype SNS SSH Symfony TCP/IP title Toastr Trait Twig Twitter UCC V系 WAN WebSub Wi-Fi wiki Windows WordPress XAMPP xml Xserver YouTube YouTuber Zoom アーティスト アウトプット アクセス層 アニメーション アフィリエイト イーブイ インターネット インプット エンジニア オブジェクト指向 お金配り クリック単価 クリック数 コミュニケーション能力 コロナ コンサルティング サムネイル システムエンジニア スタートアップ スタイルシート スパム データベース ディープフェイク デザイナー デザイン テレワーク ナンパ ニュース ネットワークモデル ノマドワーク バナー ピカチュウ ビジネス フィード フリーランス ブロガー ブログ プログラマー プログラミング プログラミング学習 プログラミング教育 プロトコル ホームページ制作 ポケモン マークアップ マーケティング メール リモートワーク レンダリング 三井住友 三宮 仕事依頼 児童デイ 児童デイサービス 児童発達支援 公開鍵 初心者 助成金 勉強法 営業 広告 広告収入 必勝マニュアル 放課後等デイサービス 朝活 楽天 深層学習 無線LAN 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 認証 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力