JavaScriptでtitleとdescriptionを書き換える方法

titleを書き換える｜document.title

JavaScriptを使用して、ウェブページのタイトルを書き換えるには、以下のように書きます。

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

このコードでは、documentオブジェクトのtitleプロパティを変更して、新しいタイトルを設定しています。例えば、次のようにすることで、タイトルを”Hello, World!”に変更することができます。

document.title = "Hello, World!";

タイトルが変わりました…！

descriptionを書き換える｜getAttribute

JavaScriptを使用して、ウェブページのdescriptionメタタグの内容を書き換えるには、以下のように書きます。

var metaTags = document.getElementsByTagName("meta");
for (var i = 0; i < metaTags.length; i++) {
  if (metaTags[i].getAttribute("name") == "description") {
    metaTags[i].setAttribute("content", "新しいdescription");
  }
}

このコードでは、getElementsByTagNameメソッドを使用して、すべてのメタタグを取得し、その中でname属性が”description”のメタタグを探しています。setAttributeメソッドを使用して、”content”属性を新しい説明に設定します。

例えば、次のようにすることで、descriptionを”私の素晴らしいウェブページ”に変更することができます。

var metaTags = document.getElementsByTagName("meta");
for (var i = 0; i < metaTags.length; i++) {
  if (metaTags[i].getAttribute("name") == "description") {
    metaTags[i].setAttribute("content", "私の素晴らしいウェブページ");
  }
}

このコードでは、getElementsByTagNameメソッドを使用して、すべてのメタタグを取得し、その中でname属性が”description”のメタタグを探して、setAttributeメソッドを使用して、”content”属性を新しい説明に設定します。

シンプルに書き換えると下記のようになります。

document.querySelector('meta[name="description"]').setAttribute('content', '私の素晴らしいウェブページ');

この方法では、ループを使わずに直接必要なmetaタグを選択して、その属性を変更することができます。

まとめ

以上のように、JavaScriptを使用して、タイトルとdescriptionを書き換えることができます。