HTMLのheadに書くこと

2024/05/01

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

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

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

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

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

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

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

私が必要だと思うのは

文字コードの指定
<meta charset="utf-8"/>
HTML内に書いた文字の文字コードです。日本人なら必須。
viewportの設定
<meta name="viewport" content="width=device-width, initial-scale=1"/>
デバイスによる見え方の差異を埋めてくれます。
タイトル
<title>タイトル</title>
検索時に見えるタイトルです。
メタデスクリプション
<meta name="description" content="ページの内容を100文字以内で"/>
検索時のちょっとした説明です。
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-02 08:03
＊コメント＊

HTMLのheadタグ、初心者にも分かりやすく解説ありがとうございます！特にmetaタグの説明が丁寧で助かります。 Twitterカードの設定方法まで網羅されていて、情報量満点ですね。今後もぜひ役立つ情報を発信してください！
HTMLのheadタグ、初心者にも分かりやすく解説ありがとうございます！特にmetaタグの説明が丁寧で助かります。 Twitterカードの設定方法まで網羅されていて、情報量満点ですね。今後もぜひ役立つ情報を発信してください！
＊コメント＊
可信　なみ
更新日：2024-05-02 15:07
＊コメント＊

凄く分かりやすい！紹介して頂けると、自分の理解度を確認することができるので、とても助かります✨ Twitterカードは知らなかったので、勉強になりました！
凄く分かりやすい！紹介して頂けると、自分の理解度を確認することができるので、とても助かります✨
Twitterカードは知らなかったので、勉強になりました！
＊コメント＊
吉村　せいこ
更新日：2024-05-04 07:16
＊コメント＊

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