プログラミング

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

 

注目の記事

【無料】早起きをして神戸へ行こう!「為になる雑談朝活」
イベント
三宮,朝活,神戸
【無料】早起きをして神戸へ行こう!「為になる雑談朝活」

  朝活を実施することになりましたので、その目的な概要をまとめました。 神戸三宮での開催を予定しておりますので、もしお近くにお住まいの方で日時が会いましたらご参加ください。 土日祝辺りで週1日程度の不定期開催を予定しています。学びにつながる、けど参加しやすい雑談形式ということを主としています...

WordPressで作ったサイトで実装するワンランク上のSEO対策
SEO対策
PHP,WordPress,プログラミング
WordPressで作ったサイトで実装するワンランク上のSEO対策

  WordPressでSEOに強いサイトを運営したい   近年、ブログを採用せずともWordPressを使用したサイト作りが増えてきました。 その理由には更新の手軽さはもちろん、優秀なプラグインが揃っていることでSEO対策に強いサイト作りが簡単だということが大きいです。   今回は、WordPressのブログやサイトで役立...

ブラウザで遊べる「PHPポケモン」
プログラミング
PHP,PHPポケモン,ポケモン
ブラウザで遊べる「PHPポケモン」

PHPポケモン 約1ヶ月半をかけて作り込んできたPHPポケモンですが、ある程度遊べるぐらいのレベルになったので、みなさまにも体験・楽しんでいただけるよう本日(2020年10月12日)より一般公開します。   PHPポケモンへのリンクは本記事の最後に用意しておりますので、プレイする前に注意事項等に目を通し...

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

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

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

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

PHPポケモン「オートローダー編」16
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「オートローダー編」16

  今までは技やタイプを一括requireという荒業で対応していましたが、フシギダネ系列の技を実装した際に「こんなん全部読み込んでられるか!」と流石になったので、簡易ながらオートローダーを実装していきます。 そして、実装したらしたで色々と問題も浮かび上がってきたので、このあたりは回を進めて行きなが...

構成見直し編(クラス名) PHPポケモン49
プログラミング
PHP,PHPポケモン,ポケモン
構成見直し編(クラス名) PHPポケモン49

構成の見直し 今回は全体構成の見直しをします。ディレクトリについては変更ありませんが、ファイル名とクラス名について大幅な修正をかけていきます。   クラス名の重複回避 まず、クラス名の重複についてです。状態異常・状態変化の子クラスでは重複回避のために接頭語を着けて管理していましたが、他にも重複...

PHPポケモン「タイプ実装編」15
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「タイプ実装編」15

ポケモンのタイプについて  2020年剣盾シリーズでのポケモンでは、全18タイプが実装されています。初代では15タイプ(あく、はがね、フェアリーを除く)からスタートして、たった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 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 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力