Можно ли использовать JavaScript для изменения мета-тегов страницы?

Question

Можно ли использовать JavaScript для изменения мета-тегов страницы?

Если я положу div в голову и выведу:none, чем использовать JavaScript для его отображения, будет ли это работать?

Редактировать:

У меня есть вещи, загруженные в AJAX. И так как мой AJAX меняет "основную" часть сайта, я хочу изменить и метатеги.

167

javascript jquery meta-tags

Источник

user179736 02 апр '10 в 19:33

20 ответов

Другие вопросы по тегам javascript jquery meta-tags

user6079785 17 мар '16 в 22:52 2016-03-17 22:52 · Answer 1 · 2016-03-17 22:52

Да, это.

Например, чтобы установить мета-описание:

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

255

Источник

user6079785 17 мар '16 в 22:52

user299509 02 апр '10 в 20:08 2010-04-02 20:08 · Answer 2 · 2010-04-02 20:08

Да, вы можете сделать это.

Есть несколько интересных случаев использования: некоторые браузеры и плагины анализируют метаэлементы и изменяют свое поведение для различных значений.

Примеры

Skype: отключить анализатор телефонных номеров

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

iPhone: отключить анализатор телефонных номеров

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

Google Chrome Frame

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

Определение области просмотра для мобильных устройств

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

Это можно изменить с помощью JavaScript. Смотрите: Исправление для ошибки масштабирования области просмотра iPhone

Мета-описание

Некоторые пользовательские агенты (например, Opera) используют описание для закладок. Вы можете добавить персонализированный контент здесь. Пример:

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

Так что речь идет не только о поисковых системах.

user100835 02 апр '10 в 19:41 2010-04-02 19:41 · Answer 3 · 2010-04-02 19:41

Вы бы использовали что-то вроде (с JQuery):

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

Но это было бы в основном бессмысленно, поскольку метатеги обычно очищаются только при загрузке документа, обычно без выполнения какого-либо JavaScript.

73

Источник

user100835 02 апр '10 в 19:41

user7724629 09 ноя '17 в 22:39 2017-11-09 22:39 · Answer 4 · 2017-11-09 22:39

Определенно можно использовать Javascript для изменения мета-тегов страницы. Вот только 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!!";

Я подтвердил, что Google индексирует эти изменения на стороне клиента для кода выше.

user516829 23 ноя '10 в 01:29 2010-11-23 01:29 · Answer 5 · 2010-11-23 01:29

Вы можете изменить мета, например, с помощью вызовов jQuery, например:

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

Я думаю, что это имеет значение на данный момент, так как Google сказал, что они будут индексировать контент AJAX через #!hashes а также _escaped_fragment_ звонки. И теперь они могут это проверить (даже автоматически, с помощью безголовых браузеров, см. Ссылку "Создание снимков HTML" на странице, упомянутой выше), так что я думаю, что это путь для хардкорных ребят из SEO.

user2254990 03 окт '19 в 12:00 2019-10-03 12:00 · Answer 6 · 2019-10-03 12:00

Можно использовать более простое и легкое решение:

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

18

Источник

user2254990 03 окт '19 в 12:00

user237449 02 апр '10 в 19:39 2010-04-02 19:39 · Answer 7 · 2010-04-02 19:39

Метатеги являются частью dom, и к ним можно получить доступ и, я думаю, изменить, но поисковые системы (основные потребители мета-тэгов) не увидят изменения, так как JavaScript не будет выполнен. так что, если вы не меняете метатег (который приходит на ум), который имеет значение в браузере, это может быть бесполезным?

user153390 02 апр '10 в 19:40 2010-04-02 19:40 · Answer 8 · 2010-04-02 19:40

Это должно быть возможно так (или использовать jQuery как $('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>

user3320390 17 апр '14 в 17:26 2014-04-17 17:26 · Answer 9 · 2014-04-17 17:26

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

11

Источник

user3320390 17 апр '14 в 17:26

05 фев '21 в 08:04 2021-02-05 08:04 · Answer 10 · 2021-02-05 08:04

Атрибут name позволяет вам ссылаться на элемент по его имени (например, id) через список дочерних элементов, поэтому быстрый способ:

      document.head.children.namedItem('description').content = '...'

7

Источник

05 фев '21 в 08:04

user2510785 11 июн '20 в 23:05 2020-06-11 23:05 · Answer 11 · 2020-06-11 23:05

Для тех, кто пытается изменить метатеги og:title (или любые другие). Мне удалось это сделать так:

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

Обратите внимание, что мета [property="og:title"] "содержит слово PROPERTY, а не NAME.

5

Источник

user2510785 11 июн '20 в 23:05

user3442717 20 мар '14 в 15:21 2014-03-20 15:21 · Answer 12 · 2014-03-20 15:21

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

5

Источник

user3442717 20 мар '14 в 15:21

user4791116 17 мар '19 в 21:04 2019-03-17 21:04 · Answer 13 · 2019-03-17 21:04

Если у нас вообще нет метатега, тогда мы можем использовать следующее:

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

2

Источник

user4791116 17 мар '19 в 21:04

user1529295 26 янв '13 в 02:54 2013-01-26 02:54 · Answer 14 · 2013-01-26 02:54

Просто добавьте и разделите атрибут для каждого примера метатега

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

теперь, как нормальное изменение div для ex. н клик

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

функция изменения тегов с помощью jQuery

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

}

user14198272 05 ноя '20 в 16:55 2020-11-05 16:55 · Answer 15 · 2020-11-05 16:55

var description=document.getElementsByTagName('h4')[0].innerHTML;
var link = document.createElement('meta');
  
link.setAttribute('name', 'description');
  
link.content = description;
  
document.getElementsByTagName('head')[0].appendChild(link);
var htwo=document.getElementsByTagName('h2');
var hthree=document.getElementsByTagName('h3');
var ls=[];
for(var i=0;i<hthree.length;i++){ls.push(htwo[i].innerHTML);}

for(var i=0;i<hthree.length;i++){ls.push(hthree[i].innerHTML);}

var keyword=ls.toString()
;
var keyw = document.createElement('meta');
  
keyw.setAttribute('name', 'keywords');
  
keyw.content = keyword;
  
document.getElementsByTagName('head')[0].appendChild(keyw);

в моем случае я пишу этот код, и все мои метатеги работают отлично, но мы не видим фактический метатег, он будет где-то спрятан.

user305423 02 апр '10 в 19:34 2010-04-02 19:34 · Answer 16 · 2010-04-02 19:34

Нет, div это элемент body, а не элемент head

РЕДАКТИРОВАТЬ: Тогда SE получит только базовый HTML, а не модифицированный ajax.

1

Источник

user305423 02 апр '10 в 19:34

user339768 02 сен '10 в 22:42 2010-09-02 22:42 · Answer 17 · 2010-09-02 22:42

Да, можно добавлять метатеги с помощью Javascript. Я сделал в своем примере

Android не уважает удаление метатега?

Но я не знаю, как изменить его, а затем удалить его. Кстати, в моем примере... когда вы нажимаете кнопку "ДОБАВИТЬ", он добавляет тег и область просмотра соответственно изменяется, но я не знаю, как вернуть его обратно (удалить его в Android).. Мне бы хотелось, чтобы был Firebug для Android, так Я видел, что происходит. Firefox действительно удаляет тег. если у кого-то есть какие-либо идеи по этому поводу, пожалуйста, обратите внимание на мой вопрос.

user4410942 24 ноя '15 в 04:03 2015-11-24 04:03 · Answer 18 · 2015-11-24 04:03

Иметь это в индексе

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

иметь это в ajaxfiles og:type"og:title"og:description и og: image

и добавить это также

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

затем добавить в JS после ajaxCall

FB.XFBML.parse();

Редактировать: затем вы можете отобразить правильный заголовок и изображение на Facebook в txt/php douments(мои просто названы.php как расширения, но это больше txt файлов). Затем у меня есть метатеги в этих файлах и ссылка на индекс в каждом документе, а также мета-ссылка в индексном файле для каждого субфайла.

если кто-нибудь знает лучший способ сделать это, я был бы признателен за любые дополнения:)

user5949836 31 окт '17 в 04:52 2017-10-31 04:52 · Answer 19 · 2017-10-31 04:52

Похоже, что это работает для небольшого строго геометрически настроенного приложения, в котором оно должно работать как на мобильных, так и на других браузерах с небольшими изменениями, поэтому необходимо найти состояние мобильного / не мобильного браузера и для мобильных устройств установить порт просмотра на ширину устройства. Поскольку сценарии можно запускать из заголовка, приведенный ниже заголовок js, похоже, меняет метатег для ширины устройства до загрузки страницы. Можно отметить, что использование navigator.userAgent предусмотрено как экспериментальное. Сценарий должен следовать за метатегом, чтобы быть измененным, поэтому необходимо выбрать некоторое начальное содержимое, а затем изменить его на какое-то условие.

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

,,,,,,

user72958 13 июл '21 в 15:03 2021-07-13 15:03 · Answer 20 · 2021-07-13 15:03

Вот как это сделать с помощью простого javascript. Я использовал его для изменения цвета заголовка в новой бета-версии Safari 15:

      <html><head>

    <meta id="themeColor" name="theme-color" content="">

</head><body><script>

    var delay = 50;
    var increment = 5;
    var current = 0 - increment;

    function setHeaderColor(){

        current += increment;
        if (current > 360) current = 0;

        var colorStr = 'hsl('+current+',100%,50%)';
        themeColor.content = colorStr;
        textBlock.style.color = colorStr;
    }

    setInterval(setHeaderColor, delay);

</script><pre id="textBlock" style="font-size:30px;">

  Needs Safari 15

</pre></body></html>

Ссылка на рабочий пример: blog.svija.love .