web-dev-qa-db-ja.com

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

Divをheadに配置してdisplay：noneにすると、JavaScriptを使用してそれを表示しますが、これは機能しますか？

編集：

AJAXにロードされたものがあります。そして、私のAJAXがサイトの「メイン」部分を変更するので、メタタグも変更したいと思います。

javascriptjquerymeta-tags
91
TIMEX

はい、できます。

興味深い使用例がいくつかあります。一部のブラウザーとプラグインは、メタ要素を解析し、異なる値に合わせて動作を変更します。

例

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

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

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

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

Google Chromeフレーム

<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>

したがって、検索エンジンだけではありません。

156
fuxia

はい、そうです。

例えば。メタ記述を設定するには：

document.querySelector('meta[name="description"]').setAttribute("content", _desc);
103
jayms

次のようなものを使用します（jQueryを使用）：

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

しかし、メタタグは通常、ドキュメントが読み込まれたときにのみスクリッピングされ、通常はJavaScriptを実行しないため、ほとんど意味がありません。

65
MiffTheFox

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

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

does google said なので、#!hashesおよび_escaped_fragment_呼び出しを介してajaxコンテンツのインデックスを作成することは重要だと思います。そして今、彼らはcanそれを確認します（自動的に、ヘッドレスブラウザーでも、上記のページの「HTMLスナップショットの作成」リンクを参照してください）。

33
eyedmax

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がこれらのクライアント側の変更をインデックス化することを確認しました。

18
Tim Moses

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

11
futtta

次のようにできるはずです（または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>
11
Mikael Svenson
$(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">');
});
10
user3320390
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';
}
5
LanPartacz

各メタタグの例に対する単純なaddおよびdiv属性

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

これで、exの通常の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
Burhan Ibrahimi

いいえ、divはhead要素ではなくbody要素です

編集：それから、SEが取得しようとしているのはajaxが変更したHTMLではなく、ベースHTMLだけです。

1
Ben

はい、Javascriptでメタタグを追加できます。私の例でやった

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

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

1
Chamilyan

これをインデックスに入れる

<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();

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

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

0
sunto

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

var _desc = 'Out description';
var meta = document.createElement('meta');
meta.setAttribute('name', 'description');
meta.setAttribute('content', _desc);
document.getElementsByTagName('head')[0].appendChild(meta);
0
Roman

これは、モバイルと他のブラウザーの両方でほとんど変更せずに実行する必要がある、少し厳密に幾何学的に設定されたアプリで機能しているようです。そのため、モバイル/非モバイルブラウザーのステータスを確認し、モバイルではビューポートをデバイス幅に設定する必要があります。スクリプトはヘッダーから実行できるため、ヘッダーの以下のjsは、ページがロードされる前にdevice-widthのメタタグを変更するようです。 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">

。 。 。 。 。 。

0
jcj52436999