È possibile utilizzare JavaScript per modificare i meta-tag della pagina?

113

Se metto un div in testa e visualizzo: nessuno, che usare JavaScript per visualizzarlo, funzionerà?

Modificare:

Ho delle cose caricate in AJAX. E poiché il mio AJAX cambia la parte "principale" del sito, voglio modificare anche i meta-tag.

javascript jquery meta-tags

— TIMEX
fonte

47

è come indossare una scarpa come un cappello

— Ben

8

o utilizzando un editor di testo come ide. No aspetta, è considerato interessante.

— Dan Rosenstark

23

Hai ragione, sono stupido

— TIMEX

2

Ciao TIMEX, forse un cambiamento della risposta accettata è al suo posto? Se non altro motivo, se non quello di dare a Byron una pausa sui voti negativi per la sua risposta obsoleta.

— Alex

1

Voglio farlo in modo da poter gestire i meta tag (og in particolare) con il mio framework javascript, quindi fare in modo che il mio motore di prerender lo scriva / memorizzi nella cache per i crawler. Altrimenti avrei bisogno di middleware aggiuntivo per determinare i tag dalla mia API prima di eseguire il rendering dell'indice della mia SPA, che rallenterebbe il caricamento, per prima cosa ...

— Soft Bullets

160

Si, puoi farlo.

Ci sono alcuni casi d'uso interessanti: alcuni browser e plugin analizzano i meta elementi e cambiano il loro comportamento per valori diversi.

Esempi

Skype: disattiva il parser del numero di telefono

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

iPhone: disattiva il parser del numero di telefono

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

Google Chrome Frame

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

Definizione di viewport per dispositivi mobili

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

Questo può essere modificato da JavaScript. Vedi: una correzione per il bug della scala della vista di iPhone

Meta Description

Alcuni programmi utente (Opera per esempio) usano la descrizione per i segnalibri. Puoi aggiungere contenuti personalizzati qui. Esempio:

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

Quindi, non si tratta solo di motori di ricerca.

— Fuxia
fonte

9

Sospetto che la maggior parte dei metas come questo abbia effetti che non sono modificabili dopo il caricamento della pagina. Ma sì, meta è molto più che solo keywordse description.

— bobince

2

@bobince: In realtà, SKYPE_TOOLBAR ha ancora effetto se lo inserisci con js (il che è utile dato che al validatore html5 non piace quel meta tag).

— DaedalusFall

1

@DaedalusFall: sì, penso che tu possa farlo solo con document.writenell'intestazione però, è troppo tardi per cambiarlo una volta che la pagina è stata caricata poiché Skype avrà già alterato il DOM, cosa orribile!

— bobince

1

Questo è molto utile con la condivisione sui social su servizi come Facebook. Ad esempio, per modificare l'elemento og: title: $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');

— bdanin

2

Puoi fare delle cose interessanti con questo. Cambio il colore della barra degli indirizzi di Chrome quando cambia una diapositiva nell'intestazione. const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);Chrome su Android rileva l'aggiornamento e cambia il colore

— Dominic Bartl

149

Sì.

Ad esempio, per impostare la meta-descrizione:

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

— jayms
fonte

23

Sono contento che qualcuno abbia dato una risposta in puro js (come richiesto nella domanda)!

— Soft Bullets

Ciao jayms. Grazie per il consiglio. Ma ho provato questo metodo per provare a cambiare og: title tag, ma non ha funzionato. Ecco come l'ho fatto: document.querySelector ('meta [name = "og: title"]'). SetAttribute ("content", "Esempio con meta tag title"); Qualche idea?

— Jorge Mauricio

1

Sembra che dovresti interrogare l' propertyattributo, non l' nameattributo, cioèmeta[property="og:title"]

— jayms il

69

Useresti qualcosa come (con jQuery):

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

Ma ciò sarebbe per lo più inutile in quanto i meta tag vengono solitamente raschiati solo quando il documento viene caricato, di solito senza eseguire JavaScript.

— MiffTheFox
fonte

7

Funziona anche con selettori come $('meta[property=og:somestuff]'), che sospettavo si sarebbe scontrato con la sintassi di selezione jQuery a causa dei due punti.

— pau.moreno

8

Nel caso in cui qualcun altro stia cercando questa soluzione esatta, è necessario inserire virgolette attorno a og: somestuff - Avevo bisogno del contenuto del tag immagine, questo era il mio codice: var imgurl = $ ("meta [property = 'og: image '] "). attr (" contenuto ");

— Daniel,

2

Confermato che funziona per l'impostazione del meta viewport (necessario per abilitare / disabilitare lo zoom per alcune sottopagine su jQuery Mobile). Grazie!

— NPC

1

@stealthcopter posso verificare che questo non sia :( aspetta, lo fa, ma le modifiche non sono visibili nella finestra "view source" di

— FFox

1

@yPhil Questo è javascript (o jQuery) quindi tutte le modifiche apportate al DOM non si riflettono quando si visualizza il codice sorgente dal browser. Si rifletterà quando si utilizza lo strumento per sviluppatori per visualizzare l'origine. L'origine del browser viene caricata solo una volta quando viene caricata la pagina. Le richieste di richiesta ajax non sono caricamenti della pagina.

— Zubair1

34

Puoi cambiare meta con, ad esempio, chiamate jQuery, come queste:

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

Penso che non importa per ora, dal momento che Google ha detto che lo faranno indicizzare i contenuti Ajax via #!hashese _escaped_fragment_chiamate. E ora possono verificarlo (anche automaticamente, con browser headless, vedere il collegamento "Creazione di istantanee HTML" nella pagina sopra menzionata), quindi penso che sia la strada per i ragazzi SEO hardcore.

— eyedmax
fonte

3

Grazie per questo. Ho appena risolto il mio problema. Poiché Facebook ha un grafico aperto. Il sito che sto sviluppando ha un plug-in jQuery History e tag hash. Quindi l'URL e la descrizione del grafico aperto FB devono essere modificati ogni volta che è presente una modifica hash. +1 per un'ottima risposta e non essere negativo nei confronti di una domanda equa.

— Damien Keitel

5

In realtà, ora anche Google è in grado di eseguire javascript senza la necessità di creare istantanee di pagina, quindi ora i metatag dinamici contano molto!

— Francesco Abbruzzese

33

È sicuramente possibile utilizzare Javascript per modificare i meta tag della pagina. Ecco un approccio solo Javascript:

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

Ho verificato che Google indicizzi queste modifiche lato client per il codice sopra.

— Tim Moses
fonte

3

Interessante! Grazie per avermi fatto conoscere la element = collection[name]sintassi.

— jayms

11

i meta-tag fanno parte del dominio e sono accessibili e, suppongo, cambiati, ma i motori di ricerca (i principali consumatori dei meta-tag) non vedranno il cambiamento poiché il javascript non verrà eseguito. quindi a meno che tu non stia cambiando un meta-tag (mi viene in mente l'aggiornamento) che ha implicazioni nel browser, questo potrebbe essere di scarsa utilità?

— futtta
fonte

3

+1 - Sono arrivato a questa domanda perché mi chiedevo specificamente del meta refresh. Sto creando un'app che utilizza il polling ajax per aggiornare i dati sullo schermo e desidero fornire un semplice fallback per i browser che non hanno javascript abilitato. Sto pensando che potrei farlo creando un meta tag refresh per impostazione predefinita e se javascript è abilitato, rimuovi semplicemente il meta tag. - Ora per vedere se funziona davvero ...

— jessegavin

@futtta, il tag meta description viene utilizzato per le descrizioni dei segnalibri in Opera, quindi c'è effettivamente un vantaggio per l'utente che la tua meta descrizione possa essere modificata.

— XP1

11

Dovrebbe essere possibile in questo modo (o usare jQuery come $('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
fonte

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
fonte

6

Ho iniziato con il tuo esempio, ma mi sono reso conto che non devi rimuovere e aggiungere nuovamente i meta-tag. Puoi semplicemente cambiare l'attributo di contenuto in questo modo:jQuery('meta[property="og:title"]').attr('content', "blubb1");

— Tobias Beuving

Hai ragione @ user3320390. È diverso rimuovere un tag piuttosto che modificarlo. FB agisce per ciò che è scritto in HTML e NON per i valori dei tag.

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

5

Puoi utilizzare una soluzione più semplice e leggera:

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

— Ali Seyfollahi
fonte

2

semplice add e div atribute a ciascun esempio di meta tag

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

ora come normale cambio div per es. n clic

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

tag di modifica della funzione con jQuery

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

}

— Burhan Ibrahimi
fonte

2

Se non abbiamo affatto il meta tag, possiamo utilizzare quanto segue:

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

— romano
fonte

2

Per chiunque cerchi di modificare i meta tag og: title (o qualsiasi altro). Sono riuscito a farlo in questo modo:

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

Attenzione che "meta [property =" og: title "]" contiene la parola PROPRIETÀ e non NOME.

— Jorge Mauricio
fonte

1

No, un div è un elemento del corpo, non un elemento della testa

EDIT: Quindi l'unica cosa che gli SE otterranno è l'HTML di base, non quello modificato ajax.

— Ben
fonte

Spero non sia vero.

— David Spector

1

Sì, è possibile aggiungere metatag con Javascript. Ho fatto nel mio esempio

Android non rispetta la rimozione dei metatag?

Ma non so come cambiarlo se non rimuoverlo. A proposito, nel mio esempio .. quando fai clic sul pulsante "AGGIUNGI", aggiunge rispettivamente il tag e il riquadro di visualizzazione, ma non so come ripristinarlo (rimuovilo, in Android) .. Vorrei che ci fosse firebug per Android quindi Ho visto cosa stava succedendo. Firefox rimuove il tag. se qualcuno ha qualche idea su questo, si prega di notare così nella mia domanda.

— Chamilyan
fonte

0

avere questo in index

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

avere questo in ajaxfiles og: digitare "og: title" og: descrizione e og: immagine

e aggiungi anche questo

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

quindi aggiungi js dopo ajaxCall

FB.XFBML.parse();

Modifica: puoi quindi visualizzare il titolo e l'immagine corretti su Facebook nei documenti txt / php (i miei sono solo chiamati .php come estensioni, ma sono più file txt). Ho quindi i meta tag in questi file e il collegamento all'indice in ogni documento, anche un meta collegamento nel file indice per ogni file secondario.

se qualcuno conosce un modo migliore per farlo, apprezzerei qualsiasi aggiunta :)

— Sunto
fonte

Questa non sembra essere una risposta alla domanda su come aggiungere dinamicamente i meta-tag?

— Alex

0

Questo sembra funzionare per una piccola app rigidamente impostata in modo geometrico in cui deve essere eseguita su browser mobili e altri con pochi cambiamenti, quindi è necessario trovare lo stato del browser mobile / non mobile e per i cellulari impostare il viewport sulla larghezza del dispositivo. Poiché gli script possono essere eseguiti dall'intestazione, il js sotto nell'intestazione sembra cambiare il metatag per la larghezza del dispositivo prima che la pagina venga caricata. Si potrebbe notare che l'uso di navigator.userAgent è stabilito come sperimentale. Lo script deve seguire la voce del metatag per essere modificato, quindi è necessario scegliere un contenuto iniziale e quindi modificare a determinate condizioni.

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