Чи можна використовувати JavaScript для зміни метатегів сторінки?

114

Якщо я покладу діва в голову і покажу: жодне, ніж використовувати JavaScript для його відображення, чи буде це спрацьовувати?

Редагувати:

У мене в AJAX завантажені речі. І коли мій AJAX змінює "основну" частину сайту, я також хочу змінити мета-теги.

javascript  jquery  meta-tags 
— TIMEX
джерело
47
це як носити взуття в капелюсі
— Бен
8
або використання текстового редактора як ідеї. Не чекайте, це вважається крутим.
— Дан Розенстарк
23
Ти маєш рацію, я дурний
— TIMEX
2
Привіт, TIMEX, можливо, зміна прийнятої відповіді на її місці? Якщо немає жодної іншої причини, крім того, щоб дати Байрону перерву на низових відгуках на його застарілу відповідь.
— Олексій
1
Я хочу це зробити, щоб я міг керувати метатегами (особливо, зокрема) за допомогою моєї програми 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
2
@bobince: Насправді, SKYPE_TOOLBAR все ще набуває чинності, якщо вставити його з js (що корисно, оскільки валідатор html5 не любить цей метатег).
— ДедалОсінь
1
@DaedalusFall: так, я думаю, що ти можеш це зробити лише за document.writeдопомогою заголовка, хоча це занадто пізно змінити його, коли сторінка буде завантажена, оскільки Skype вже заблукав DOM, жахлива річ!
— bobince
1
Це дуже корисно для соціального обміну для таких служб, як Facebook. Наприклад, щоб змінити OG: назва елемента: $('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 виявляє оновлення та змінює колір
— Домінік Бартл
149

Так.

Наприклад, щоб встановити метаопис:

document.querySelector('meta[name="description"]').setAttribute("content", _desc);
— джейми
джерело
23
Радий, що хтось відповів чистим js (як вимагають у запитанні)!
— М’які кулі
Привіт джейми. Дякую за пораду. Але я спробував цей метод, щоб спробувати змінити тег og: title, але нічого не вийшло. Ось як я це зробив: document.querySelector ('meta [name = "og: title"]'). SetAttribute ("вміст", "Приклад з метатегом заголовка"); Якісь ідеї?
— Хорхе Маурісіо
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 "джерело перегляду"
— 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.

— очна карта
джерело
3
Дякую за це. Щойно вирішив мою проблему. Як у Facebook є відкритий графік. На сайті, який я розробляю, є плагін History JQuery та хеш-теги. Отже, URL-адресу та опис відкритого графіка FB потрібно змінювати, коли колись є хеш-зміна. +1 за чудову відповідь і не негатив до справедливого питання.
— Дамієн Кейтель
5
Насправді тепер Google може запускати JavaScript, також не потрібно створювати знімки сторінок, тому зараз динамічні метатеги мають велике значення!
— Франческо Аббруцезе
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
11

метатеги є частиною dom і до них можна отримати доступ і - я здогадуюсь - змінити, але пошукові системи (основні споживачі метатегів) не побачать зміни, оскільки 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");
— Tobias Beuving
Ви прав @ 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

просте додавання та поділ для кожного прикладу метатегів

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

тепер як звичайна зміна діва для колишнього. n клацання

<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 [властивість = "og: title"]' містить слово ВЛАСНІСТЬ, а не ІМ'Я.

— Хорхе Марісіо
джерело
1

Ні, дів - це елемент тіла, а не голова

EDIT: Тоді єдине, що збираються отримати SE, - це базовий HTML, а не модифікований Ajax.

— Бен
джерело
Я сподіваюся, що це неправда.
— Девід Спектор
1

Так, можна додавати метатеги за допомогою Javascript. Я зробив на своєму прикладі

Android не поважає видалення метатегів?

Але я не знаю, як змінити його, а потім видалити його. До речі, у моєму прикладі .. коли ви натискаєте кнопку "ДОБАВИТИ", вона додає тег і вікно перегляду відповідно змінюється, але я не знаю, як повернути його назад (видаліть його в Android). Я бачив, що відбувається. Firefox видаляє тег. якщо у когось є якісь ідеї щодо цього, будь ласка, зверніть увагу на це в моєму запитанні.

— Чамілян
джерело
0

мають це в індексі

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

мати це в ajaxfiles og: введіть "og: title" og: опис та og: image

і додайте також це

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

потім додайте js після ajaxCall

FB.XFBML.parse();

Редагувати: Потім ви можете відобразити правильний заголовок та зображення у facebook у форматі txt / php (мої так само названі .php як розширення, але це більше файли txt). Потім у цих файлах є метатеги, і посилання назад до індексу в кожному документі, а також метапосилання в індексному файлі для кожного підфіла.

якщо хтось знає кращий спосіб зробити це, я буду вдячний за будь-які доповнення :)

— sunto
джерело
Це, здається, не є відповіддю на питання про те, як динамічно додавати метатеги?
— Олексій
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
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.