JavaScriptを使用してページのメタタグを変更することは可能ですか？

112

divをheadとdisplay：noneに入れた場合、JavaScriptを使用して表示した場合、これは機能しますか？

編集：

AJAXに読み込まれたものがあります。また、私のAJAXがサイトの「メイン」の部分を変更するので、メタタグも変更したいと考えています。

javascript  jquery  meta-tags 
— タイメックス
ソース
47
それは帽子として靴を履くようなものです
— ベン
8
またはIDEとしてテキストエディタを使用します。待つ必要はありません。
— Dan Rosenstark、2010
23
あなたは正しいです私は愚かです
— TIMEX
2
こんにちはTIMEX、多分受け入れられた答えの変更がその場所にありますか？バイロンに時代遅れの答えに対する反対投票をやめる以外に理由がないのなら。
— アレックス
1
これを実行して、JavaScriptタグフレームワークでメタタグ（特にog）を管理し、クローラー用にプリレンダーエンジンにこれを書き込み/キャッシュさせます。それ以外の場合は、SPAのインデックスをレンダリングする前に、APIからタグを特定するために追加のミドルウェアが必要です。これにより、読み込みが遅くなります。1つは、...
— Soft Bullets

回答:

160

はい、できます。

いくつかの興味深いユースケースがあります：一部のブラウザとプラグインはメタ要素を解析し、異なる値に応じてそれらの動作を変更します。

例

Skype：電話番号パーサーをオフにする

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">

iPhone：電話番号パーサーをオフにする

<meta name="format-detection" content="telephone=no">

Google Chrome Frame

<meta http-equiv="X-UA-Compatible" content="chrome=1">

モバイルデバイスのビューポート定義

<meta name="viewport" content="width=device-width, initial-scale=1.0">

これはJavaScriptで変更できます。参照：iPhoneビューポートスケールのバグの修正

メタ記述

一部のユーザーエージェント（たとえば、Opera）は、ブックマークの説明を使用します。ここにパーソナライズされたコンテンツを追加できます。例：

<!DOCTYPE html>
<title>Test</title>
<meta name="description" content="this is old">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>

<button>Change description</button>

<script type='text/javascript'>
$('button').on('click', function() {
    // Just replacing the value of the 'content' attribute will not work.
    $('meta[name=description]').remove();
    $('head').append( '<meta name="description" content="this is new">' );
});
</script>

つまり、検索エンジンだけではありません。

— フクシア
ソース
9
このようなほとんどのメタには、ページが読み込まれた後に変更できない影響があると思います。しかし、はい、メタは単なるkeywordsとをはるかに超えていdescriptionます。
— ボビンス2010
2
@bobince：実際、jsを使用してSKYPE_TOOLBARを挿入すると、SKYPE_TOOLBARが引き続き有効になります（html5バリデーターがそのメタタグを好まないため便利です）。
— DaedalusFall
1
@DaedalusFall：ええ、それdocument.writeはヘッダーでしかできないと思いますが、Skypeが既にDOMを壊してしまっているので、ページが読み込まれてから変更するのは遅すぎます。
— ボビンス
1
これは、Facebookなどのサービスとのソーシャル共有で非常に役立ちます。たとえば、og：title要素を変更するには： $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');
— bdanin
2
これでクールなことができます。ヘッダーのスライドが変わると、Chromeアドレスバーの色が変わります。const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);Android上のChromeが更新を検出して色を変更します
— Dominic Bartl
148

はい、そうです。

たとえば、メタ説明を設定するには：

document.querySelector('meta[name="description"]').setAttribute("content", _desc);
— ジェイムス
ソース
23
純粋なjsで誰かが答えてくれてうれしい（質問でリクエストされたとおり）！
— ソフトブレット
こんにちは。先端をありがとう。しかし、この方法を試してog：titleタグを変更しようとしましたが、機能しませんでした。ここに私がそれをした方法があります：document.querySelector（ 'meta [name = "og：title"]'）。setAttribute（ "content"、 "Example with meta meta tag"）; 何か案は？
— ホルヘマウリシオ
1
property属性ではなく属性を照会する必要があるようですname。つまり、meta[property="og:title"]
— jayms
69

あなたは（jQueryで）のようなものを使うでしょう：

$('meta[name=author]').attr('content', 'New Author Name');

ただし、通常はJavaScriptを実行せずにドキュメントが読み込まれたときにのみメタタグがスクレイピングされるため、これはほとんど無意味です。

— MiffTheFox
ソース
7
$('meta[property=og:somestuff]')コロンのせいでjQuery選択構文と衝突するのではないかと私は思ったようなセレクターでも動作します。
— pau.moreno
8
他の誰かがこの正確な解決策を探している場合は、og：somestuffを引用符で囲む必要があります。イメージタグのコンテンツが必要でした。これは私のコードです。var imgurl = $（ "meta [property = 'og：image '] "）。attr（"コンテンツ "）;
— ダニエル
2
メタビューポート設定で機能することを確認しました（jQuery Mobileの特定のサブページのズームを有効/無効にするために必要です）。ありがとう！
— NPC
1
@stealthcopterこれが確認できないことを確認できます:(待ってください、しかし、変更はFFoxの「ソースの表示」ウィンドウに表示されません..？
— yPhil
1
@yPhilこれはjavascript（またはjQuery）であるため、DOMに加えたすべての変更は、ブラウザからソースコードを表示したときに反映されません。これは、開発者ツールを使用してソースを表示したときに反映されます。ブラウザのソースは、ページが読み込まれるときに1回だけ読み込まれます。ajaxリクエストリクエストはページの読み込みではありません。
— Zubair1 2017
34

たとえば、次のようなjQuery呼び出しでメタを変更できます。

$('meta[name=keywords]').attr('content', new_keywords);
$('meta[name=description]').attr('content', new_description);

google は ajaxコンテンツをとを介してインデックスに登録すると言っているので、今のところ問題はないと思います。そして今、彼らはそれを検証することができます（ヘッドレスブラウザーでも自動的に、上記のページの「HTMLスナップショットを作成する」リンクを参照してください）。#!hashes_escaped_fragment_

— アイドマックス
ソース
3
これありがとう。ちょうど私の問題を解決しました。Facebookのように開いたグラフがあります。私が開発しているサイトには、履歴jQueryプラグインとハッシュタグがあります。したがって、ハッシュの変更が存在する場合は常に、FBオープングラフのURLと説明を変更する必要があります。+1は素晴らしい答えであり、公正な質問に対して否定的ではありません。
— Damien Keitel
5
実際、GoogleはJavaScriptも実行できるようになりました。ページのスナップショットを作成する必要がないため、動的メタタグが重要になります。
— Francesco Abbruzzese 2014年
33

Javascriptを使用してページのメタタグを変更することは間違いなく可能です。これはJavaScriptのみのアプローチです：

document.getElementsByTagName('meta')["keywords"].content = "My new page keywords!!";
document.getElementsByTagName('meta')["description"].content = "My new page description!!";
document.title = "My new Document Title!!";

上記のコードに対して、Googleがこれらのクライアント側の変更をインデックスに登録することを確認しました。

— ティム・モーゼス
ソース
3
面白い！element = collection[name]構文を知ってくれてありがとう。
— jayms
11

メタタグはdomの一部であり、アクセスおよび変更できますが、検索エンジン（メタタグの主な利用者）は、JavaScriptが実行されないため、変更を認識しません。したがって、ブラウザに影響を与えるメタタグ（更新が頭に浮かぶ）を変更しない限り、これはほとんど役に立ちませんか？

— ふった
ソース
3
+1-特にメタリフレッシュについて疑問に思っていたため、この質問にたどり着きました。画面上のデータを更新するためにajaxポーリングを使用するアプリを作成しています。JavaScriptが有効になっていないブラウザーに大まかなフォールバックを提供したいと考えています。デフォルトでメタリフレッシュタグを作成することでこれを達成できると考えています。JavaScriptが有効になっている場合は、メタタグを削除するだけです。-次に、実際に機能するかどうかを確認します...
— jessegavin '15年
@futtta、メタ説明タグはOperaのブックマーク説明に使用されるため、実際にはユーザーにメタ説明を変更できるという利点があります。
— XP1 2011
11

次のようにすることができます（またはjQueryのように使用します$('meta[name=author]').attr("content");）。

<html>
<head>
<title>Meta Data</title>
<meta name="Author" content="Martin Webb">
<meta name="Author" content="A.N. Other">
<meta name="Description" content="A sample html file for extracting meta data">
<meta name="Keywords" content="JavaScript, DOM, W3C">

</head>

<body>
<script language="JavaScript"><!--
if (document.getElementsByName) {
  var metaArray = document.getElementsByName('Author');
  for (var i=0; i<metaArray.length; i++) {
    document.write(metaArray[i].content + '<br>');
  }

  var metaArray = document.getElementsByName('Description');
  for (var i=0; i<metaArray.length; i++) {
    document.write(metaArray[i].content + '<br>');
  }

  var metaArray = document.getElementsByName('Keywords');
  for (var i=0; i<metaArray.length; i++) {
    document.write(metaArray[i].content + '<br>');
  }
}
//--></script>
</body>

</html>
— ミカエル・スベンソン
ソース
10 
$(document).ready(function() {
  $('meta[property="og:title"]').remove();
  $('meta[property="og:description"]').remove();
  $('meta[property="og:url"]').remove();
  $("head").append('<meta property="og:title" content="blubb1">');
  $("head").append('<meta property="og:description" content="blubb2">');
  $("head").append('<meta property="og:url" content="blubb3">');
});
— user3320390
ソース
6
私はあなたの例から始めましたが、メタタグを削除して再度追加する必要がないことに気付きました。あなたはこのようにコンテンツ属性を変更することができますjQuery('meta[property="og:title"]').attr('content', "blubb1");
— トビアスBeuving
あなたは正しい@ user3320390です。タグを削除するのは、変更するのとは異なります。FBは、HTMLの記述内容に作用し、タグの値には作用しません。
— ペドロフェレイラ2016年
5 
var metaTag = document.getElementsByTagName('meta');
for (var i=0; i < metaTag.length; i++) {
    if (metaTag[i].getAttribute("http-equiv")=='refresh')
        metaTag[i].content = '666';
    if (metaTag[i].getAttribute("name")=='Keywords')
        metaTag[i].content = 'js, solver';
}
— LanPartacz
ソース
2

各メタタグの例への単純な追加およびdiv属性

<meta id="mtlink" name="url" content="">
<meta id="mtdesc" name="description" content="" />
<meta id="mtkwrds" name="keywords" content="" />

今、元の通常のdivの変更のように。nクリック

<a href="#" onClick="changeTags(); return false;">Change Meta Tags</a>

jQueryによる関数変更タグ

function changeTags(){
   $("#mtlink").attr("content","http://albup.com");
   $("#mtdesc").attr("content","music all the time");
   $("#mtkwrds").attr("content","mp3, download music, ");

}
— ブルハン・イブラヒミ
ソース
2

メタタグがない場合は、以下を使用できます。

var _desc = 'Out description';
var meta = document.createElement('meta');
meta.setAttribute('name', 'description');
meta.setAttribute('content', _desc);
document.getElementsByTagName('head')[0].appendChild(meta);
— ローマ人
ソース
2

og：titleメタタグ（またはその他）を変更しようとするユーザー向け。私はこの方法でなんとかできました：

document.querySelector('meta[property="og:title"]').setAttribute("content", "Example with og title meta tag");

'meta [property = "og：title"]'には、NAMEではなくPROPERTYという単語が含まれていることに注意してください。

— ホルヘ・マウリシオ
ソース
1

いいえ、divはbody要素であり、head要素ではありません

編集：SEが取得するのはベースHTMLのみであり、ajaxで変更されたHTMLではありません。

— ベン
ソース
これが正しくないことを願っています。
— David Spector
1

はい、Javascriptでメタタグを追加することは可能です。私の例では

Androidはメタタグの削除を尊重していませんか？

しかし、私はそれを他に変更してから削除する方法がわかりません。ところで、私の例では、「追加」ボタンをクリックすると、タグが追加され、ビューポートがそれぞれ変更されますが、元に戻す方法がわかりません（Androidでは削除します）。Android用のFirebugがあったらいいので、私は何が起こっているのかを見ました。Firefoxはタグを削除します。誰かがこれについて何か考えを持っているなら、私の質問にそのように注意してください。

— チャミリアン
ソース
0

これを索引に入れてください

<link rel="opengraph" href="{http://yourPage.com/subdomain.php}"/>

これをajaxfiles og：type "og：title" og：descriptionとog：imageに入れます

これも追加します

<link rel="origin" href={http://yourPage.com}/>

次に、ajaxCallの後にjsを追加します

FB.XFBML.parse();

編集：正しいタイトルと画像をtxt / php doumentsでfacebookに表示できます（私は拡張子として.phpという名前ですが、より多くのtxtファイルです）。次に、これらのファイルにメタタグを付け、すべてのドキュメントのインデックスに戻るリンクと、すべてのサブファイルのインデックスファイルにメタリンクを付けます。

誰かがこれを行うより良い方法を知っているなら、私は追加を感謝します:)

— サント
ソース
これは、メタタグを動的に追加する方法についての質問に対する回答ではないようです。
— アレックス
0

これは、ほとんど幾何学的に設定されていないアプリで、モバイルと他のブラウザーの両方でほとんど変更なしで実行する必要があるため、モバイル/非モバイルブラウザーのステータスを検索し、モバイルでビューポートをデバイス幅に設定する必要があります。ヘッダーからスクリプトを実行できるため、ヘッダー内の以下のjsは、ページがロードされる前にデバイス幅のメタタグを変更するようです。navigator.userAgentの使用は実験的なものとして規定されていることに注意してください。スクリプトは、変更するメタタグエントリに従う必要があるため、最初のコンテンツを選択してから、何らかの条件で変更する必要があります。 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>  
  var userAgentHeader = navigator.userAgent ; 
  var browserIsMobileOrNot = "mobileNOT" ; 
  if( userAgentHeader.includes( "Mobi" ) ) { 
    browserIsMobileOrNot = "mobileYES" ; 
    //document.querySelector('meta[name="viewport"]').setAttribute( "content", "width=device-width, initial-scale=1.0" );
  } else { 
    browserIsMobileOrNot = "mobileNOT" ;  
    document.querySelector('meta[name="viewport"]').setAttribute( "content", "");
  }
</script>

<link rel="stylesheet" href="css/index.css">

。。。。。。

— jcj52436999
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.