プログラミング

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を用いて対策したりと現在の環境に合わせて対応するようにしてください。

 

注目の記事

データベース定義は超重要!システム開発を始める前に知っておきたい構造と構成の考え方
プログラミング
MySQL,データベース,プログラミング学習
データベース定義は超重要!システム開発を始める前に知っておきたい構造と構成の考え方

  システムやアプリ開発をする場合、そのほとんどでデータベースを使用しますね。 それぞれのデータを連携させるためにも、その構造をどうするかは重要で、設計が甘ければシステムそのものの保守性はもちろん、想定していた仕組みを実現するのが難しくなることもあります。   今回は、これからデータベースを...

PHPポケモン「バトルシステム実装編〜タイプ相性の判定〜」デモ&配布有り 19
プログラミング
jQuery,PHP,PHPポケモン,ポケモン
PHPポケモン「バトルシステム実装編〜タイプ相性の判定〜」デモ&配布有り 19

  システムを組むなら、仕様書や設計書はしっかり作りましょう。   ということで、またまたフォルダ移動やページ分けなどを見えないところでやりました。正直説明すると全く進まなくなりそうなので、改修部分は必要最低限にします。 結論、説明しません。(コード配布するので許してください)   そして今...

【変数とは】初心者が最短でPHPを使えるようになるための実践的な学び方
プログラミング
HTML,PHP,プログラミング学習
【変数とは】初心者が最短でPHPを使えるようになるための実践的な学び方

  ※PHP初心者へ向けた内容となりますので、ある程度HTMLの知識がある方を対象とした内容になります。予めご了承ください。    Webプログラミングを学ぶ方はHTML、そしてCSSを学び、そしてJavascriptやPHPという順に学んでいくひとが多いでしょう。 私も実際に、似たような手順で学んでいきました。   ...

フリーランスになるなら知っておきたい!無料サービス3選
フリーランス
フリーランスになるなら知っておきたい!無料サービス3選

  「フリーランスになる前に何を準備すればいいの?」 「フリーランス向けの便利なサービスが知りたい」   今回はそんな悩みを抱えた人へ向けて「フリーランスになるなら知っておきたい!無料サービス3選」をご紹介します。 この記事を読んで、フリーランスにとっての悩みである以下の3つの問題を一緒...

進化アニメーション 後編 PHPポケモン 60
プログラミング
PHP,PHPポケモン,ポケモン
進化アニメーション 後編 PHPポケモン 60

ポケモンの進化演出 前回に続いて、ポケモンの進化演出を実装していきます。バックエンドの処理はざっと説明をしたので、今回はフロントエンド(JavaScript)側の処理を作成していきましょう。   進化画面は新しく設けたので、こちらにもバトル画面で使っているメッセージ用JSを作成していきます。処理自体はほとん...

フリーランスなら心がけておきたい3つのルール【仕事と遊びは両立させろ】
フリーランス
フリーランス,独立
フリーランスなら心がけておきたい3つのルール【仕事と遊びは両立させろ】

  フリーランスになっても不安がいっぱい   会社というものに縛られないというのは楽なイメージがありますが、それ相応の不安がついてまわります。 その結果、会社員へと舞い戻ってしまうと再度そこから抜け出すことは非常に困難です。   今回は、現在活動している人や、これから独立しようとしている...

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

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

状態異常演出編 PHPポケモン 62
プログラミング
PHP,PHPポケモン,ポケモン
状態異常演出編 PHPポケモン 62

状態異常の演出 今回は「状態異常」にかかった際の動的な変更、演出を実装していきます。 どく状態になれば、メッセージに合わせて「どく」を表記、まひ状態になれば、メッセージに合わせて「まひ」をセットするという単純なものです。   返り値の変更 それではまず、状態異常をセットしてメッセージを生成して...

カテゴリ

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

タグ

5G Adobe AfterEffects AI ajax amazon Animate api artisan atom Automator AWS Bluetooth CSS CVR description EC-CUBE4 ECショップ ESLint Facebook feedly foreach function Google Google AdSense Honeycode htaccess HTML IEEE 802.11ax Illustrator Instagram IoT JavaScript 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 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力