プログラミング

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
「諦めが上手い人」ほど成功する!正しい目標の立て方とは

  「諦めたらそこで試合終了ですよ」   漫画の中でも有名なセリフですが、これからあなたは何を読み取りますか? 何か目標を達成するために努力が必要とされますが、その方法がわからずに試行錯誤したり、そもそも挑戦すらできずに終えてしまう人は多いのです。 努力をした人は、ほとんどがそれは結果的...

フィールド効果技編(しろいきり) PHPポケモン 50
プログラミング
PHP,PHPポケモン,ポケモン
フィールド効果技編(しろいきり) PHPポケモン 50

フィールド効果技とは ポケモンの技の中には、ポケモンに対して状態変化や異常を与えるもの以外に、フィールド自体に効果を持たせるものがいくつかあります。PHPポケモンでは未実装ですが、そういったフィールド効果技はポケモンを交代したとしても場に効果が残り続けます。  場の状態(ポケモンwiki) https:/...

WordPressをローカルと本番環境で同じ状態にするために理解しておきたい3つのポイントを徹底解説
プログラミング
PHP,phpMyAdmin,WordPress
WordPressをローカルと本番環境で同じ状態にするために理解しておきたい3つのポイントを徹底解説

  WordPressで作ったサイトは通常のサイトと違い、DBが絡んでくるためローカル環境と本番環境を同一の状態で稼働させるには設定や更新されるディレクトリの知識が必要になります。 今回は、WordPressを使ったサイトを作成している人や、開発に挑戦しようとしている人に向けて、ローカルで作ったWordPressのサイ...

動画編集で知っておくべき基本的な3工程
動画編集
Adobe,AfterEffects,Illustrator,Photoshop,PremierePro
動画編集で知っておくべき基本的な3工程

  YouTubeに動画を投稿したいけど、動画の基本的な作成手順がわからない・・・   動画作成をするためのソフトは色々ありますが、有料なものであればやはりAdobe製品に軍配が上がります。 しかし準備したは良いものの、いろんなソフトが合ってどれを使えばよいか分からないという悩みを抱えている方は非常...

なぜ、お金を配るの?悪質メール・SNSを利用した詐欺的手法への対処法とは
ネットワーク
amazon,SNS,Twitter,お金配り,楽天,迷惑メール
なぜ、お金を配るの?悪質メール・SNSを利用した詐欺的手法への対処法とは

定期的に書きたくなるコラムのコーナー! 今回は、迷惑メールやSNSのDMを活用した悪質な勧誘、巷で流行っているお金配りを隠れ蓑のした巧妙な詐欺的手法などをいくつかご紹介、その対策・リクス回避の方法をまとめました。   まず結論からお伝えすると 「怪しいと思うなら手を出すな」 です。その詳細を知りたい...

バズる!ビジネスの見つけ方 〜何で起業するか悩んでいませんか?〜
マーケティング
ビジネス,起業
バズる!ビジネスの見つけ方 〜何で起業するか悩んでいませんか?〜

  独立や起業を志している9割以上の人が「何をビジネスにするか?」を悩んでいます しかし、それは負のサイクルです。 起業するためにビジネスを考えるという行為自体が”矛盾している”ということに気づかなければ、このサイクルからは抜け出すことができません。 その結果、行動できずに終わってしまう人は多...

戦闘不能による交代編 PHPポケモン84
プログラミング
PHP,PHPポケモン,ポケモン
戦闘不能による交代編 PHPポケモン84

戦闘不能による交代 ポケモンが戦闘不能になった際、もし手持ちに戦える状態のポケモンが残っていれば「交代」か「逃げる」の2択になります。今までは手持ちポケモンが1匹のみで判定を行っていたので、今回は交代の選択肢も含めて勝負の判定の見直しをしていきます。   パーティーを含めた勝負判定 味方または...

SEが心がけるべき3つの習慣
プログラミング
Automator,JavaScript,エンジニア,システムエンジニア,プログラマー,プログラミング
SEが心がけるべき3つの習慣

  ネット社会、在宅ワークが主流になってきた今、SEという仕事に憧れを頂いている人は多くなりました。 単価の良さも、魅力の一つです。そして、技術が普及してきたことにあわせて、便利なソフトやアプリが簡単に手に入るようになり、一昔前と比べると技術の習得も容易になりました。   しかし、多くの人が...

カテゴリ

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 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力