Est-il possible d'utiliser JavaScript pour modifier les méta-balises de la page?

114

Si je mets un div dans la tête et affiche: aucun, que d'utiliser JavaScript pour l'afficher, cela fonctionnera-t-il?

Éditer:

J'ai des trucs chargés dans AJAX. Et comme mon AJAX modifie la partie "principale" du site, je souhaite également modifier les méta-balises.

javascript jquery meta-tags

— TIMEX
source

47

c'est comme porter une chaussure comme un chapeau

— Ben

8

ou en utilisant un éditeur de texte comme idée. Non attendez, c'est considéré comme cool.

— Dan Rosenstark le

23

Vous avez raison, je suis stupide

— TIMEX

2

Salut TIMEX, peut-être qu'un changement de la réponse acceptée est à sa place? Si aucune autre raison que de donner à Byron une pause sur les votes négatifs pour sa réponse obsolète.

— Alex

1

Je veux faire cela pour pouvoir gérer les balises meta (og en particulier) avec mon framework javascript, puis demander à mon moteur de pré-exécution d'écrire / mettre en cache ceci pour les robots d'exploration. Sinon, j'aurais besoin d'un middleware supplémentaire pour déterminer les balises de mon API avant de rendre l'index de mon SPA, ce qui ralentirait le chargement, d'une part ...

— Soft Bullets

161

Oui, tu peux faire ça.

Il existe des cas d'utilisation intéressants: certains navigateurs et plugins analysent les méta-éléments et modifient leur comportement pour différentes valeurs.

Exemples

Skype: désactiver l'analyseur de numéro de téléphone

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

iPhone: désactiver l'analyseur de numéro de téléphone

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

Cadre Google Chrome

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

Définition de la fenêtre d'affichage pour les appareils mobiles

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

Celui-ci peut être modifié par JavaScript. Voir: Un correctif pour le bogue d'échelle de la fenêtre d'affichage iPhone

Meta Description

Certains agents utilisateurs (Opera par exemple) utilisent la description pour les signets. Vous pouvez ajouter du contenu personnalisé ici. Exemple:

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

Donc, il ne s'agit pas seulement des moteurs de recherche.

— fuxia
source

9

Je soupçonne que la plupart des métas comme celui-ci ont des effets qui ne sont pas modifiables après le chargement de la page. Mais oui, meta est bien plus que juste keywordset description.

— bobince

2

@bobince: En fait, le SKYPE_TOOLBAR prend toujours effet si vous l'insérez avec js (ce qui est utile car le validateur html5 n'aime pas cette balise meta).

— DaedalusFall

1

@DaedalusFall: oui, je pense que vous ne pouvez le faire qu'avec l' document.writeen-tête, il est trop tard pour le changer une fois la page chargée car Skype aura déjà mutilé le DOM, chose horrible!

— bobince

1

Ceci est très utile avec le partage social vers des services comme Facebook. Par exemple, pour changer l'élément og: title: $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');

— bdanin

2

Vous pouvez faire des trucs sympas avec ça. Je change la couleur de la barre d'adresse Chrome lorsque la diapositive de l'en-tête change. const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);Chrome sur Android détecte la mise à jour et change la couleur

— Dominic Bartl

149

Oui, ça l'est.

Par exemple, pour définir la méta-description:

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

— Jayms
source

23

Heureux que quelqu'un ait donné une réponse en pur js (comme demandé dans la question)!

— Soft Bullets

Salut Jayms. Merci pour le conseil. Mais j'ai essayé cette méthode pour essayer de changer la balise og: title, mais cela n'a pas fonctionné. Voici comment je l'ai fait: document.querySelector ('meta [name = "og: title"]'). SetAttribute ("content", "Example with title meta tag"); Des idées?

— Jorge Mauricio le

1

Il semble que vous auriez besoin de rechercher l' propertyattribut, pas l' nameattribut, c'estmeta[property="og:title"]

— jayms

69

Vous utiliseriez quelque chose comme (avec jQuery):

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

Mais ce serait surtout inutile car les balises meta ne sont généralement supprimées que lorsque le document est chargé, généralement sans exécuter de JavaScript.

— MiffTheFox
source

7

Cela fonctionne même avec des sélecteurs tels que $('meta[property=og:somestuff]'), dont je soupçonnais qu'il entrerait en conflit avec la syntaxe de sélection jQuery à cause du signe deux-points.

— pau.moreno

8

Au cas où quelqu'un d'autre chercherait cette solution exacte, vous devez mettre des guillemets autour de og: somestuff - j'avais besoin du contenu de la balise image, c'était mon code: var imgurl = $ ("meta [property = 'og: image '] "). attr (" contenu ");

— Daniel

2

Confirmé que cela fonctionne pour le paramètre de méta-fenêtre (nécessaire pour activer / désactiver le zoom pour certaines sous-pages sur jQuery Mobile). Merci!

— PNJ

1

@stealthcopter Je peux vérifier que ce n'est pas le cas :( attendez, c'est le cas, mais les changements ne sont pas visibles dans la fenêtre "afficher la source" de

— FFox

1

@yPhil Il s'agit de javascript (ou jQuery) donc toutes les modifications que vous apportez au DOM ne sont pas reflétées lors de l'affichage du code source à partir du navigateur. Cela se reflétera lorsque vous utiliserez l'outil du développeur pour afficher la source. La source du navigateur n'est chargée qu'une seule fois lorsque la page se charge. Les demandes de requête ajax ne sont pas chargées.

— Zubair1

34

Vous pouvez changer meta avec, par exemple, des appels jQuery, comme ceux-ci:

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

Je pense que ce ne soit pour l' instant, puisque Google dit qu'ils indexent le contenu ajax via #!hasheset des _escaped_fragment_appels. Et maintenant, ils peuvent le vérifier (même automatiquement, avec des navigateurs sans tête, voir le lien `` Créer des instantanés HTML '' sur la page mentionnée ci-dessus), donc je pense que c'est la voie pour les gars de SEO hardcore.

— eyedmax
source

3

Merci pour ça. Je viens de résoudre mon problème. Comme facebook a un graphique ouvert. Le site que je développe a un plugin History jQuery et des balises de hachage. Ainsi, l'url et la description du graphe ouvert FB doivent être modifiés chaque fois qu'un changement de hachage est présent. +1 pour une bonne réponse et ne pas être négatif envers une question juste.

— Damien Keitel le

5

En fait, maintenant, Google est capable d'exécuter javascript, sans avoir besoin de créer des instantanés de page, alors maintenant, les méta-balises dynamiques importent beaucoup!

— Francesco Abbruzzese

33

Il est tout à fait possible d'utiliser Javascript pour changer les balises meta de la page. Voici une approche Javascript uniquement:

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

J'ai vérifié que Google indexe ces modifications côté client pour le code ci-dessus.

— Tim Moses
source

3

Intéressant! Merci de m'avoir informé de la element = collection[name]syntaxe.

— jayms

11

Les méta-balises font partie du domaine et peuvent être consultées et modifiées, mais les moteurs de recherche (les principaux consommateurs de méta-balises) ne verront pas le changement car le javascript ne sera pas exécuté. donc à moins que vous ne changiez une méta-balise (rafraîchissement vient à l'esprit) qui a des implications dans le navigateur, cela pourrait être de peu d'utilité?

— futtta
source

3

+1 - J'ai atterri sur cette question parce que je m'interrogeais spécifiquement sur le méta-rafraîchissement. Je crée une application qui utilise l'interrogation ajax pour actualiser les données à l'écran et je souhaite fournir une solution de secours grossière pour les navigateurs qui n'ont pas activé javascript. Je pense que je pourrais accomplir cela en créant une balise meta refresh par défaut et si javascript est activé, supprimez simplement la balise meta. - Maintenant, pour voir si cela fonctionne réellement ...

— jessegavin

@futtta, la balise meta description est utilisée pour les descriptions de signets dans Opera, il y a donc en fait un avantage pour l'utilisateur que votre méta description peut être modifiée.

— XP1

11

Cela devrait être possible comme ceci (ou utiliser jQuery comme $('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
source

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
source

6

J'ai commencé avec votre exemple, mais j'ai réalisé que vous n'avez pas à supprimer et rajouter les balises méta. Vous pouvez simplement changer l'attribut de contenu comme ceci:jQuery('meta[property="og:title"]').attr('content', "blubb1");

— Tobias Beuving

Vous avez raison @ user3320390. C'est différent de supprimer une balise que de la modifier. FB agit pour ce qui est écrit en HTML et PAS pour les valeurs des balises.

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

5

Vous pouvez utiliser une solution plus simple et plus légère:

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

— Ali Seyfollahi
source

2

ajouter et diviser simplement un attribut à chaque exemple de balise meta

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

maintenant comme le changement normal de div par ex. n cliquez

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

balises de changement de fonction avec jQuery

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

}

— Burhan Ibrahimi
source

2

Si nous n'avons pas du tout la balise meta, nous pouvons utiliser ce qui suit:

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

— romain
source

2

Pour tous ceux qui essaient de changer les balises meta og: title (ou tout autre). J'ai réussi à le faire de cette façon:

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

Attention, le 'meta [property = "og: title"]' contient le mot PROPERTY, et non NAME.

— Jorge Mauricio
source

1

Non, un div est un élément de corps, pas un élément de tête

EDIT: Ensuite, la seule chose que les SE vont obtenir est le HTML de base, pas celui modifié en ajax.

— Ben
source

J'espère que ce n'est pas vrai.

— David Spector

1

Oui, il est possible d'ajouter des méta-balises avec Javascript. J'ai fait dans mon exemple

Android ne respecte pas la suppression des métabalises?

Mais, je ne sais pas comment le changer autrement qu'en le supprimant. Btw, dans mon exemple .. lorsque vous cliquez sur le bouton «AJOUTER», cela ajoute respectivement la balise et la fenêtre d'affichage, mais je ne sais pas comment la rétablir (supprimez-la, sous Android) .. J'aurais aimé qu'il y ait firebug pour Android alors J'ai vu ce qui se passait. Firefox supprime la balise. si quelqu'un a des idées à ce sujet, veuillez le noter dans ma question.

— Chamilyan
source

0

avoir ceci dans l'index

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

avoir ceci dans ajaxfiles og: type "og: title" og: description et og: image

et ajoutez ceci aussi

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

puis ajoutez js après ajaxCall

FB.XFBML.parse();

Edit: Vous pouvez ensuite afficher le titre et l'image corrects sur Facebook dans les douments txt / php (les miens sont simplement nommés .php comme extensions, mais sont plus de fichiers txt). J'ai alors les balises meta dans ces fichiers, et le lien de retour à l'index dans chaque document, également un méta lien dans le fichier d'index pour chaque sous-fichier.

si quelqu'un connaît une meilleure façon de faire cela, j'apprécierais tout ajout :)

— sunto
source

Cela ne semble pas être une réponse à la question de savoir comment ajouter dynamiquement des méta-balises?

— Alex

0

Cela semble fonctionner pour une petite application définie de manière rigide dans laquelle elle doit fonctionner à la fois sur les navigateurs mobiles et autres avec peu de changements, il est donc nécessaire de trouver le statut du navigateur mobile / non mobile et pour les mobiles, de définir la fenêtre d'affichage sur la largeur de l'appareil. Comme les scripts peuvent être exécutés à partir de l'en-tête, les js ci-dessous dans l'en-tête semblent changer la métabalise pour la largeur de l'appareil avant le chargement de la page. On peut noter que l'utilisation de navigator.userAgent est stipulée comme expérimentale. Le script doit suivre l'entrée de la balise Meta pour être modifié, il faut donc choisir un contenu initial, puis le modifier à certaines conditions.

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