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

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

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

Ответы [ 19 ]

658 голосов
/ 05 января 2009

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

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

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

142 голосов
/ 04 февраля 2016

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

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

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

47 голосов
/ 05 января 2009

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

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

33 голосов
/ 05 января 2009

Использование document.title.

См. на этой странице и для зачаточного урока.

29 голосов
/ 05 января 2009

код
document.title = 'test'

14 голосов
/ 26 марта 2012

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

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

Поместите тег заголовка в 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);
});
10 голосов
/ 05 января 2009

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

9 голосов
/ 04 июня 2016

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

4 голосов
/ 05 января 2009

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

3 голосов
/ 19 ноября 2011

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

ex: сначала установите ваш заголовок на

my app | description | contact | about us | 

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

document.title = "my app | tab title";
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...