How to dynamically change a web page's title?
I have a webpage that implements a set of tabs each showing different content. The tab clicks do not refresh the page but hide/unhide contents at the client side.
Now there is a requirement to change the page title according to the tab selected on the page ( for SEO reasons ). Is this possible? Can someone suggest a solution to dynamically alter the page title via javascript without reloading the page?
20 Answers 20
Update: as per the comments and reference on SearchEngineLand most web crawlers will index the updated title. Below answer is obsolete, but the code is still applicable.
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.
I want to say hello from the future 🙂 Things that happened recently:
- Google now runs javascript that is on your website 1
- People now use things like React.js, Ember and Angular to run complex javascript tasks on the page and it’s still getting indexed by Google 1
- you can use html5 history api (pushState, react-router, ember, angular) that allows you to do things like have separate urls for each tab you want to open and Google will index that 1
So to answer your question you can safely change title and other meta tags from javascript (you can also add something like https://prerender.io if you want to support non-Google search engines), just make them accessible as separate urls (otherwise how Google would know that those are different pages to show in search results?). Changing SEO related tags (after user has changed page by clicking on something) is simple:
Just make sure that css and javascript is not blocked in robots.txt, you can use Fetch as Google service in Google Webmaster Tools.
See this page for a rudimentary tutorial as well.
The code is
document.title = ‘test’
I can’t see how changing the page title via Javascript will help SEO. Most (or all) search bots do not run Javascript and will only read the initially loaded title that is the mark-up.
If you want to help SEO, then you will need to change the page title in the back-end and serve different versions of the page.
There are many ways you can change the title, the main two, are like so:
The Questionable Method
Put a title tag in the HTML (e.g. <title>Hello</title> ), then in javascript:
The Obviously Correct Method
The simplest of all is to actually use the method provided by the Document Object Model (DOM)
The former method is generally what you would do to alter tags found in the body of the document. Using this method to modify meta-data tags like those found in the head (like title ) is questionable practice at best, is not idiomatic, not very good style to begin with, and might not even be portable. One thing you can be sure of, though, is that it will annoy other developers if they see title.innerHTML = . in code they are maintaining.
What you want to go with is the latter method. This property is provided in the DOM Specification specifically for the purpose of, as the name suggests, changing the title.
Note also that if you are working with XUL, you may want to check that the document has loaded before attempting to set or get the title, as otherwise you are invoking undefined behavior (here be dragons), which is a scary concept in its own right. This may or may not happen via JavaScript, as the docs on the DOM do not necessarily pertain to JavaScript. But XUL is a whole ‘nother beast, so I digress.
Speaking of .innerHTML
Some good advice to keep in mind would be that using .innerHTML is generally sloppy. Use appendChild instead.
Although two cases where I still find .innerHTML to be useful include inserting plain text into a small element.
Тег <title> HTML заголовок страницы
Тег <title> определяет заголовок HTML страницы. Этот тег не отображается на самой веб странице. Браузеры обычно выводят его как название вкладки. Также тег title используется поисковыми системами как заголовок сайта в выдаче.
Не путайте HTML тег <title> с глобальным атрибутом title — это разные вещи.
Элемент находится в <head> области страницы (подробнее про раздел head). Можно использовать только один тег title на странице.
Синтаксис
Содержимое тега заголовка <title> используется:
- как название вкладки в браузере;
- как название страницы при добавлении в Избранные или Закладки;
- как заголовок сниппета сайта в поисковой выдаче.
Атрибуты у тега title отсутствуют.
Пример использования <title> в HTML коде
Поддержка браузерами
| Тег | |||||
| <title> | Да | Да | Да | Да | Да |
Тег title в поисковых системах
Поисковые системы используют содержимое тега title страницы для построения заголовка сниппета сайта в выдаче.
Чтобы правильно заполнять тег <title> нужно учитывать следующие правила:
- Пишите внутри title только то, что соответствует содержанию страницы.
- Не пишите слишком длинные заголовки.
- Не стоит делать из заголовка перечисление ключевых слов.
- Ставьте наиболее важную информацию в начало заголовка.
Правильный тег <title> поспособствует поднятию позиции страницы сайта при ранжировании.
Дизайн #1703
Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.
Если же вместо текста вы хотите разместить изображение, тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 12 строку кода:
и вместо $SITE_NAME$ пропишите:
где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:
1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)
2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку
2. Как изменить фон в верхней части сайта?
Фон верхней части шаблона состоит из нескольких изображений. Чтобы изменить их перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS).
Найдите 25 строку:
/.s/t/1703/head-r.jpg — данный участок кода необходимо заменить на свою ссылку на изображение.
/.s/t/1703/head-b.jpg — данный участок кода необходимо заменить на свою ссылку на изображение.
/.s/t/1703/children1.png — данный участок кода необходимо заменить на свою ссылку на изображение.
/.s/t/1703/cont-t.png — данный участок кода необходимо заменить на свою ссылку на изображение.
3. Как изменить цвет блоков?
Для фона заголовка блока используется повторяющийся элемент
для изменения перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), найдите там 181 строку:
/.s/t/1703/title-bg.png – является ссылкой на изображение фона заголовка. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.
Для изменения фона блока в таблице стилей найдите 173 строку:
/.s/t/1703/side-bg.png – является ссылкой на изображение фона блока. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.
4. Как изменить фон основной части шаблона?
Чтобы изменить фон основной части шаблона, перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS).
Найдите 68 строку:
#fff — фон основной части сайта. Его можно изменить на любой другой html-цвет.
5. Как изменить фон нижней части шаблона?
Для изменения перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS).
Фон нижней части шаблона состоит из нескольких изображений,
Найдите 217 строку:
228 и 229 строку:
/.s/t/1703/bot-bg.jpg, /.s/t/1703/bot-t.png, /.s/t/1703/flowers.png — данные ссылки на изображения замените на свои.
6. Как изменить 4 фотографии в нижней части сайта?
Для изменения перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → BOTTOM. Перейдя в данный глобальный блок вы увидите код следующего вида:
- /.s/t/1703/bottom/image1.jpg
- /.s/t/1703/bottom/image2.jpg
- /.s/t/1703/bottom/image3.jpg
- /.s/t/1703/bottom/image4.jpg
пропишите ваши, тогда фото изменятся на которые нужно вам.
7. Как изменить 4 блока ссылок в нижней части сайта?
Для изменения перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → BOTTOM. Перейдя в данный глобальный блок, вы увидите код следующего вида:
Чтобы изменить ссылки редактируйте блоки кода:
и соответственно вместо сторонних названий к ссылкам вместо "Vivamus sed bibendum" итд пропишите свои.