HTML&CSSでWebサイトを作ってみよう!

メタ情報を埋め込もう

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Facebookなどでシェアされた場合に、設定しておくと便利なメタ情報をご紹介します。
講師:
06:13

字幕

このレッスンではメタ情報の埋め込みについて学びます。メタ情報とは表に見える所には出てきませんけれどもソーシャルネットワークサービスでシェアされた際や検索エンジンなどに情報を伝えるのに便利な情報です。では begin のフォルダをSublime Text にドラッグ&ドロップしてindex.html をダブルクリックで開きましょう。そして右クリックから Open in Browzer でブラウザで確認します。既にサイトの正面の部分はもうできているんですが実はまだメタ情報は何も埋め込まれていません。ではフォルダをもう一度開いてみましょう。begin フォルダの隣にtext というフォルダーがあるのでこの text フォルダの中を開きます。そして text-meta.txt というのが原稿データになりますのでこちらをそのまま Sublime Text にドラッグ&ドロップしてみて下さい。そうするとこのようにデータが開かれたかと思いますのでこれを丸ごとコピーしてしまってください。このように全部を選択してコピーをとります。コピーをとったらこちらの index.html の stylesheet の下閉じ head の上に改行を入れてここにペーストをします。 そして1つ1つの項目ですがdescription は検索エンジンで検索された際のメッセージになります。例えば、新規ウィンドウで Chrome と検索してみたいと思います。そうすると Chrome で検索した際このようにタイトルの下に文章が出ますけれどもここはdescription だったりdescription が設定されていない場合はそのサイトのテキストデータを収集してGoogle が自動的に整形をしてくれたりします。けれどもこちらが予めちゃんとメタデータとして埋め込んであれば適切な情報を要約して掲載することができるのでdescription を設定しておくことをお勧めします。keywords については現在余り検索エンジンにとっては大事なデータでは無いと言われていますが3つかもしくは5つ位程半角カンマ区切りで関連性の高いワードを入れておきます。そして大切なのが meta property ogこれはオープングラフというものでFacebook などのソーシャルサービスにURL がペーストされた際に表示されたりする情報を埋め込めます。なので、サイトネームは会社名であったりとかそして URL が確定していれば今これは仮になっているのでコロン // の後に自分の web サイトの URL を貼っておきます。 ではこの og の画像アイコンについてはシミュレーターをご紹介します。では Google Chrome に移動して検索をしてみましょう。og 半角スペース simulatorと打ってEnter を押します。そうするとこのように「OGP 画像シミュレータ」と出るのでこちらをクリックします。そうすると Facebook でシェアされた際にこのように画像付きで出ることがありますがその画像を事前にシミュレーションができるというサイトになります。この画像は実は begin のフォルダに既に用意されていますのでbegin のフォルダの中のimages フォルダの中にあるog.png というものが実はこちらの og オープングラフの画像になります。こちらをドラッグして「ファイルを選択」という所に落としてみましょう。そうするとこのようにシェアされた際にどのように横が切り落とされたりとか縮小されたときに文字が読めるかどうかなどの確認ができる、というツールになります。この画像は予め 1200x630px で作っておくことが推奨されていますのでこの画像サイズで用意するようにしてみて下さい。また Sublime Text に戻ります。 因みに、この og の画像については絶対リンクで指定することが求められています。絶対リンクは URL で指定するということですのでWeb サーバー上にアップロードしてからhttp で始まるアドレスで記述するように心がけてください。また、description についてはこちらの meta description の方と同じような内容になっています。では favicon も見ておきましょう。favicon はブックマークバーに表示されるようなアイコンのことです。一度この HTML を上書き保存してからブラウザにフォーカスをして更新をしてみましょう。そうするとこのようにタブの左側にアイコンが出てきたと思います。こちらは favicon という画像を作ってHTML 上で記述をしてあげるとこのように読まれるようになります。例えばこのアイコンの部分をドラッグ&ドロップでブックマークバーに足すとこのようにアイコンプラス文字で表示させることができるのでこちらもセッティングしておくと良いかと思います。このレッスンではメタ情報の埋め込み方法を学びました。

HTML&CSSでWebサイトを作ってみよう!

HTMLとCSSについての断片的な知識だけではウェブサイトを構築することはなかなか難しいでしょう。そこでこのコースでは、架空のサイトを実際に構築しながら、シチュエーションに合わせたHTMLとCSSの使い方について学んでいきます。実際のWeb制作の現場でどのようにHTMLとCSSが使われているかを確認しながら、実践的なスキルを習得しましょう。

3時間28分 (31 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月19日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。