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

Код
document.title = 'test'

Используйте document.title.

Смотрите также эта страница для рудиментарного руководства.

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

Если вы хотите помочь SEO, вам нужно будет изменить заголовок страницы в серверной части и обслуживать разные версии страницы.

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

You can just do something like, document.title = "This is the new page title.";, but that would totally defeat the purpose of SEO. Most crawlers aren't going to support javascript in the first place, so they will take whatever is in the element as the page title.

If you want this to be compatible with most of the important crawlers, you're going to need to actually change the title tag itself, which would involve reloading the page (PHP, or the like). You're not going to be able to get around that, if you want to change the page title in a way that a crawler can see.

Использование document.title - это то, как вы могли бы сделать это в JavaScript, но как это должно помочь с SEO? Боты обычно не выполняют код javascript при просмотре страниц.

Но для того, чтобы добиться успеха в SEO,

Вам необходимо перезагрузить страницу при изменении страницы, чтобы поисковая система увидела разные заголовки и т. д.

Поэтому сначала убедитесь, что перезагрузка страницы работает, а затем добавьте изменения document.title.

Вам придется повторно подать страницу с новым заголовком, чтобы поисковые роботы заметили изменение. Выполнение этого через javascript принесет пользу только читателю, сканеры не будут выполнять этот код.

Один из способов, который может помочь с SEO и при этом сохранить ваши вкладки такими, какие они есть, - это использовать именованные якоря, соответствующие каждой вкладке, например:

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

Вам потребуется обработка на стороне сервера для анализа URL-адреса и установки начального заголовка страницы, когда браузер отображает страницу. Я бы также сделал эту вкладку «активной». Как только страница загружена и реальный пользователь переключает вкладки, вы должны использовать javascript для изменения document.title, как заявили другие пользователи.

Возможно, вы можете загрузить в свой заголовок все заголовки вкладок в одной строке, а затем, как только вы загрузите одну из вкладок, измените заголовок с помощью javascript

пример: сначала установите заголовок на

my app | description | contact | about us | 

после загрузки одной из вкладок запускается:

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

Есть много способов изменить заголовок, два основных:

Сомнительный метод

Поместите тег заголовка в 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);
});

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

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

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

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

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

Поскольку поисковые системы игнорируют большую часть javascript, вам нужно сделать так, чтобы поисковые системы могли сканировать с использованием вкладок без использования Ajax. Сделайте каждую вкладку ссылкой с href, которая загружает всю страницу с выбранной вкладкой. Тогда страница может иметь этот заголовок в теге.

Обработчик событий onclick по-прежнему может загружать страницы через ajax для просмотра людьми.

Чтобы просматривать страницы так, как их видят большинство поисковых систем, отключите Javascript в своем браузере и попробуйте сделать так, чтобы при нажатии на вкладки загружалась страница с выбранной вкладкой и правильным заголовком.

Если вы загружаете через ajax и хотите динамически изменять заголовок страницы только с помощью Javascript, выполните:

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

Однако поисковые системы не увидят это изменение в javascript.

Вы можете использовать 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.

Хочу передать привет из будущего :) Произошедшее недавно:

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

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

Современные краулеры могут анализировать динамически сгенерированный контент в DOM, поэтому использование document.title = ... совершенно нормально.

для тех, кто ищет версию 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'));

Используйте 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>

Google упомянул, что все файлы js визуализированы, но на самом деле я потерял свой заголовок и другие метатеги, которые были предоставлены Reactjs на этот сайт, и фактически потерял свою позицию в Google! Я много искал, но мне кажется, что все страницы должны быть предварительно обработаны или использовать SSR (серверный рендеринг), чтобы их протоколы были оптимизированы для SEO!
Он расширяется до Reactjs, Angularjs и т. д.
Короче говоря, каждая страница с просмотреть исходный код страницы в браузере индексируется всеми роботами, если это не возможно, Google может индексировать, но другие пропускают индексацию!

Я использую отдельный заголовок и включаю его с помощью php, в заголовке я использую:

<?php
if (!isset($title)){
    $title = "Your Title";
  }
  else {
    $title = $title;
  }
 ?>
<head>
<title><?php echo $title; ?></title>

Затем на каждой странице я использую:

<?php
  $title = "Your Title - Page";
  include( "./header.php" );
?>