Как динамически изменить заголовок веб-страницы?

У меня есть веб-страница, которая реализует набор вкладок, каждая из которых отображает различный контент. Щелчки вкладок не обновляют страницу, а скрывают / отображают содержимое на стороне клиента.

Теперь существует требование изменить заголовок страницы в соответствии с выбранной вкладкой на странице (по причинам SEO). Это возможно? Может кто-нибудь предложить решение для динамического изменения заголовка страницы с помощью JavaScript без перезагрузки страницы?

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

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

Если вы хотите, чтобы это было совместимо с большинством важных сканеров, вам нужно будет изменить сам тег title, что потребует перезагрузки страницы (PHP и т. П.). Вы не сможете обойти это, если захотите изменить заголовок страницы так, чтобы его мог увидеть сканер.

Хочу поздороваться с будущим :) То, что произошло недавно:

1. Google теперь запускает JavaScript, который находится на вашем сайте ¹
2. Люди теперь используют такие вещи, как React.js, Ember и Angular, чтобы запускать сложные задачи javascript на странице, и она все еще индексируется Google ¹
3. Вы можете использовать HTML5 истории API (pushState, реагировать на маршрутизатор, 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, вы можете использовать Fetch в качестве службы Google в Google Webmaster Tools.

1: http://searchengineland.com/tested-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как заявили другие пользователи.

Вы можете использовать JavaScript. Некоторые боты, включая Google, будут выполнять JavaScript в интересах SEO (показывая правильный заголовок в поисковой выдаче).

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/tested-googlebot-crawls-javascript-heres-learned-220157 Google и другие поисковые системы знают, что наилучшие результаты для индексации - это результаты, которые фактический конечный пользователь увидит в своем браузере, включая JavaScript.

Использование 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, вам нужно сделать так, чтобы поисковые системы могли сканировать с помощью вкладок, не используя Ajax. Сделайте каждую вкладку ссылкой с ссылкой, которая загружает всю страницу с выбранной вкладкой. Тогда страница может иметь этот заголовок в теге.

Обработчик события 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 (рендеринга на стороне сервера), чтобы иметь их SEO-дружественный протокол!
Он расширяется до Reactjs, Angularjs и т. Д.
Короче говоря, каждая страница, которая имеет источник просмотра страниц в браузере, индексируется всеми роботами, если это не так, вероятно, Google может индексировать, но другие пропускают индексацию!

Самый простой способ - удалить <title>тег из index.html и включить

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

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