Ist es möglich, JavaScript zu verwenden, um die Meta-Tags der Seite zu ändern?

111

Wenn ich ein div in den Kopf setze und Folgendes anzeige: Keine, als JavaScript zum Anzeigen zu verwenden, funktioniert dies?

Bearbeiten:

Ich habe Sachen in AJAX geladen. Und da mein AJAX den "Hauptteil" der Site ändert, möchte ich auch die Meta-Tags ändern.

javascript jquery meta-tags TIMEX
quelle
47
Das ist wie das Tragen eines Schuhs als Hut
Ben
8
oder mit einem Texteditor als Idee. Nein, warte, das gilt als cool.
Dan Rosenstark
23
Du hast recht, ich bin dumm
TIMEX
2
Hallo TIMEX, vielleicht ist eine Änderung der akzeptierten Antwort an ihrer Stelle? Wenn kein anderer Grund, als Byron eine Pause bei den Abstimmungen für seine veraltete Antwort zu geben.
Alex
1
Ich möchte dies tun, damit ich die Meta-Tags (insbesondere og) mit meinem Javascript-Framework verwalten und diese dann von meiner Prerender-Engine für Crawler schreiben / zwischenspeichern lassen kann. Andernfalls würde ich zusätzliche Middleware benötigen, um die Tags aus meiner API zu ermitteln, bevor ich den Index meines SPA rendere, was das Laden zum einen verlangsamen würde ...
Soft Bullets

Antworten:

160

Ja, das kannst du machen.

Es gibt einige interessante Anwendungsfälle: Einige Browser und Plugins analysieren Metaelemente und ändern ihr Verhalten für verschiedene Werte.

Beispiele

Skype: Schalten Sie den Parser für Telefonnummern aus

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

iPhone: Schalten Sie den Parser für Telefonnummern aus

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

Google Chrome Frame

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

Ansichtsfensterdefinition für mobile Geräte

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

Dieser kann durch JavaScript geändert werden. Siehe: Ein Fix für den Skalierungsfehler des iPhone-Ansichtsfensters

Meta-Beschreibung

Einige Benutzerprogramme (z. B. Opera) verwenden die Beschreibung für Lesezeichen. Hier können Sie personalisierte Inhalte hinzufügen. Beispiel:

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

Es geht also nicht nur um Suchmaschinen.

Fuxia
quelle
9
Ich vermute, dass die meisten Metas wie diese Effekte haben, die nach dem Laden der Seite nicht mehr geändert werden können. Aber ja, Meta ist weit mehr als nur keywordsund description.
Bobince
2
@bobince: Tatsächlich wird die SKYPE_TOOLBAR-Datei immer noch wirksam, wenn Sie sie mit js einfügen (was nützlich ist, da der HTML5-Validator dieses Meta-Tag nicht mag).
DaedalusFall
1
@DaedalusFall: Ja, ich denke, Sie können das nur mit document.writein der Kopfzeile tun , es ist zu spät, um es zu ändern, sobald die Seite geladen ist, da Skype das DOM bereits entstellt hat, schreckliche Sache!
Bobince
1
Dies ist sehr nützlich beim Teilen von sozialen Netzwerken mit Diensten wie Facebook. Zum Beispiel, um das og: title-Element zu ändern: $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');
bdanin
2
Damit kannst du ein paar coole Sachen machen. Ich ändere die Farbe der Chrome-Adressleiste, wenn sich die Folie in der Kopfzeile ändert. const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);Chrome auf Android erkennt das Update und ändert die Farbe
Dominic Bartl
148

Ja, so ist es.

ZB um die Meta-Beschreibung festzulegen:

document.querySelector('meta[name="description"]').setAttribute("content", _desc);
jayms
quelle
23
Ich bin froh, dass jemand eine Antwort in reinem js gegeben hat (wie in der Frage gefordert)!
Soft Bullets
Hallo Jayms. Danke für den Tipp. Aber ich habe diese Methode versucht, um das og: title-Tag zu ändern, aber es hat nicht funktioniert. So habe ich es gemacht: document.querySelector ('meta [name = "og: title"]'). SetAttribute ("content", "Beispiel mit title meta tag"); Irgendwelche Ideen?
Jorge Mauricio
1
Es scheint, dass Sie nach dem propertyAttribut namemeta[property="og:title"]
fragen müssen
69

Sie würden so etwas wie (mit jQuery) verwenden:

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

Dies wäre jedoch meistens sinnlos, da Meta-Tags normalerweise nur beim Laden des Dokuments gelöscht werden, normalerweise ohne JavaScript auszuführen.

MiffTheFox
quelle
7
Es funktioniert sogar mit Selektoren wie $('meta[property=og:somestuff]'), von denen ich vermutete, dass sie aufgrund des Doppelpunkts mit der jQuery-Auswahlsyntax kollidieren würden.
pau.moreno
8
Wenn jemand anderes genau nach dieser Lösung sucht, müssen Sie das og: somestuff in Anführungszeichen setzen. Ich brauchte den Inhalt des Bild-Tags. Dies war mein Code: var imgurl = $ ("meta [property = 'og: image" '] "). attr (" content ");
Daniel
2
Bestätigt, dass es für die Einstellung des Meta-Ansichtsfensters funktioniert (erforderlich, um den Zoom für bestimmte Unterseiten in jQuery Mobile zu aktivieren / deaktivieren). Vielen Dank!
NPC
1
@stealthcopter Ich kann überprüfen, ob dies nicht der Fall ist :( Warten Sie, aber die Änderungen sind im FFox-Fenster "Quelltext anzeigen" nicht sichtbar.?
yPhil
1
@yPhil Dies ist Javascript (oder jQuery), sodass alle Änderungen, die Sie am DOM vornehmen, beim Anzeigen des Quellcodes im Browser nicht berücksichtigt werden. Es wird angezeigt, wenn Sie das Entwicklertool zum Anzeigen der Quelle verwenden. Die Browserquelle wird beim Laden der Seite nur einmal geladen. Ajax-Anforderungsanforderungen sind keine Seitenladevorgänge.
Zubair1
34

Sie können Meta beispielsweise mit jQuery-Aufrufen wie den folgenden ändern:

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

Ich denke, es ist für den Moment wichtig, da Google sagte, dass sie Ajax-Inhalte über #!hashesund _escaped_fragment_Anrufe indizieren werden . Und jetzt können sie es überprüfen (sogar automatisch, mit Headless-Browsern, siehe den Link "Erstellen von HTML-Snapshots" auf der oben genannten Seite), also denke ich, dass dies der Weg für Hardcore-SEO-Leute ist.

eyedmax
quelle
3
Danke dafür. Habe gerade mein Problem gelöst. Da hat Facebook offenes Diagramm. Die Site, die ich entwickle, verfügt über ein History-jQuery-Plugin und Hash-Tags. Daher müssen die URL und die Beschreibung des offenen FB-Diagramms geändert werden, wenn eine Hash-Änderung vorliegt. +1 für eine gute Antwort und nicht negativ gegenüber einer fairen Frage.
Damien Keitel
5
Jetzt kann Google auch Javascript ausführen, ohne dass Seitenschnappschüsse erstellt werden müssen. Daher sind dynamische Metatags jetzt sehr wichtig!
Francesco Abbruzzese
33

Es ist definitiv möglich, Javascript zu verwenden, um die Meta-Tags der Seite zu ändern. Hier ist ein Javascript-Ansatz:

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

Ich habe überprüft, dass Google diese clientseitigen Änderungen für den obigen Code indiziert.

Tim Moses
quelle
3
Interessant! Vielen Dank, dass Sie mich auf die element = collection[name]Syntax aufmerksam gemacht haben.
Jayms
11

Meta-Tags sind Teil des Dom und können abgerufen und geändert werden, aber Suchmaschinen (die Hauptkonsumenten von Meta-Tags) sehen die Änderung nicht, da das Javascript nicht ausgeführt wird. Wenn Sie also kein Meta-Tag ändern (Aktualisierung fällt Ihnen ein), das Auswirkungen auf den Browser hat, ist dies möglicherweise von geringem Nutzen.

Futtta
quelle
3
+1 - Ich bin auf diese Frage gestoßen, weil ich mich speziell über Meta Refresh gewundert habe. Ich erstelle eine App, die Ajax Polling verwendet, um die Daten auf dem Bildschirm zu aktualisieren, und ich möchte einen groben Fallback für Browser bereitstellen, für die Javascript nicht aktiviert ist. Ich denke, dass ich dies erreichen könnte, indem ich standardmäßig ein Meta-Refresh-Tag erstelle. Wenn Javascript aktiviert ist, entfernen Sie einfach das Meta-Tag. - Nun, um zu sehen, ob es tatsächlich funktioniert ...
Jessegavin
@futtta, das Meta-Beschreibungs-Tag wird für Lesezeichenbeschreibungen in Opera verwendet, sodass der Benutzer tatsächlich den Vorteil hat, dass Ihre Meta-Beschreibung geändert werden kann.
XP1
11

Es sollte so möglich sein (oder jQuery wie folgt verwenden $('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>
Mikael Svenson
quelle
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
quelle
6
Ich habe mit Ihrem Beispiel begonnen, aber festgestellt, dass Sie die Meta-Tags nicht entfernen und erneut hinzufügen müssen. Sie können das Inhaltsattribut einfach folgendermaßen ändern:jQuery('meta[property="og:title"]').attr('content', "blubb1");
Tobias Beuving
Du bist richtig @ user3320390. Es ist etwas anderes, ein Tag zu entfernen als es zu ändern. FB wirkt für das, was HTML geschrieben hat, und NICHT für die Werte der Tags.
Pedro Ferreira
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
quelle
5

Sie können eine einfachere und leichtere Lösung verwenden:

document.head.querySelector('meta[name="description"]').content = _desc
Ali Seyfollahi
quelle
2

Einfaches Hinzufügen und Verteilen von Attributen zu jedem Meta-Tag-Beispiel

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

jetzt wie normale div Änderung zum Beispiel. n klicken

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

Funktionsänderungs-Tags mit jQuery

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

}
Burhan Ibrahimi
quelle
2

Wenn wir das Meta-Tag überhaupt nicht haben, können wir Folgendes verwenden:

var _desc = 'Out description';
var meta = document.createElement('meta');
meta.setAttribute('name', 'description');
meta.setAttribute('content', _desc);
document.getElementsByTagName('head')[0].appendChild(meta);
römisch
quelle
2

Für alle, die versuchen, og: title-Meta-Tags (oder andere) zu ändern. Ich habe es so gemacht:

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

Achtung, dass 'meta [property = "og: title"]' das Wort PROPERTY und nicht NAME enthält.

Jorge Mauricio
quelle
1

Nein, ein div ist ein Körperelement, kein Kopfelement

EDIT: Dann werden SEs nur noch den Basis-HTML-Code erhalten, nicht den Ajax-modifizierten.

Ben
quelle
Ich hoffe das stimmt nicht.
David Spector
1

Ja, es ist möglich, Metatags mit Javascript hinzuzufügen. Ich habe in meinem Beispiel getan

Android respektiert das Entfernen von Metatags nicht?

Aber ich weiß nicht, wie ich es ändern soll, außer es zu entfernen. Übrigens, in meinem Beispiel ... wenn Sie auf die Schaltfläche "HINZUFÜGEN" klicken, werden das Tag und das Ansichtsfenster geändert, aber ich weiß nicht, wie ich es zurücksetzen kann (entfernen, in Android). Ich wünschte, es gäbe einen Firebug für Android Ich habe gesehen, was los war. Firefox entfernt das Tag. Wenn jemand irgendwelche Ideen dazu hat, notiere dies bitte in meiner Frage.

Chamilyan
quelle
0

habe dies im Index

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

habe dies in ajaxfiles og: tippe "og: title" og: description und og: image

und füge dies auch hinzu

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

Fügen Sie dann nach dem ajaxCall js hinzu

FB.XFBML.parse();

Bearbeiten: Sie können dann den richtigen Titel und das richtige Bild auf Facebook in txt / php-Dokumenten anzeigen (meine werden nur als Erweiterung .php genannt, sind aber mehr txt-Dateien). Ich habe dann die Meta-Tags in diesen Dateien und den Link zurück zum Index in jedem Dokument, auch einen Meta-Link in der Indexdatei für jede Subdatei.

Wenn jemand einen besseren Weg kennt, würde ich mich über Ergänzungen freuen :)

sunto
quelle
Dies scheint keine Antwort auf die Frage zu sein, wie Meta-Tags dynamisch hinzugefügt werden können.
Alex
0

Dies scheint für eine kleine, streng geometrisch festgelegte App zu funktionieren, die sowohl auf mobilen als auch auf anderen Browsern mit geringen Änderungen ausgeführt werden muss. Daher ist es erforderlich, den Status des mobilen / nicht mobilen Browsers zu ermitteln und für Handys das Ansichtsfenster auf Gerätebreite einzustellen. Da Skripte über den Header ausgeführt werden können, scheint das folgende js im Header das Metatag für die Gerätebreite zu ändern, bevor die Seite geladen wird. Man könnte bemerken, dass die Verwendung von navigator.userAgent als experimentell festgelegt ist. Das Skript muss dem zu ändernden Metatag-Eintrag folgen, daher muss ein anfänglicher Inhalt ausgewählt und dann unter bestimmten Bedingungen geändert werden. 

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