it-swarm.com.de

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

Wenn ich ein div in den Kopf setze und anzeige: none, dann benutze JavaScript, um es anzuzeigen, funktioniert das?

Bearbeiten:

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

91
TIMEX

Ja, das kannst du.

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

Beispiele

Skype: Rufnummern-Parser ausschalten

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

iPhone: Rufnummern-Parser ausschalten

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

Google Chrome Frame

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

Viewport-Definition für mobile Geräte

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

Dieser kann per JavaScript geändert werden. Siehe: Ein Fix für den Skalierungsfehler im iPhone-Ansichtsfenster

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.

156
fuxia

Ja ist es.

Z.B. um die meta-beschreibung zu setzen:

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

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

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

Dies ist jedoch meist sinnlos, da Meta-Tags in der Regel nur beim Laden des Dokuments gescrappt werden, ohne dass JavaScript ausgeführt wird.

65
MiffTheFox

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

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

Ich denke, dass es im Moment wichtig ist, da google sagte die Ajax-Inhalte über #!hashes Und indiziert _escaped_fragment_ Ruft auf. Und jetzt können sie es überprüfen (auch automatisch, mit kopflosen Browsern, siehe den Link "Erstellen von HTML-Snapshots" auf der oben genannten Seite), so denke ich Es ist der Weg für Hardcore-SEO-Leute.

33
eyedmax

Es ist definitiv möglich, Javascript zu verwenden, um die Meta-Tags der Seite zu ändern. Hier ist ein Nur-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 bestätigt, dass Google diese clientseitigen Änderungen für den obigen Code indiziert.

18
Tim Moses

meta-Tags sind Teil des Doms und können aufgerufen und geändert werden, aber Suchmaschinen (die Hauptverbraucher von Meta-Tags) werden die Änderung nicht sehen, da das Javascript nicht ausgeführt wird. Wenn Sie also nicht ein Meta-Tag ändern (Aktualisierung kommt in den Sinn), das Auswirkungen auf den Browser hat, ist dies möglicherweise von geringem Nutzen.

11
futtta

Es sollte so möglich sein (oder jQuery wie $('meta[name=author]').attr("content"); verwenden):

<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

einfaches Hinzufügen und Teilen 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 ändern zum Beispiel. n klicken

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

funktionsänderungstags mit 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

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

EDIT: Dann werden die SEs nur das Basis-HTML bekommen, nicht das Ajax-modifizierte.

1
Ben

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, ohne es zu entfernen. Übrigens, in meinem Beispiel ... wenn Sie auf die Schaltfläche 'HINZUFÜGEN' klicken, werden das Tag und das Ansichtsfenster hinzugefügt, aber ich weiß nicht, wie ich es zurücksetzen soll (es entfernen, in Android). Ich wünschte, es gäbe einen Firebug für Android also habe ich gesehen, was passiert ist. Firefox entfernt das Tag. Wenn jemand irgendwelche Ideen dazu hat, notiere dies bitte in meiner Frage.

1
Chamilyan

habe dies im Index

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

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

und füge dies auch hinzu

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

füge dann js nach dem ajaxCall hinzu

FB.XFBML.parse();

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

wenn jemand eine bessere Methode dafür kennt, würde ich mich über Ergänzungen freuen :)

0
sunto

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);
0
Roman

Dies scheint für eine wenig streng geometrisch festgelegte App zu funktionieren, bei der sie mit nur geringen Änderungen auf mobilen und anderen Browsern ausgeführt werden muss. Daher ist es erforderlich, den Status des mobilen/nicht mobilen Browsers zu ermitteln und das Ansichtsfenster für Handys auf Gerätebreite festzulegen. Da Skripte über die Kopfzeile ausgeführt werden können, scheint das unten stehende js in der Kopfzeile 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 Metatag-Eintrag folgen, damit es geändert werden kann. Daher muss zunächst ein Teil des Inhalts 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">

. . . . . .

0
jcj52436999