web-dev-qa-db-fra.com

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

Si je mets une div dans la tête et que je n’affiche: aucun, puis utiliser JavaScript pour l’afficher, cela fonctionnera-t-il?

Modifier:

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

javascriptjquerymeta-tags
91
TIMEX

Oui, tu peux faire ça.

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

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

Google Chrome Frame

<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 changé par JavaScript. Voir: n correctif pour le bogue d'échelle de viewport iPhone

Meta Description

Certains agents utilisateurs (Opera par exemple) utilisent la description des 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>

Il ne s’agit donc pas que des moteurs de recherche.

156
fuxia

Oui, ça l'est.

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

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

Vous utiliseriez quelque chose comme (avec jQuery):

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

Mais cela serait sans intérêt, car les balises méta ne sont généralement effacées que lorsque le document est chargé, généralement sans exécuter de JavaScript.

65
MiffTheFox

Vous pouvez changer de méta avec, par exemple, les appels jQuery, comme ceux-ci:

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

Je pense que cela est important pour le moment, puisque Google dit qu'ils indexeront le contenu ajax via #!hashes et _escaped_fragment_ appels. Et maintenant, ils peuvent le vérifier (même automatiquement, avec les navigateurs sans tête, voir le lien 'Création d'instantanés HTML' sur la page mentionnée ci-dessus), alors je pense c'est la voie pour les gars hardcore SEO.

33
eyedmax

Il est certainement possible d'utiliser Javascript pour changer les balises méta 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 indexait ces modifications côté client pour le code ci-dessus.

18
Tim Moses

les méta-tags font partie du dom et peuvent être consultés et modifiés, mais les moteurs de recherche (les principaux consommateurs de méta-tags) ne verront pas le changement car le javascript ne sera pas exécuté. donc, à moins que vous ne changiez une méta-balise (une actualisation vous vient à l'esprit) qui a des implications sur le navigateur, cela pourrait ne pas être utile?

11
futtta

Cela devrait être possible comme ceci (ou utilisez 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>
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

simple add et div 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 changement normal div par exemple. n clic

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

étiquettes 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, ");

}
2
Burhan Ibrahimi

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

EDIT: La seule chose que les SE vont obtenir est le code HTML de base, pas le code ajax modifié.

1
Ben

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

Android ne respecte pas l'enlèvement de metatag?

Mais, je ne sais pas comment le changer autrement que l'enlever. Btw, dans mon exemple .. lorsque vous cliquez sur le bouton 'Ajouter', il ajoute le tag et la fenêtre d'affichage change, mais je ne sais pas comment le retourner (le supprimer, sous Android) .. J'aurais aimé qu'il y ait un 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.

1
Chamilyan

avoir ceci dans l'index

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

ont ceci dans ajaxfiles og: type "og: titre" og: description et og: image

et ajoutez ceci aussi

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

puis ajoutez js après le ajaxCall

FB.XFBML.parse();

Éditer: Vous pouvez ensuite afficher le titre et l'image corrects sur facebook dans les douzaines txt/php (les miens sont simplement nommés .php en tant qu'extensions, mais sont plutôt des fichiers txt). J'ai ensuite les balises méta dans ces fichiers, et le lien vers index dans chaque document, également un lien méta dans le fichier index pour chaque sous-fichier.

si quelqu'un connaît un meilleur moyen de le faire, j'apprécierais tout ajout :)

0
sunto

Si nous n'avons pas du tout la balise meta, nous pouvons utiliser les éléments suivants:

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

Cela semble fonctionner pour une application un peu géométriquement rigide qui doit fonctionner sur les navigateurs mobiles et autres avec peu de changement. Il est donc nécessaire de connaître le statut du navigateur mobile/non mobile et de définir pour le mobile la fenêtre d'affichage à la largeur de l'appareil. Comme les scripts peuvent être exécutés à partir de l'en-tête, l'en-tête js ci-dessous semble modifier la métabalise pour device-width Avant le chargement de la page. On peut noter que l'utilisation de navigator.userAgent est stipulée à titre expérimental. Le script doit suivre l’entrée de métabalise à modifier. Vous devez 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">

. . . . . .

0
jcj52436999