Est-il possible d'utiliser JavaScript pour modifier les méta-tags de la page?
si je mets un div dans la tête et l'affichage:Aucun, que L'utilisation de JavaScript pour l'afficher, cela fonctionnera-t-il?
Edit:
j'ai des trucs chargés en AJAX. Et comme mon AJAX change la partie "principale" du site, je veux changer les méta-tags aussi.
14 réponses
Oui, vous pouvez le faire.
il y a 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: éteindre l'analyseur de numéro de téléphone
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
iPhone: éteindre 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">
Viewport définition des appareils mobiles
<meta name="viewport" content="width=device-width, initial-scale=1.0">
celui-ci peut être modifié par JavaScript. Voir: Un correctif pour iPhone fenêtre d'affichage de l'échelle bug
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.
Oui, c'est ça.
E. G. pour définir la méta-description:
document.querySelector('meta[name="description"]').setAttribute("content", _desc);
vous utilisez quelque chose comme (avec jQuery):
$('meta[name=author]').attr('content', 'New Author Name');
mais cela ne servirait à rien car les métabalises ne sont généralement effacées que lorsque le document est chargé, généralement sans exécuter de JavaScript.
vous pouvez changer meta 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 qu'il ne question pour l'instant, depuis google a dit qu'ils indexeront le contenu ajax via #!hashes et _escaped_fragment_ appels. Et maintenant ils peut 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 façon pour les gars hardcore SEO.
il 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>
font partie du dom et peuvent être consultés et-je suppose - 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-étiquette (rafraîchir vient à l'esprit) qui a des implications dans le navigateur, cela pourrait être de peu d'utilité?
$(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">');
});
il est certainement possible d'utiliser Javascript pour changer les balises meta de la page. Voici une approche Javascript seulement:
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.
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';
}
Non, un div est un élément de corps, pas un élément de tête
EDIT: Alors, la seule chose que SEs allez obtenir est la base du HTML, pas de l'ajax modifié.
Oui, il est possible d'ajouter des métabalises avec Javascript. Je l'ai fait dans mon exemple
Android ne respecte pas le retrait de la métabalise?
mais, je ne sais pas comment le changer autre que l'enlever. Btw, dans mon exemple.. lorsque vous cliquez sur le bouton' ADD', il ajoute la balise et le viewport change respectivement, mais je ne sais pas comment le retourner (supprimer, dans Android).. J'aimerais qu'il y ait firebug pour Androïde donc j'ai vu ce qui était happening. Firefox enlève l'étiquette. si quelqu'un a des idées sur ce veuillez noter donc dans ma question.
simple ajouter et div atribute à chaque exemple de métabalise
<meta id="mtlink" name="url" content="">
<meta id="mtdesc" name="description" content="" />
<meta id="mtkwrds" name="keywords" content="" />
maintenant comme un changement de div normal pour ex. n cliquez sur
<a href="#" onClick="changeTags(); return false;">Change Meta Tags</a>
changement de fonction tags avec jQuery
function changeTags(){
$("#mtlink").attr("content","http://albup.com");
$("#mtdesc").attr("content","music all the time");
$("#mtkwrds").attr("content","mp3, download music, ");
}
c'est en indice
<link rel="opengraph" href="{http://yourPage.com/subdomain.php}"/>
ont ceci en ajaxfiles og: type "og: title"og: description et og: image
et ajouter ce qui suit:
<link rel="origin" href={http://yourPage.com}/>
ajouter ensuite dans js après l'ajaxCall
FB.XFBML.parse();
Edit: vous pouvez alors afficher le titre et l'image corrects sur facebook dans les douments txt/php(les miens viennent d'être nommés .php comme extensions, mais sont plus de fichiers txt). J'ai ensuite les balises meta dans ces fichiers, et le lien retour à l'index dans chaque document, une 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 toute ajouts :)
cela semble fonctionner pour un peu rigidement géométriquement défini application où il doit fonctionner à la fois sur les navigateurs mobiles et d'autres avec peu de changement, donc trouver le statut de navigateur mobile/non-mobile et pour les mobiles réglage du viewport à l'appareil-largeur est nécessaire. Comme les scripts peuvent être exécutés à partir de l'en-tête, le js ci-dessous dans l'en-tête semble changer la métabalise pour device-width avant le chargement de la page. On peut noter que l'utilisation du navigateur.le contrat d'utilisation est considéré comme expérimental. Script doit suivre l'entrée metatag pour être modifié, donc on doit choisir un certain contenu initial, puis changer à 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">
. . . . . .