HTMLのheadに書くこと

date_range 2024/05/01
池田 駿
_8cb5466d-5264-4189-a93d-a2ebc2dbe506

セマンティックなHTMLコードを

心掛けて今日もコーディングしていました、

WEBプログラマーコース池田駿です。

今日はHTMLファイルのhead内に書くことを纏めておきたいと思います。

headタグとはユーザからは直接見えない、文書の概要

を記述するタグであり、書く内容が大体いつも一緒なので

WEBプログラマーコースの方々を始め、
HTMLを記述する機会のある皆さんに共有しておきます。

私が必要だと思うのは

  1. 文字コードの指定
    <meta charset="utf-8"/>
    HTML内に書いた文字の文字コードです。日本人なら必須。
  2. viewportの設定
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    デバイスによる見え方の差異を埋めてくれます。
  3. タイトル
    <title>タイトル</title>
    検索時に見えるタイトルです。
  4. メタデスクリプション
    <meta name="description" content="ページの内容を100文字以内で"/>
    検索時のちょっとした説明です。
  5. Twitterカード
    <meta name="twitter:card" content="カードの種類"/>
    <meta name="twitter:site" content="Twitterのユーザ名"/>
    <meta name="twitter:title" content="ページのタイトル"/>
    <meta name="twitter:description" contet="ページの説明文"/>
    <meta name="twitter:image" content="画像"/>
    Twitterでリンクが張られたときに見栄えが良くなります。

このあたりだと思います。

細かい設定は毎回異なると思うので、ここにあるキーワード
(例:HTML 文字コードの指定)で調べてみてくださいね

それでは!

*COMMENT*

  • 高橋 力都

    高橋 力都

    更新日:2024-05-01 18:00

    *コメント*

    お疲れ様です。

    普段、書いていても、<head>内って何を書くんだけ?と、たまーに抜けたりしますよね。
    このように、一覧にまとめておくと、いざって時に役立つと思ったりします。

    第二弾の記事、楽しみにしています!

    *コメント*

  • 佐伯 しょうこ

    佐伯 しょうこ

    更新日:2024-05-01 18:11

    *コメント*

    こうして改めてご紹介いただくと、より意味がわかり習得に役立つなぁとしみじみ読ませていただきました。
    恥ずかしながらTwitterカードについては知りませんでしたので勉強したいと思います。

    *コメント*

  • 大橋 秀一郎

    大橋 秀一郎

    更新日:2024-05-01 18:35

    *コメント*

    情報共有ありがとうございます!
    こちら活動日記は、見出しと本文が等間隔で並んでいるのに、読みやすいですね。インデントのおかげでしょうか。
    学ばれた事をしっかり理解されているものとお見受けしました。
    テキストで分かりやすい表現ができる人は、WEBサイト制作においても分かりやすくコーディングできる人だと信じています。
    次回の情報共有も、期待しております!

    *コメント*

  • 水落 えり

    水落 えり

    更新日:2024-05-01 23:11

    *コメント*

    駿くん、HTMLのhead部分に記述すべき項目をまとめていただき、ありがとうございます!!
    WEBサイトを作成する上で、非常に参考になる内容でした。

    3. タイトル は私でも見てるようで記憶に残っています✨
    あっこれ見たことあると嬉しくなりました!!

    特に最近ではSNSでの情報拡散が重要視されているため、Twitterカードの設定は欠かせないポイントになってきますね!!
    このように、WEBサイト構築時の要件は日々変化しているのですね!

    プログラミングでは細かい設定を一つ一つ抑えていくことが大切に見えます。
    次回の駿くんの投稿も楽しみに待ってます✨

    *コメント*

  • 野村 健人

    野村 健人

    更新日:2024-05-02 07:57

    *コメント*

    OWLetだとheadタグを触ることがほとんどないので、何が記述されているのか、何が書かれていないといけないのか忘れがちです。
    定期的にコードの中身を見ることや、この記事のようにまとめておくとわかりやすくて良いですね!

    *コメント*

  • 恩田 かおり

    恩田 かおり

    更新日:2024-05-02 08:03

    *コメント*

    HTMLのheadタグ、初心者にも分かりやすく解説ありがとうございます! 特にmetaタグの説明が丁寧で助かります。 Twitterカードの設定方法まで網羅されていて、情報量満点ですね。 今後もぜひ役立つ情報を発信してください!

    *コメント*

  • 可信 なみ

    可信 なみ

    更新日:2024-05-02 15:07

    *コメント*

    凄く分かりやすい!紹介して頂けると、自分の理解度を確認することができるので、とても助かります✨
    Twitterカードは知らなかったので、勉強になりました!

    *コメント*

  • 赤塚 亮太

    赤塚 亮太

    更新日:2024-05-02 19:47

    *コメント*

    お疲れ様です!
    普段テンプレのままであまり考えることがないheaddですがとても重要であり知っておかないとですね!
    またHTMLの基礎をぜひアウトプットしていただきたいです!
    楽しみにしております!

    *コメント*

  • 吉村 せいこ

    吉村 せいこ

    更新日:2024-05-04 07:16

    *コメント*

    head、普段全然触らないので忘れかけていました。
    せっかく学んだ事を忘れないため、時代に置いてかれないためにも常に学ぶ姿勢が大切だなと気づかされます!

    *コメント*

*コメント*

*ログイン*

メールアドレス
パスワード