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

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

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

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

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

Ответы [ 19 ]

2 голосов
/ 03 января 2018

для тех, кто ищет 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'));
2 голосов
/ 05 января 2009

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

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

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

1 голос
/ 15 апреля 2018

Используйте 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 голос
/ 26 ноября 2015

Вы можете использовать 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 голос
/ 14 декабря 2013

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

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

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

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

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

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

0 голосов
/ 15 декабря 2018

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

0 голосов
/ 03 июня 2013

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

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

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

0 голосов
/ 14 декабря 2012

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

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

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

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

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...