Как изменить заголовок (title) на разных страницах сайта, если заголовок (header) остается одинаковым?

Привет! Как я могу вам помочь сегодня?
  • 18 января 2024 г. 6:49
Ответы на вопрос 2
Веб-страницы обычно состоят из HTML-кода, который включает в себя различные элементы, включая заголовок (`<title>`) и шапку сайта (`<header>`). Заголовок (`<title>`) отображается во вкладке браузера и используется поисковыми системами для отображения названия страницы в результатах поиска. Шапка сайта (`<header>`) — это визуальный элемент на странице, который часто содержит логотип, навигацию и другие важные компоненты.

Чтобы изменить заголовок на разных страницах сайта, при этом сохраняя одинаковую шапку (`<header>`), необходимо убедиться, что на каждой из страниц указан уникальный `<title>` в секции `<head>`. Вот простой пример:

**Главная страница (index.html):**
```html
<!DOCTYPE html>
<html>
<head>
  <title>Главная - Название Компании</title>
  <!-- Другие метатеги и подключаемые стили/скрипты -->
</head>
<body>
  <header>
    <!-- Здесь ваш общий код шапки -->
  </header>
  
  <main>
    <!-- Основное содержимое Главной страницы -->
  </main>
  
  <footer>
    <!-- Подвал сайта -->
  </footer>
</body>
</html>
```

**Страница с контактной информацией (contacts.html):**
```html
<!DOCTYPE html>
<html>
<head>
  <title>Контакты - Название Компании</title>
  <!-- Другие метатеги и подключаемые стили/скрипты -->
</head>
<body>
  <header>
    <!-- Здесь ваш общий код шапки -->
  </header>
  
  <main>
    <!-- Основное содержимое страницы Контакты -->
  </main>
  
  <footer>
    <!-- Подвал сайта -->
  </footer>
</body>
</html>
```

Обратите внимание, что элемент `<title>` меняется на каждой странице, чтобы отражать её содержание, в то время как элемент `<header>` остается неизменным, предоставляя пользователям одинаковый интерфейс навигации независимо от страницы.

Если у вас динамический сайт, который использует шаблоны (например, в системах управления контентом как WordPress, Joomla или используя шаблонизаторы веб-фреймворков, таких как Django или Laravel), вам будет необходимо установить заголовок динамически на основе контента страницы или значение, передаваемое контроллером страницы.

Пример в PHP (при использовании в шаблоне):
```php
<!DOCTYPE html>
<html>
<head>
  <title><?php echo $pageTitle; ?> - Название Компании</title>
  <!-- Другие метатеги и подключаемые стили/скрипты -->
</head>
<body>
  <header>
    <!-- Здесь ваш общий код шапки -->
  </header>
  
  <main>
    <!-- Основное содержимое страницы -->
  </main>
  
  <footer>
    <!-- Подвал сайта -->
  </footer>
</body>
</html>
```
Тогда перед отображением каждой страницы вам нужно будет задать переменную `$pageTitle` соответствующим текстом заголовка.
Создаете 4 файла:  template.php, header.php, content.php, footer.php. 
Подключаете в файле template.php остальные 3 файла:


Потом в том файле, который будет выводить содержимое страницы, сначала получаете нужные данные (допустим из базы), а далее подключаете файл template.php .

Допустим, для главной страницы будет примерно так:


Ну и соответственно в файлах шаблона выводите переменные:



Похожие вопросы