É possível usar JavaScript para alterar as metatags da página?

113

Se eu colocar um div no cabeçalho e exibir: nenhum, do que usar JavaScript para exibi-lo, isso funcionará?

Editar:

Tenho coisas carregadas em AJAX. E como meu AJAX muda a parte "principal" do site, eu quero mudar as metatags também.

javascript jquery meta-tags TIMEX
fonte
47
é como usar um sapato como chapéu
Ben,
8
ou usando um editor de texto como ide. Não, espere, isso é considerado legal.
Dan Rosenstark,
23
Você está certo, sou estúpido
TIMEX,
2
Olá, TIMEX, talvez haja uma mudança na resposta aceita em seu lugar? Se não houver outro motivo, a não ser dar a Byron uma pausa nos votos negativos por sua resposta desatualizada.
Alex
1
Quero fazer isso para poder gerenciar as metatags (og em particular) com minha estrutura javascript e, em seguida, fazer com que meu mecanismo de pré-renderização grave / armazene isso em cache para rastreadores. Caso contrário, eu precisaria de middleware adicional para determinar as tags da minha API antes de renderizar o índice do meu SPA, o que tornaria o carregamento lento, por exemplo ...
Soft Bullets

Respostas:

160

Sim, você pode fazer isso.

Existem alguns casos de uso interessantes: Alguns navegadores e plug-ins analisam elementos meta e mudam seu comportamento para valores diferentes.

Exemplos

Skype: Desligue o analisador de número de telefone

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

iPhone: desative o analisador de número de telefone

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

Frame do Google Chrome

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

Definição da janela de visualização para dispositivos móveis

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

Este pode ser alterado por JavaScript. Veja: Uma correção para o bug de escala da janela de visualização do iPhone

Meta Descrição

Alguns agentes de usuário (Opera, por exemplo) usam a descrição para marcadores. Você pode adicionar conteúdo personalizado aqui. Exemplo:

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

Portanto, não se trata apenas de mecanismos de pesquisa.

fuxia
fonte
9
Suspeito que a maioria dos metas como esse têm efeitos que não podem ser alterados depois que a página é carregada. Mas sim, meta é muito mais do que apenas keywordse description.
bobince,
2
@bobince: Na verdade, o SKYPE_TOOLBAR ainda tem efeito se você inseri-lo com js (o que é útil porque o validador html5 não gosta dessa metatag).
DaedalusFall
1
@DaedalusFall: sim, acho que você só pode fazer isso com document.writeno cabeçalho, no entanto, é tarde demais para alterá-lo quando a página for carregada, pois o Skype já terá mutilado o DOM, coisa horrível!
bobince de
1
Isso é muito útil com compartilhamento social para serviços como o Facebook. Por exemplo, para alterar o elemento og: title: $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');
bdanin
2
Você pode fazer algumas coisas legais com isso. Eu mudo a cor da barra de endereço do Chrome quando o slide no cabeçalho muda. const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);O Chrome no Android detecta a atualização e muda a cor
Dominic Bartl
149

Sim, ele é.

Por exemplo, para definir a meta-descrição:

document.querySelector('meta[name="description"]').setAttribute("content", _desc);
Jayms
fonte
23
Ainda bem que alguém deu uma resposta em js puro (conforme solicitado na pergunta)!
Soft Bullets de
Oi Jayms. Obrigado pela dica. Mas tentei este método para tentar mudar og: title tag, mas não funcionou. Veja como eu fiz: document.querySelector ('meta [name = "og: title"]'). SetAttribute ("content", "Exemplo com meta tag de título"); Alguma ideia?
Jorge Mauricio
1
Parece que você precisaria consultar o propertyatributo, não o nameatributo, ou seja,meta[property="og:title"]
jayms
69

Você usaria algo como (com jQuery):

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

Mas isso seria quase inútil, pois as metatags geralmente só são copiadas quando o documento é carregado, geralmente sem a execução de JavaScript.

MiffTheFox
fonte
7
Ele até funciona com seletores como $('meta[property=og:somestuff]'), que eu suspeitei que entrariam em conflito com a sintaxe de seleção do jQuery por causa dos dois pontos.
pau.moreno
8
Caso alguém esteja procurando por esta solução exata, você precisa colocar aspas em torno de og: somestuff - eu precisava do conteúdo da tag da imagem, este era meu código: var imgurl = $ ("meta [property = 'og: image '] "). attr (" conteúdo ");
Daniel
2
Confirmado que funciona para a configuração de meta viewport (necessário para habilitar / desabilitar o zoom para certas subpáginas no jQuery Mobile). Obrigado!
NPC de
1
@stealthcopter posso verificar que isso não :( espere, sim, mas as alterações não são visíveis na janela "ver fonte" do
FFox
1
@yPhil Isso é javascript (ou jQuery), portanto, toda e qualquer mudança que você fizer no DOM não será refletida ao visualizar o código-fonte no navegador. Isso refletirá quando você usar a Ferramenta do Desenvolvedor para visualizar o código-fonte. A origem do navegador é carregada apenas uma vez quando a página é carregada. As solicitações de solicitação de ajax não são carregadas de página.
Zubair1
34

Você pode alterar o meta com, por exemplo, chamadas jQuery, como estas:

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

Acho que isso importa por enquanto, já que o Google disse que indexará o conteúdo do Ajax por meio de chamadas #!hashese _escaped_fragment_. E agora eles podem verificar isso (mesmo automaticamente, com navegadores headless, veja o link 'Creating HTML Snapshots' na página mencionada acima), então eu acho que é o caminho para os caras de SEO hardcore.

eyedmax
fonte
3
Obrigado por isso. Só resolveu meu problema. Como o facebook tem gráfico aberto. O site que estou desenvolvendo tem um plugin History jQuery e hash tags. Portanto, o URL e a descrição do gráfico aberto do FB precisam ser alterados sempre que houver uma alteração de hash. +1 para uma boa resposta e não ser negativo para uma pergunta justa.
Damien Keitel
5
Na verdade, agora o Google também é capaz de executar javascript sem a necessidade de criar instantâneos de página, então agora as metatags dinâmicas têm muita importância!
Francesco Abbruzzese
33

Definitivamente, é possível usar Javascript para alterar as meta tags da página. Aqui está uma abordagem somente 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!!";

Eu verifiquei que o Google indexa essas alterações do lado do cliente para o código acima.

Tim Moses
fonte
3
Interessante! Obrigado por me informar sobre a element = collection[name]sintaxe.
Jayms
11

as meta-tags são parte do dom e podem ser acessadas e -i suposto- alteradas, mas os motores de busca (os principais consumidores das meta-tags) não verão a mudança, pois o javascript não será executado. então, a menos que você esteja alterando uma metatag (atualização vem à mente) que tem implicações no navegador, isso pode ser de pouca utilidade?

futtta
fonte
3
+1 - Eu me perguntei porque estava me perguntando especificamente sobre a meta atualização. Estou criando um aplicativo que usa a pesquisa de ajax para atualizar os dados na tela e quero fornecer um substituto bruto para navegadores que não têm javascript habilitado. Estou pensando que poderia fazer isso criando uma meta tag de atualização por padrão e, se o javascript estiver habilitado, basta remover a meta tag. - Agora para ver se realmente funciona ...
jessegavin
@futtta, a meta tag de descrição é usada para descrições de favoritos no Opera, então, na verdade, é um benefício para o usuário que sua meta descrição pode ser alterada.
XP1 de
11

Deve ser possível assim (ou usar jQuery como $('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
Comecei com o seu exemplo, mas percebi que não é necessário remover e adicionar novamente as metatags. Você pode apenas alterar o atributo de conteúdo assim:jQuery('meta[property="og:title"]').attr('content', "blubb1");
Tobias Beuving
Você está correto @ user3320390. É diferente remover uma tag do que alterá-la. FB atua para o que é HTML escrito e NÃO para os valores das tags.
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

Você pode usar uma solução mais simples e leve:

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

atributo add e div simples para cada exemplo de metatag

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

agora como mudança div normal para ex. n clique

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

função alterar tags com 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 não tivermos a metatag, podemos usar o seguinte:

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

Para quem está tentando alterar og: meta tags de título (ou qualquer outra). Consegui fazer assim:

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

Atenção que o 'meta [property = "og: title"]' contém a palavra PROPERTY, e não NAME.

Jorge Mauricio
fonte
1

Não, um div é um elemento do corpo, não um elemento principal

EDIT: Então a única coisa que os SEs vão conseguir é o HTML básico, não o modificado ajax.

Ben
fonte
Espero que isso não seja verdade.
David Spector
1

Sim, é possível adicionar metatags com Javascript. Eu fiz no meu exemplo

O Android não respeita a remoção de metatag?

Mas, eu não sei como mudar isso além de removê-lo. A propósito, no meu exemplo ... quando você clica no botão 'ADICIONAR', ele adiciona a tag e a janela de visualização muda respectivamente, mas eu não sei como reverter (remova-o, no Android) .. Eu gostaria que houvesse o firebug para Android, então Eu vi o que estava acontecendo. O Firefox remove a tag. se alguém tiver alguma idéia sobre isso, por favor, observe na minha pergunta.

Chamilyan
fonte
0

tem isso no índice

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

tenha isso em arquivos ajax og: digite "og: título" og: descrição e og: imagem

e adicione isso também

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

em seguida, adicione js após o ajaxCall

FB.XFBML.parse();

Editar: Você pode exibir o título e a imagem corretos no Facebook em documentos txt / php (os meus são apenas nomeados .php como extensões, mas são mais arquivos txt). Em seguida, tenho as metatags nesses arquivos e o link de volta para o índice em cada documento, também um meta link no arquivo de índice para cada subarquivo.

Se alguém souber de uma maneira melhor de fazer isso, agradeceria qualquer adição :)

Sunto
fonte
Isso não parece ser uma resposta à pergunta sobre como adicionar metatags dinamicamente.
Alex
0

Isso parece estar funcionando para um pequeno aplicativo com configuração geométrica rígida, onde precisa ser executado em navegadores móveis e outros com poucas alterações, portanto, é necessário localizar o status do navegador móvel / não móvel e para dispositivos móveis definir a janela de visualização para a largura do dispositivo. Como os scripts podem ser executados a partir do cabeçalho, o js abaixo no cabeçalho parece alterar a metatag para a largura do dispositivo Antes de a página carregar. Pode-se notar que o uso de navigator.userAgent é estipulado como experimental. O script deve seguir a entrada da metatag para ser alterado, portanto, é necessário escolher algum conteúdo inicial e, em seguida, alterar em alguma condição. 

<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