У меня есть веб-страница, которая реализует набор вкладок, каждый из которых показывает различный контент. Щелчки на вкладках не обновляют страницу, а скрывают/скрывают содержимое на стороне клиента.
Теперь необходимо изменить название страницы в соответствии с вкладкой, выбранной на странице (по причинам SEO). Это возможно? Может ли кто-нибудь предложить решение для динамического изменения названия страницы с помощью javascript без перезагрузки страницы?
Обновите: в соответствии с комментариями и ссылками на SearchEngineLand большинство веб-сканеров индексируют обновленный заголовок. Приведенный ниже ответ устарел, но код все еще применим.
Вы можете просто сделать что-то вроде
document.title = "This is the new page title.";, но это полностью победит цель SEO. Наиболее сканеры не собираются поддерживать Javascript, поэтому они будут принимать все, что находится в элементе, в качестве заголовка страницы.Если вы хотите, чтобы это было совместимо с большинством важных сканеров, вам нужно будет на самом деле изменить сам тег заголовка, который будет включать перезагрузку страницы (PHP или тому подобное). Ты не идешь чтобы иметь возможность обойти это, если вы хотите изменить заголовок страницы в способ, который может увидеть гусеничный ход.
Я хочу сказать привет от будущего:) Что случилось недавно:
Итак, чтобы ответить на ваш вопрос, вы можете безопасно изменять название и другие метатеги из 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
Я не вижу, как изменение названия страницы с помощью 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 принесет пользу человеческому читателю, сканеры не будут выполнять этот код.
Возможно, вы можете загрузить на свой заголовок все заголовки вкладок в одной строке, а затем, как только вы загрузите одну из вкладок, измените заголовок с помощью javascript
ex: сначала установите свой заголовок на
my app | description | contact | about us |
после загрузки одной из вкладок:
document.title = "my app | tab 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'));
Один из способов, который приходит на ум, который может помочь в SEO и по-прежнему иметь ваши вкладки, поскольку они будут использовать именованные якоря, соответствующие каждой вкладке, как в:
http://www.example.com/mypage#tab1, http://www.example.com/mypage#tab2, etc.
Вам понадобится обработать серверную часть для анализа URL-адреса и установки начального заголовка страницы, когда браузер отобразит страницу. Я также хотел бы сделать эту вкладку "активной". Когда страница загружается и фактический пользователь переключает вкладки, вы должны использовать javascript для изменения document.title, как заявили другие пользователи.
Поскольку поисковые системы игнорируют большинство javascript, вам нужно сделать так, чтобы поисковые системы могли сканировать с помощью вкладок без использования Ajax. Сделайте каждую вкладку ссылкой с href, которая загружает всю страницу с выбранной вкладкой. Тогда страница может иметь этот заголовок в теге.
Обработчик события onclick может загружать страницы через ajax для зрителей.
Чтобы просмотреть страницы в большинстве поисковых систем, просмотрите их, отключите Javascript в своем браузере и постарайтесь сделать так, чтобы нажатие на вкладки загрузило страницу с выбранной вкладкой и правильным заголовком.
Если вы загружаете через ajax и хотите динамически изменять заголовок страницы только с помощью Javascript, выполните следующие действия:
document.title = 'Put the new title here';
Однако поисковые системы не смогут увидеть это изменение, сделанное в javascript.
Вы можете использовать JavaScript. Некоторые боты, включая Google, будут выполнять JavaScript в интересах SEO (показывая правильный заголовок в SERP).
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>Но для того, чтобы получить подобающие SEO
Вам нужно перезагрузить страницу, когда страница изменится, чтобы поисковая система увидела разные названия и т.д.
Итак, убедитесь, что перезагрузка страницы работает сначала, а затем добавьте изменения document.title
Я просто хочу добавить что-то здесь: изменение названия через JavaScript действительно полезно, если вы обновляете базу данных через AJAX, поэтому название изменяется без необходимости обновлять страницу. Название на самом деле изменяется с помощью языка сценариев на стороне сервера, но изменение его с помощью JavaScript - это просто удобство использования и пользовательский интерфейс, что делает пользователя более приятным и текучим.
Теперь, если вы меняете заголовок с помощью JavaScript, просто черт возьми, тогда вы не должны этого делать.
Google упомянул, что все js файлы отображены, но в действительности я потерял свой заголовок и другие метатеги, которые были предоставлены Reactjs на этом веб-сайте, и фактически потерял мою позицию в Google! Я много искал, но кажется, что все страницы должны быть предварительно отрендерены или использовать SSR (Server Side Rendering), чтобы иметь их SEO-дружественный протокол!
Он распространяется на Reactjs, Angularjs и т.д.
Короче говоря, каждая страница, имеющая исходный вид страницы в браузере, индексируется всеми роботами, если это не возможно, Google может индексировать, но другие пропускают индексацию!
Самый простой способ - удалить тег <title> из index.html и включить
<head>
<title> Website - The page </title></head>
на каждой странице в Интернете. Пауки найдут это и будут показаны в результатах поиска:)