コース: HTMLとCSSでWebサイトを作ってみよう

今すぐコースを受講しましょう

今すぐ登録して、24,700件以上登録されている、業界エキスパート指導のコースを受講しましょう。

メタ情報を埋め込もう

メタ情報を埋め込もう

このレッスンではメタ情報の 埋め込みについて学びます。 メタ情報とは表に見える所には 出てきませんけれども ソーシャルネットワークサービスで シェアされた際や 検索エンジンなどに情報を伝えるのに 便利な情報です。 では 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…

目次