HTML/CSS

HTMLでタイトルを設定する方法

皆さんはWebサイトで公開するページにタイトルを付けていますでしょうか?WordPressなどのCMSでは、自動で設定してくれたり、付け忘れていたらプラグインなどが警告文などで知らせてくれます。

しかし、CMSなどを利用せず1から作成する場合タイトルタグを付け忘れるとSEO対策漏れで上位検索にヒットしない可能性があります。これはとても勿体ないことなので、必ずタイトルを付けましょう。

本記事では、HTMLでタイトルを付ける方法について解説しています。

ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】

先輩くん
先輩くん
年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ!
後輩ちゃん
後輩ちゃん
100%自社内開発の求人だから、SESのように職場環境が変わらないのがいいね!
簡単30秒で無料登録!

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

タイトルを設定する方法

タイトルを設定する方法はとても簡単で、<head>タグ内に下記のコードを追加することで設定が完了します。

<title>ここにタイトルを記述</title>

タイトルの文字数は30文字以内が推奨されています。

タイトルが正しく設定されているか確認する方法

タイトルを設定してみたけど、正しく設定できているか分からなくて不安。。という方ご安心ください。タイトルが正しく設定されているかを確認をする方法を解説します。

確認するサンプルコードは以下のとおりです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タイトルだよー!!</title>
</head>
<body>
</body>
</html>

タイトル確認したいhtmlファイルをブラウザで開き、タブに記載されている文字を確認します。この文字がタイトルと同じであれば、正しく設定されています。

タイトル設定OK

しかし、タイトルではなくファイル名が表示されている場合は正しく設定できていません。閉じタグを忘れていないか、<head>タグ内に記述しているかなどを確認しましょう。

タイトル設定NG

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村