¿Es posible usar JavaScript para cambiar las metaetiquetas de la página?

113

Si pongo un div en el encabezado y visualizo: ninguno, entonces uso JavaScript para mostrarlo, ¿funcionará?

Editar:

Tengo cosas cargadas en AJAX. Y como mi AJAX cambia la parte "principal" del sitio, también quiero cambiar las metaetiquetas.

javascript jquery meta-tags

— TIMEX
fuente

47

eso es como usar un zapato como sombrero

— Ben

8

o usando un editor de texto como ide. No, espera, eso se considera genial.

— Dan Rosenstark

23

Tienes razón, soy estúpido

— TIMEX

2

Hola TIMEX, ¿tal vez un cambio de la respuesta aceptada esté en su lugar? Si no hay otra razón más que darle a Byron un respiro en los votos negativos por su respuesta obsoleta.

— Alex

1

Quiero hacer esto para poder administrar las metaetiquetas (og en particular) con mi marco de javascript, luego hacer que mi motor de preprocesamiento escriba / almacene en caché esto para los rastreadores. De lo contrario, necesitaría un middleware adicional para determinar las etiquetas de mi API antes de representar el índice de mi SPA, lo que ralentizaría la carga, para empezar ...

— Soft Bullets

160

Si tu puedes hacerlo.

Hay algunos casos de uso interesantes: algunos navegadores y complementos analizan los meta elementos y cambian su comportamiento para diferentes valores.

Ejemplos

Skype: apaga el analizador de números de teléfono

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

iPhone: desactiva el analizador de números de teléfono

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

Marco de Google Chrome

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

Definición de ventana gráfica para dispositivos móviles

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

Este se puede cambiar mediante JavaScript. Ver: Una solución para el error de escala de la ventana gráfica del iPhone

Metadescripción

Algunos agentes de usuario (Opera, por ejemplo) utilizan la descripción para los marcadores. Puede agregar contenido personalizado aquí. Ejemplo:

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

Entonces, no se trata solo de motores de búsqueda.

— fuxia
fuente

9

Sospecho que la mayoría de metas como esta tienen efectos que no se pueden cambiar una vez que se carga la página. Pero sí, meta es mucho más que keywordsy description.

— Bobince

2

@bobince: En realidad, el SKYPE_TOOLBAR todavía tiene efecto si lo inserta con js (lo cual es útil ya que al validador html5 no le gusta esa metaetiqueta).

— DaedalusFall

1

@DaedalusFall: sí, creo que solo puedes hacer eso con document.writeel encabezado, es demasiado tarde para cambiarlo una vez que se cargue la página, ya que Skype ya habrá destrozado el DOM, ¡cosa horrible!

— Bobince el

1

Esto es muy útil para compartir en redes sociales con servicios como Facebook. Por ejemplo, para cambiar el elemento og: title: $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');

— bdanin

2

Puedes hacer algunas cosas interesantes con esto. Cambio el color de la barra de direcciones de Chrome cuando cambia la diapositiva del encabezado. const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);Chrome en Android detecta la actualización y cambia el color

— Dominic Bartl

149

Sí lo es.

Por ejemplo, para establecer la metadescripción:

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

— Jayms
fuente

23

¡Me alegro de que alguien haya dado una respuesta en js puro (como se solicita en la pregunta)!

— Soft Bullets

Hola jayms. Gracias por el consejo. Pero probé este método para intentar cambiar la etiqueta og: title, pero no funcionó. Así es como lo hice: document.querySelector ('meta [name = "og: title"]'). SetAttribute ("content", "Ejemplo con metaetiqueta de título"); ¿Algunas ideas?

— Jorge Mauricio

1

Parece que necesitaría consultar el propertyatributo, no el nameatributo, es decirmeta[property="og:title"]

— jayms

69

Usaría algo como (con jQuery):

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

Pero eso sería en su mayoría inútil ya que las metaetiquetas generalmente solo se raspan cuando se carga el documento, generalmente sin ejecutar JavaScript.

— MiffTheFox
fuente

7

Incluso funciona con selectores como $('meta[property=og:somestuff]'), que sospeché que entraría en conflicto con la sintaxis de selección de jQuery debido a los dos puntos.

— pau.moreno

8

En caso de que alguien más esté buscando esta solución exacta, debe poner comillas alrededor de og: somestuff - Necesitaba el contenido de la etiqueta de imagen, este era mi código: var imgurl = $ ("meta [property = 'og: image '] "). attr (" contenido ");

— Daniel

2

Se confirmó que funciona para la configuración de la ventana gráfica meta (es necesario para habilitar / deshabilitar el zoom para ciertas subpáginas en jQuery Mobile). ¡Gracias!

— NPC

1

@stealthcopter Puedo verificar que esto no :( espera, lo hace, pero los cambios no son visibles en la ventana "ver fuente" de

— FFox

1

@yPhil Esto es javascript (o jQuery), por lo que todos y cada uno de los cambios que realice en el DOM no se reflejan al ver el código fuente desde el navegador. Se reflejará cuando use la herramienta del desarrollador para ver la fuente. La fuente del navegador se carga solo una vez cuando se carga la página. Las solicitudes de solicitud ajax no son cargas de página.

— Zubair1

34

Puede cambiar meta con, por ejemplo, llamadas de jQuery, como estas:

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

Creo que hace cuestión por ahora, ya que Google dijo que lo harán a través de indexar el contenido ajax #!hashesy _escaped_fragment_llamadas. Y ahora pueden verificarlo (incluso automáticamente, con navegadores sin cabeza, consulte el enlace 'Creación de instantáneas HTML' en la página mencionada anteriormente), así que creo que es el camino para los expertos en SEO.

— eyedmax
fuente

3

Gracias por esto. Acabo de resolver mi problema. Como facebook tiene gráfico abierto. El sitio que estoy desarrollando tiene un plugin History jQuery y etiquetas hash. Por lo tanto, la URL y la descripción del gráfico abierto de FB deben cambiarse siempre que haya un cambio de hash. +1 por una gran respuesta y no ser negativo hacia una pregunta justa.

— Damien Keitel

5

En realidad, ahora Google también puede ejecutar JavaScript sin necesidad de crear instantáneas de página, por lo que ahora las metaetiquetas dinámicas son muy importantes.

— Francesco Abbruzzese

33

Definitivamente es posible usar Javascript para cambiar las metaetiquetas de la página. Aquí hay un enfoque solo de 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!!";

He verificado que Google indexa estos cambios del lado del cliente para el código anterior.

— Tim Moisés
fuente

3

¡Interesante! Gracias por informarme de la element = collection[name]sintaxis.

— Jayms

11

Las metaetiquetas son parte del dom y se puede acceder y, supongo, cambiar, pero los motores de búsqueda (los principales consumidores de metaetiquetas) no verán el cambio, ya que no se ejecutará el javascript. Entonces, a menos que esté cambiando una metaetiqueta (se le viene a la mente una actualización) que tiene implicaciones en el navegador, ¿esto podría ser de poca utilidad?

— Futtta
fuente

3

+1 - Aterricé en esta pregunta porque me preguntaba específicamente sobre la meta actualización. Estoy creando una aplicación que usa el sondeo ajax para actualizar los datos en la pantalla y quiero proporcionar una alternativa básica para los navegadores que no tienen habilitado javascript. Estoy pensando que podría lograr esto creando una metaetiqueta de actualización de forma predeterminada y, si javascript está habilitado, simplemente elimine la metaetiqueta. - Ahora para ver si realmente funciona ...

— jessegavin

@futtta, la etiqueta de meta descripción se usa para descripciones de marcadores en Opera, por lo que en realidad hay un beneficio para el usuario de que su meta descripción pueda cambiarse.

— XP1

11

Debería ser posible así (o 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
fuente

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">');
});

— usuario3320390
fuente

6

Comencé con su ejemplo, pero me di cuenta de que no tiene que eliminar y volver a agregar las metaetiquetas. Puede cambiar el atributo de contenido de esta manera:jQuery('meta[property="og:title"]').attr('content', "blubb1");

— Tobias Beuving

Tienes razón @ user3320390. Es diferente quitar una etiqueta que cambiarla. FB actúa por lo que está escrito en HTML y NO por los valores de las etiquetas.

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

5

Puede utilizar una solución más sencilla y ligera:

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

— Ali Seyfollahi
fuente

2

simple atributo add y div para cada ejemplo de metaetiqueta

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

ahora como un cambio div normal por ej. n clic

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

función cambiar etiquetas 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
fuente

2

Si no tenemos la metaetiqueta en absoluto, podemos usar lo siguiente:

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

— romano
fuente

2

Para cualquiera que intente cambiar las metaetiquetas og: title (o cualquier otra). Me las arreglé para hacerlo de esta manera:

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

Tenga en cuenta que 'meta [propiedad = "og: título"]' contiene la palabra PROPIEDAD y no NOMBRE.

— Jorge Mauricio
fuente

1

No, un div es un elemento del cuerpo, no un elemento principal

EDITAR: Entonces lo único que obtendrán los SE es el HTML base, no el modificado ajax.

— Ben
fuente

Espero que esto no sea cierto.

— David Spector

1

Sí, es posible agregar metaetiquetas con Javascript. Lo hice en mi ejemplo

¿Android no respeta la eliminación de metaetiquetas?

Pero, no sé cómo cambiarlo aparte de quitarlo. Por cierto, en mi ejemplo ... cuando haces clic en el botón 'AGREGAR', agrega la etiqueta y la ventana gráfica cambia respectivamente, pero no sé cómo revertirla (eliminarla, en Android) ... Ojalá hubiera Firebug para Android, así que Vi lo que estaba pasando. Firefox elimina la etiqueta. Si alguien tiene alguna idea sobre esto, tenga en cuenta mi pregunta.

— Chamilyan
fuente

0

tener esto en el índice

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

tener esto en ajaxfiles og: escriba "og: título" og: descripción y og: imagen

y agrega esto también

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

luego agregue js después de ajaxCall

FB.XFBML.parse();

Editar: luego puede mostrar el título y la imagen correctos en Facebook en douments txt / php (los míos se llaman simplemente .php como extensiones, pero son más archivos txt). Luego tengo las metaetiquetas en estos archivos, y el enlace al índice en cada documento, también un metaenlace en el archivo de índice para cada subarchivo.

Si alguien conoce una mejor manera de hacer esto, agradecería cualquier adición :)

— sunto
fuente

Esto no parece ser una respuesta a la pregunta sobre cómo agregar dinámicamente meta-etiquetas.

— Alex

0

Esto parece funcionar para una pequeña aplicación configurada de forma geométrica rígida donde debe ejecutarse tanto en navegadores móviles como en otros navegadores con pocos cambios, por lo que es necesario encontrar el estado del navegador móvil / no móvil y para móviles configurar la ventana gráfica al ancho del dispositivo. Como los scripts se pueden ejecutar desde el encabezado, el js a continuación en el encabezado parece cambiar la metaetiqueta para el ancho del dispositivo antes de que se cargue la página. Se podría notar que el uso de navigator.userAgent está estipulado como experimental. La secuencia de comandos debe seguir la entrada de la metaetiqueta para ser cambiada, por lo que uno debe elegir algún contenido inicial y luego cambiar en alguna condición.

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