É 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

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