jQuery / metaタグの値を取得する

jQuery

作成日 2026-10-26 最終更新日 2026-10-26

metaタグを選択して.attr("content")を呼ぶと値を取得できます。説明なら$('head meta[name="description"]').attr("content")です。Open Graphのog:titleはnameではなくpropertyで選びます。

識別属性と値の属性

meta要素は文書に関する付加情報、メタデータを提供します。name="description"のnameは種類、contentは値です。段落のような内部文字列ではないため.text()やフォーム用.val()ではなく.attr("content")を使います。

Open Graphはproperty="og:title"を使います。name="og:title"は違う属性なので一致しません。文字コードはcharset自体を読みます。全metaにcontentがあると考えず実際のHTMLを見ます。

JavaScript文字列を単一引用符、属性値を二重引用符にすると固定選択子が読みやすくなります。この処理のために外部入力から任意の選択子を組み立てる必要はありません。

ブラウザーで動く完全な例

全コードをUTF-8のmeta-demo.htmlへ保存しブラウザーで開きます。インターネットで公式jQueryファイル4.0.0を読みます。サーバーや導入は不要です。取得、重複、更新後の取得、復元をWindows Edge、3.7.1・4.0.0で実行しました。

demo-emptyとdemo-no-contentは空と属性欠落の診断用です。contentなしのnameメタを正しい公開用記述にしません。og:title一つも完全なOpen Graph設定ではありません。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Original page summary">
  <meta property="og:title" content="Meta demo">
  <meta name="demo-empty" content="">
  <meta name="demo-no-content">
  <title>Read meta attributes</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 20px; }
    button { font: inherit; margin: 4px; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Read the current document's metadata</h1>
  <button type="button" id="read">Read current DOM</button>
  <button type="button" id="update">Update existing description</button>
  <button type="button" id="duplicate">Add duplicate</button>
  <button type="button" id="remove">Remove description</button>
  <button type="button" id="reset">Reset</button>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      function descriptions() { return $('head meta[name="description"]'); }
      function report() {
        const $description = descriptions(), allValues = [];
        $description.each(function () { allValues.push($(this).attr("content")); });
        const $absent = $('head meta[name="does-not-exist"]');
        $("#result").text([
          "description=" + String($description.attr("content")),
          "description count=" + $description.length,
          "all descriptions=" + JSON.stringify(allValues),
          "og:title=" + $('head meta[property="og:title"]').attr("content"),
          "empty=" + JSON.stringify($('head meta[name="demo-empty"]').attr("content")),
          "missing content=" + String($('head meta[name="demo-no-content"]').attr("content")),
          "absent count=" + $absent.length + "; content=" + String($absent.attr("content")),
          "charset=" + $('head meta[charset]').attr("charset")
        ].join("\n"));
      }
      $("#read").on("click", report);
      $("#update").on("click", function () {
        descriptions().attr("content", "Updated <em>summary</em>"); report();
      });
      $("#duplicate").on("click", function () {
        $("<meta>").attr({ name: "description", content: "Second summary" }).appendTo("head");
        $(this).prop("disabled", true); report();
      });
      $("#remove").on("click", function () { descriptions().remove(); report(); });
      $("#reset").on("click", function () {
        descriptions().remove();
        $("<meta>").attr({ name: "description", content: "Original page summary" }).appendTo("head");
        $("#duplicate").prop("disabled", false); report();
      });
      report();
    });
  </script>
</body>
</html>

初期結果です。content=""は空文字、属性や要素がなければundefinedです。要素の有無はlengthで別に確認します。

description=Original page summary
description count=1
all descriptions=["Original page summary"]
og:title=Meta demo
empty=""
missing content=undefined
absent count=0; content=undefined
charset=utf-8

Read current DOMで再取得します。初期descriptionはOriginal page summary、count=1です。
Add duplicateで2個になります。先頭取得は同じで、全配列は["Original page summary","Second summary"]です。
Update existing descriptionは一致する全descriptionをUpdated <em>summary</em>にします。.text()表示なのでem要素は作りません。
Remove descriptionでcount=0、description=undefined、all descriptions=[]です。その後Updateしても存在しないタグは作りません。
Resetはdescription一個を復元し、charset・viewport・og:titleなどは維持します。

空・欠落・重複の処理

if(value)だけでは空文字とundefinedを同じに扱います。要素は$meta.length、属性欠落はvalue === undefined、空値はvalue === ""で区別します。"undefined"という文字列をデータに保存しません。例のString()は診断表示だけです。

.attr("content")は最初の一致だけを読み、重複の統合や最新の選別はしません。例は.each()で全値を集め、数と順番を表示します。最初が読めたから正常とせず、テンプレートやSEO設定の重複原因を調べます。

.attr("content", value)は一致した全要素を変更します。Updateは現在DOMを読むことを観察する実習です。読むだけなら第二引数を渡しません。実サイトではテーマやSEOプラグインの管理値を無断で上書きしません。

空白も文字列に残ります。正規化する前に意味を決め、表示は.text()を使って他の処理でHTML解釈しないようにします。

現在DOMとサーバー原文

対象は実行中のDOM（Document Object Model）です。他のスクリプトがcontentを変えれば変更後の値を読み、最初のサーバー応答は変わりません。非同期追加なら完了後か更新箇所で再取得します。DOM準備は全非同期処理の完了ではありません。

開発者ツールのElementsのheadとソース表示を比較します。値を取得・変更しただけで検索結果や共有表示が更新されたとは判断しません。GoogleのJavaScript SEO資料もクロール・描画・索引を分けるため、実収集は各サービスのツールで確認します。

現在文書の選択子は別URLへの通信をしません。別ページには許可された別のHTML取得手順が必要です。この例が任意サイトのメタ取得を可能にするわけではありません。

jQuery