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

114

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

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

У меня все загружено в AJAX. И поскольку мой AJAX изменяет «основную» часть сайта, я хочу также изменить мета-теги.

javascript jquery meta-tags

— TIMEX
источник

47

это все равно, что носить обувь вместо шляпы

— Бен

8

или используя текстовый редактор как ide. Нет, подождите, это считается крутым.

— Дэн Розенстарк

23

Ты прав, я тупой

— TIMEX

2

Привет, TIMEX, может быть, на его месте смена принятого ответа? Если нет другой причины, кроме как дать Байрону возможность отказаться от своего устаревшего ответа.

— Alex

1

Я хочу сделать это, чтобы я мог управлять метатегами (в частности, og) с помощью моей инфраструктуры javascript, а затем заставить мой механизм предварительной обработки записывать / кэшировать это для поисковых роботов. В противном случае мне понадобится дополнительное промежуточное программное обеспечение для определения тегов из моего API перед рендерингом моего индекса SPA, что, во-

— Soft Bullets

161

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

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

Примеры

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>

Итак, дело не только в поисковых системах.

— фуксия
источник

9

Я подозреваю, что у большинства подобных метаданных есть эффекты, которые нельзя изменить после загрузки страницы. Но да, мета - это гораздо больше, чем просто keywordsи description.

— bobince 02

2

@bobince: На самом деле, SKYPE_TOOLBAR по-прежнему действует, если вы вставляете его с помощью js (что полезно, поскольку валидатору html5 не нравится этот метатег).

— DaedalusFall

1

@DaedalusFall: да, я думаю, вы можете сделать это только с document.writeпомощью заголовка, хотя уже слишком поздно менять его после загрузки страницы, поскольку Skype уже искалечил DOM, ужасная вещь!

— bobince

1

Это очень полезно при обмене в социальных сетях такими сервисами, как Facebook. Например, чтобы изменить элемент og: title: $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');

— bdanin

2

Вы можете делать с этим крутые штуки. Я меняю цвет адресной строки Chrome при смене слайда в заголовке. const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);Chrome на Android обнаруживает обновление и меняет цвет

— Доминик Бартл

150

Да, это так.

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

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

— Джеймс
источник

23

Рад, что кто-то дал ответ на чистом js (как и просили в вопросе)!

— Soft Bullets

Привет, Джеймс. Спасибо за чаевые. Но я попробовал этот метод, чтобы попытаться изменить тег og: title, но это не сработало. Вот как я это сделал: document.querySelector ('meta [name = "og: title"]'). SetAttribute ("content", "Пример с метатегом title"); Любые идеи?

— Хорхе Маурисио,

1

Похоже, вам нужно будет запросить propertyатрибут, а не nameатрибут, то естьmeta[property="og:title"]

— jayms

69

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

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

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

— MiffTheFox
источник

7

Он даже работает с такими селекторами, как $('meta[property=og:somestuff]'), которые, как я подозревал, будут конфликтовать с синтаксисом выбора jQuery из-за двоеточия.

— pau.moreno

8

Если кто-то еще ищет это точное решение, вам нужно заключить og: somestuff в кавычки - мне нужно было содержимое тега изображения, это был мой код: var imgurl = $ ("meta [property = 'og: image '] "). attr (" контент ");

— Дэниел

2

Подтверждено, что он работает для настройки мета-окна просмотра (необходимо это для включения / отключения масштабирования для определенных подстраниц в jQuery Mobile). Спасибо!

— NPC

1

@stealthcopter Я могу проверить, что это не так :( подождите, есть, но изменения не видны в окне "исходный код"

— FFox

1

@yPhil Это javascript (или jQuery), поэтому любые изменения, которые вы вносите в DOM, не отражаются при просмотре исходного кода в браузере. Это отразится, когда вы используете инструмент разработчика для просмотра исходного кода. Исходный код браузера загружается только один раз при загрузке страницы. Запросы запроса ajax не являются загрузкой страницы.

— Zubair1

34

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

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

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

— eyedmax
источник

3

Спасибо тебе за это. Только что решил мою проблему. Поскольку у facebook есть открытый график. На разрабатываемом мной сайте есть плагин History jQuery и хэш-теги. Таким образом, URL-адрес и описание открытого графа FB должны быть изменены при каждом изменении хэша. +1 за отличный ответ и не отрицательное отношение к справедливому вопросу.

— Дэмиен Кейтель,

5

Фактически, теперь Google может запускать javascript без необходимости создавать снимки страниц, поэтому теперь динамические метатеги имеют большое значение!

— Francesco Abbruzzese

33

Определенно можно использовать 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 индексирует эти изменения на стороне клиента для приведенного выше кода.

— Тим Моисей
источник

3

Интересный! Спасибо, что ознакомили меня с element = collection[name]синтаксисом.

— jayms 09

11

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

— футта
источник

3

+1 - Я остановился на этом вопросе, потому что меня интересовало конкретно обновление мета. Я создаю приложение, которое использует опрос ajax для обновления данных на экране, и я хочу предоставить грубый откат для браузеров, в которых не включен javascript. Я думаю, что смогу добиться этого, создав по умолчанию метатег обновления, а если включен javascript, просто удалите метатег. - Теперь посмотрим, действительно ли это работает ...

— jessegavin

@futtta, мета-тег описания используется для описаний закладок в Opera, поэтому на самом деле есть преимущество для пользователя, заключающееся в том, что ваше мета-описание может быть изменено.

— XP1

11

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

— Микаэль Свенсон
источник

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

— пользователь3320390
источник

6

Я начал с вашего примера, но понял, что вам не нужно удалять и повторно добавлять метатеги. Вы можете просто изменить атрибут содержимого следующим образом:jQuery('meta[property="og:title"]').attr('content', "blubb1");

— Тобиас Бёвинг,

Вы правы @ user3320390. Удаление тега отличается от его изменения. FB действует для того, что написано в HTML, а НЕ для значений тегов.

— Педро Феррейра,

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
источник

5

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

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

— Али Сейфоллахи
источник

2

простой атрибут add и div для каждого примера метатега

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

теперь, как и обычное изменение div, например. п щелчок

<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, ");

}

— Бурхан Ибрагими
источник

2

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

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

— Римский
источник

2

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

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

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

— Хорхе Маурисио
источник

1

Нет, div - это основной элемент, а не заголовок.

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

— Бен
источник

Надеюсь, это неправда.

— Дэвид Спектор,

1

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

Android не соблюдает удаление метатегов?

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

— Чамилян
источник

0

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

<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). Затем у меня есть метатеги в этих файлах и обратная ссылка на индекс в каждом документе, а также мета-ссылка в индексном файле для каждого подфайла.

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

— sunto
источник

Это не похоже на ответ на вопрос о том, как динамически добавлять метатеги?

— Alex

0

Похоже, это работает для небольшого приложения с жесткой геометрической конфигурацией, где оно должно работать как в мобильных, так и в других браузерах с небольшими изменениями, поэтому необходимо найти статус мобильного / немобильного браузера и для мобильных устройств установить размер окна просмотра на ширину устройства. Поскольку скрипты можно запускать из заголовка, нижеприведенный 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">

. . . . . .

— jcj52436999
источник