現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

ドキュメント

【JavaScript入門】document.titleとは?ページタイトルの取得・変更方法を初心者向けに解説

投稿日:2019年5月2日 更新日:

JavaScriptのdocument.titleとは?ページタイトルの取得・変更方法を初心者向けに解説

document.title は、HTML 文書の <title> タグに設定されている「ページタイトル」を取得・変更するためのプロパティです。
ブラウザのタブに表示されるタイトルを動的に変更したいときに利用できます。



document.titleとは?

document.title は、HTML 文書のタイトルを参照・設定するためのプロパティです。

document.title;
document.title = “新しいタイトル”;

対象となるのは、HTML の次の部分です:

<title>ページタイトル</title>

この値を JavaScript から読み取ったり、書き換えたりできます。



使用例

例1:ページタイトルを表示する

document.write(“タイトル:” + document.title);

→ 現在のページタイトルがそのまま表示されます。

例2:タイトルを変数に代入する

docTitle = document.title;

→ ページタイトルが変数 docTitle に代入されます。

例3:ページタイトルを動的に変更する

document.title = “JavaScript学習ページ”;

→ ブラウザのタブに表示されるタイトルが変更されます。

document.title を使うメリット

  • ページ内容に応じてタイトルを動的に変更できる
  • ユーザーの操作に合わせてタイトルを変える演出が可能
  • SPA(シングルページアプリ)などでよく利用される

注意点

  • SEO の観点では、タイトルの動的変更は慎重に行う必要がある
  • 検索エンジンは基本的に初期タイトルを評価する
  • ユーザーが混乱しないよう、意味のある変更にとどめることが重要



まとめ

  • document.title はページタイトルを取得・変更するプロパティ
  • ブラウザのタブに表示されるタイトルを動的に変更できる
  • SEO への影響を考慮しつつ適切に利用することが大切

関連リンク

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。
レンタルサーバー エックスサーバー

-ドキュメント
-

執筆者:

関連記事

【JavaScript入門】document.openとdocument.closeの使い方|書き出し処理の仕組みと注意点を解説

JavaScriptのdocument.openとdocument.closeとは?使い方・注意点を初心者向けに解説 document.open() と document.close() は、HTML …

【JavaScript入門】document.domainとは?ドメイン名の取得方法と使い方を初心者向けに解説

JavaScriptのdocument.domainとは?ドメイン名の取得方法と使い方を初心者向けに解説 document.domain は、現在表示している HTML ドキュメントが属する「ドメイン …

【JavaScript入門】document.getSelectionとは?選択中の文字列を取得する方法を初心者向けに解説

JavaScriptのdocument.getSelectionとは?選択中の文字列を取得する方法を初心者向けに解説 document.getSelection() は、ユーザーがマウスやキーボード操 …

【JavaScript入門】linkColor・alinkColor・vlinkColorとは?リンク色の変更方法と注意点を初心者向けに解説

JavaScriptのlinkColor・alinkColor・vlinkColorとは?リンク色の変更方法を初心者向けに解説 document.linkColor、document.alinkCol …

【JavaScript入門】document.lastModifiedとは?ページ最終更新日の取得方法を初心者向けに解説

JavaScriptのdocument.lastModifiedとは?ページの最終更新日を取得する方法を解説 document.lastModified は、現在表示している HTML ファイルの「最 …