Як динамічно змінити назву веб-сторінки?

У мене є веб-сторінка, яка реалізує набір вкладок, кожен із яких демонструє різний вміст. Клацання вкладки не оновлює сторінку, а приховує / приховує вміст на стороні клієнта.

Тепер існує вимога змінити заголовок сторінки відповідно до вибраної на вкладці сторінки (з SEO причин). Чи можливо це? Чи може хтось запропонувати рішення динамічно змінювати заголовок сторінки через javascript без перезавантаження сторінки?

Оновлення : відповідно до коментарів та посилань на SearchEngineLand більшість веб-сканерів індексуватиме оновлений заголовок. Нижче відповідь застаріла, але код все ще застосовується.

Ви можете просто зробити щось на кшталт, document.title = "This is the new page title.";але це повністю переможе мету SEO. Більшість сканерів не збираються підтримувати JavaScript в першу чергу, тому вони будуть приймати все, що є в елементі, як назву сторінки.

Якщо ви хочете, щоб це було сумісним з більшістю важливих сканерів, вам потрібно буде фактично змінити сам тег заголовка, що передбачало б перезавантаження сторінки (PHP тощо). Ви не зможете обійти це, якщо ви хочете змінити заголовок сторінки таким чином, щоб бачив сканер.

Я хочу привітатись з майбутнім :) Речі, що відбулися нещодавно:

1. Google тепер запускає JavaScript, який знаходиться на вашому веб-сайті ¹
2. Зараз люди використовують такі речі, як React.js, Ember та Angular, щоб виконувати складні завдання JavaScript на сторінці, і Google все ще індексується ¹
3. ви можете використовувати html5 api історії api (pushState, react-router, ember, angular), яка дозволяє робити такі речі, як окремі URL-адреси для кожної вкладки, яку ви хочете відкрити, і Google проіндексує, що ¹

Отже, щоб відповісти на ваше запитання, ви можете сміливо змінити заголовок та інші метатеги з javascript (ви також можете додати щось на зразок https://prerender.io, якщо ви хочете підтримувати пошукові системи, які не є Google), просто зробіть їх доступними як окремі URL-адреси ( інакше як Google дізнається, що це різні сторінки, які відображатимуться в результатах пошуку?). Зміна пов’язаних з SEO тегів (після того, як користувач змінив сторінку, натиснувши щось), є простим:

if (document.title != newTitle) {
    document.title = newTitle;
}
$('meta[name="description"]').attr("content", newDescription);

Просто переконайтеся, що css та javascript не заблоковані в robots.txt, ви можете використовувати функцію "Вилучити" як службу Google в Інструментах Google для веб-майстрів.

1: http://searchengineland.com/ested-googlebot-crawls-javascript-heres-learned-220157

Не можу зрозуміти, як зміна заголовка сторінки через Javascript допоможе SEO. Більшість пошукових ботів (або всіх) не запускають Javascript і читають лише початково завантажений заголовок, який є розміткою.

Якщо ви хочете допомогти SEO, то вам потрібно буде змінити заголовок сторінки у зворотному та подати різні версії сторінки.

Використовуйте document.title.

Дивіться цю сторінку і для рудиментарного підручника.

Код є
document.title = 'test'

Існує багато способів змінити назву, основні два:

Сумнівний метод

Помістіть тег заголовка в HTML (наприклад <title>Hello</title>), а потім у javascript:

let title_el = document.querySelector("title");

if(title_el)
    title_el.innerHTML = "World";

Очевидно правильний метод

Найпростіший з них - це фактично використовувати метод, передбачений модель об'єктної документації (DOM)

document.title = "Hello World";

Колишній метод - це, як правило, те, що ви зробите для зміни тегів, знайдених в тілі документа. Використання цього методу для зміни тегів метаданих, таких як ті, що знаходяться в голові (як-от title), є в кращому випадку сумнівною практикою, не ідіоматичною, не дуже вдалою стилем для початку і може навіть не бути портативною. Однак ви можете бути впевнені в тому, що це буде дратувати інших розробників, якщо вони побачать title.innerHTML = ...код, який вони підтримують.

Те, що ви хочете піти, це останній метод. Ця властивість надається в специфікації DOM спеціально для того, щоб, як випливає з назви, змінити назву.

Зауважте також, що якщо ви працюєте з XUL, ви, можливо, захочете перевірити, чи завантажився документ, перш ніж намагатися встановити або отримати заголовок, так як в іншому випадку ви посилаєтесь undefined behavior(тут будуть дракони), що саме по собі є страшною концепцією. Це може статися або не відбуватися через JavaScript, оскільки документи в DOM не обов'язково стосуються JavaScript. Але XUL - це цілий «звір», тому я відволікаюсь.

Говорячи про .innerHTML

Деякі хороші поради, які слід пам’ятати, .innerHTMLполягають у тому, що використання в цілому неохайно. Використовуйте appendChildзамість цього.

Хоча два випадки, коли я все ще вважаю .innerHTMLсебе корисними, включають вставлення простого тексту в невеликий елемент ...

label.innerHTML = "Hello World";
// as opposed to... 
label.appendChild(document.createTextNode("Hello World"));
// example:
el.appendChild(function(){
    let el = document.createElement("span");
    el.className = "label";
    el.innerHTML = label_text;
    return el;
}());

... і очищення контейнера ...

container.innerHTML = "";
// as opposed to... umm... okay, I guess I'm rolling my own
[...container.childNodes].forEach(function(child){
    container.removeChild(child);
});

Використання document.title - це те, як ви могли б виконати його в JavaScript, але як це може допомогти в SEO? Як правило, боти не виконують код JavaScript під час проходження сторінок.

Сучасні сканери здатні аналізувати динамічно створений вміст у DOM, тому використання document.title = ...ідеально чудово.

Вам доведеться повторно розмістити сторінку з новим заголовком, щоб сканери помітили зміни. Робити це через javascript буде корисно лише людському читачеві, сканери не збираються виконувати цей код.

для тих, хто шукає npm-версію, є ціла бібліотека для цього:

npm install --save react-document-meta

import React from 'react';
import DocumentMeta from 'react-document-meta';

class Example extends React.Component {
  render() {
    const meta = {
      title: 'Some Meta Title',
      description: 'I am a description, and I can create multiple tags',
      canonical: 'http://example.com/path/to/page',
      meta: {
        charset: 'utf-8',
        name: {
          keywords: 'react,meta,document,html,tags'
        }
      }
    };

    return (
      <div>
        <DocumentMeta {...meta} />
        <h1>Hello World!</h1>
      </div>
    );
  }
}

React.render(<Example />, document.getElementById('root'));

Можливо, ви можете завантажити в своєму заголовку всі заголовки вкладок одним рядком, а після завантаження однієї з вкладок змінити заголовок через javascript

наприклад: спочатку встановіть свою назву

my app | description | contact | about us | 

як тільки ви завантажите одну з запущених вкладок:

document.title = "my app | tab title";

Один із способів, який може вам допомогти в SEO та як і раніше матимуть ваші сторінки вкладок, як вони є, - використовувати названі якорі, які відповідають кожній вкладці, як у:

http://www.example.com/mypage#tab1, http://www.example.com/mypage#tab2, etc.

Вам потрібно буде обробити сторону сервера, щоб проаналізувати URL-адресу та встановити початкову назву сторінки, коли браузер надає сторінку. Я також хотів би зробити цю вкладку "активною". Після завантаження сторінки та фактичного користувача переключення вкладок, ви можете використовувати javascript для зміни, document.titleяк заявили інші користувачі.

Використовуйте document.title. Він буде корисний для більшості речей, але знищить SEO на вашому веб-сайті.

Приклад:

document.write("title - " + document.title + "<br>");
document.title = "New title here!";
// Notice: this will defeat purpose of SEO. Not useful for SEO-friendly sites.
document.write("title - " + document.title + "<br>");

body {
  font-family: Consolas, 'Courier New', monospace;
}

<!DOCTYPE html>
<html>
  <head><title>Old title</title></head>
  <body><p>
    Lorem ipsum dolor sit amet, at movet detraxit mediocritatem eam, nam iusto abhorreant ne. Ei pro          debet adolescens voluptaria, eu minim scaevola conceptam vel. Vim ea torquatos constituto                complectitur, usu eu civibus insolens eleifend. Ex ubique quaerendum his.

  </p></body>
</html>

Ви можете використовувати JavaScript. Деякі боти, включаючи Google, будуть виконувати JavaScript на користь SEO (показуючи правильну назву в SERP).

document.title = "Google will run this JS and show the title in the search results!";

Однак це складніше, оскільки ви показуєте та ховаєте вкладки, не оновлюючи сторінку та не змінюючи URL-адресу. Можливо, додавання якоря допоможе, як заявили інші. Можливо, мені доведеться відмовитись від своєї відповіді.

Статті, що показують позитивні результати: http://www.aukseo.co.uk/use-javascript-to-generate-seo-friendly-title-tags-1275/ http://www.ifinity.com.au/2012/10 / 04 / Changing_a_Page_Title_with_Javascript_to_update_a_Google_SERP_Entry

Не вважайте, що бот не виконує JavaScript. http://searchengineland.com/ested-googlebot-crawls-javascript-heres-learned-220157 Google та інші пошукові системи знають, що найкращі результати для індексації - це результати, які фактичний кінцевий користувач побачить у своєму браузері, включаючи JavaScript.

Оскільки пошукові системи ігнорують більшість javascript, вам потрібно буде зробити так, щоб пошукові системи могли сканувати за допомогою вкладок без використання Ajax. Зробіть для кожної вкладки посилання з href, який завантажує всю вибрану вкладку. Тоді сторінка може мати цей заголовок у тезі.

Обробник подій onclick все ще може завантажувати сторінки через ajax для глядачів.

Щоб побачити сторінки так, як їх бачать більшість пошукових систем, вимкніть Javascript у своєму браузері та спробуйте зробити так, щоб натискання на вкладки завантажило сторінку із вибраною вкладкою та правильним заголовком.

Якщо ви завантажуєтесь через ajax і хочете динамічно змінити заголовок сторінки за допомогою Javascript, тоді виконайте:

document.title = 'Put the new title here';

Однак пошукові системи не побачать цієї зміни, внесеної в JavaScript.

Але для того, щоб отримати SEO-вигоди

Вам потрібно зробити перезавантаження сторінки, коли сторінка зміниться, щоб пошукова система побачила різні заголовки тощо.

Тому переконайтеся, що перезавантаження сторінки спочатку працює, а потім додайте document.title зміни

Я просто хочу тут щось додати: зміна заголовка через JavaScript насправді корисна, якщо ви оновлюєте базу даних через AJAX, тож заголовок змінюється, не потребуючи оновлення сторінки. Заголовок фактично змінюється за допомогою скриптової мови на вашому сервері, але його зміна через JavaScript - це просто зручність роботи та інтерфейс користувача, що робить роботу користувачів більш приємною та простою.

Тепер, якщо ви змінюєте заголовок через JavaScript просто для чортви, то не варто цього робити.

Google відзначив, що всі js-файли надані, але насправді я втратив назву та інші метатеги, які були надані Reactjs на цьому веб-сайті, і фактично втратив свою позицію в Google! Я багато шукав, але, схоже, всі сторінки повинні бути попередньо відредаговані або за допомогою SSR (Server Side Rendering), щоб мати свій SEO-дружній протокол!
Він розширюється до Reactjs, Angularjs тощо.
Коротше кажучи, кожна сторінка, яка має джерело перегляду сторінок у браузері, індексується усіма роботами, якщо це, ймовірно, не може Google проіндексувати, але інші пропустити індексацію!

Найпростіший спосіб - видалити <title>тег із index.html і включити його

<head>
<title> Website - The page </title></head>

на кожній сторінці в Інтернеті. Павуки знайдуть це і будуть показані в результатах пошуку :)