it-swarm.com.ru

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

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

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

439
user12129

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

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

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

642
Alex Fort

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

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

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

133
JLarky

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

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

47
Sarat

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

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

31
lc.

Код
document.title = 'test'

27
Kev

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

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

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

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

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

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

Самым простым из них является использование метода, предоставляемого объектной моделью документов (DOM).

document.title = "Hello World";

Первый способ обычно используется для изменения тегов, найденных в body документа. Использование этого метода для изменения тегов метаданных, подобных тем, которые находятся в заголовке (например, 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);
});
13
Braden Best

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

10
TheTXI

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

8
Dimitry_N

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

4
Bryan Denny

для тех, кто ищет 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'));
3
mel3kings

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

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

my app | description | contact | about us | 

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

document.title = "my app | tab title";
3
Salvador Villegas

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

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

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

2
Rich

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

1
goblin01

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

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

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

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

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

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

1
dougd_in_nc

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

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

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

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

0
Pbearne

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

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

0
shootingrubber

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

0
Hamed