実践コーディングスキル - 第1章 Lesson1

第1回:サイト情報を設定するmetaタグを入力してみよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

<meta>タグを利用して、ウェブサイトの説明文やキーワードの設定方法を初心者向けに解説しています。
ここでは、仮想のクリニックサイトの説明文とキーワードを設定していきます。



この動画で学べること

・ページに必要な情報を記述する方法



ページに必要な情報を記述していこう

ページに必要なタイトルやディスクリプションの設定をしていきましょう。
まず、タイトルを<head>の中の<meta charset="UTF-8">の次に記述していきます。



<title>ネストクリニック 丨 まごころと優しさを大切に</title>



保存してブラウザで見てみましょう。
<body>の中にはまだ何も書いていないので画面は真っ白ですが、タブの部分を見ると、設定したタイトルが入っていることがわかります。
では次に<meta>タグを使ってディスクリプションの設定をしていきましょう。
<meta>タグのname属性に「description」記述すると、サイトの説明を定義することができます。


<meta name="description" content="まごころと優しさをモットーに患者さんに寄り添った施術を。清潔感溢れるクリニックです。">



最後に、キーワードの設定をしましょう。
先ほどかいたディスクリプションの<meta>タグをコピーし、キーワードに書き換えていきます。
name属性を「keywords」に変更し、キーワードを書きましょう。
キーワードが複数あるときは「,(カンマ)」で区切ることを忘れないようにしましょう。


<meta name="keywords" content="ネストクリニック,病院">



保存してブラウザで見てみましょう。
ディスクリプションやキーワードを設定しても、画面上の変化はありません。
ですが、記述したことはちゃんと定義されています。