Файл header.php — это основа любого шаблона в 1С-Битрикс. Он отвечает за подключение мета-тегов, стилей, скриптов и других важных элементов, которые должны загружаться в <head> страницы.
В этой статье разберём:
- Базовую структуру
header.php - Подключение CSS и JS (старый и новый D7-способ)
- Поддержку старых браузеров (IE, Edge)
- SEO-оптимизацию (canonical, Open Graph)
- Лучшие практики для ускорения загрузки
1. Базовая структура header.php
1.1. Защита от прямого доступа
Первая строка должна проверять, что файл подключён через ядро Битрикса:
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>1.2. Определение главной страницы
Полезно для разных макетов или стилей:
<?$isMainPage = $APPLICATION->GetCurPage(false) == SITE_DIR;?>1.3. HTML-каркас с поддержкой IE
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="<?=LANGUAGE_ID?>"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="<?=LANGUAGE_ID?>"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="<?=LANGUAGE_ID?>"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="<?=LANGUAGE_ID?>"> <!--<![endif]-->2. Подключение стилей и скриптов
2.1. Стандартный способ (устаревший, но рабочий)
<?$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/style.css');?>
<?$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/script.js');?>2.2. Современный способ (D7, рекомендуется)
<?
use Bitrix\Main\Page\Asset;
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH.'/css/main.css');
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH.'/js/main.js');
?>
Почему D7 лучше?
- Автоматическая проверка дублирования
- Поддержка defer/async
- Удобное управление зависимостями
3. Мета-теги и SEO
3.1. Обязательные мета-теги
<meta charset="<?=SITE_CHARSET?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">3.2. Favicon (рекомендуемый формат)
<link rel="icon" href="<?=SITE_TEMPLATE_PATH?>/img/favicon/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="180x180" href="<?=SITE_TEMPLATE_PATH?>/img/favicon/apple-touch-icon.png">3.3. Open Graph для соцсетей
<?$APPLICATION->ShowMeta('og:title')?>
<?$APPLICATION->ShowMeta('og:description')?>
<?$APPLICATION->ShowMeta('og:image')?>3.4. Canonical URL (против дублей)
<link rel="canonical" href="<?='https://'.$_SERVER['HTTP_HOST'].$APPLICATION->GetCurPage(false)?>">4. Поддержка старых браузеров
4.1. HTML5 Shiv для IE8 и ниже
<!--[if lt IE 9]>
<script src="<?=SITE_TEMPLATE_PATH?>/js/html5shiv.min.js"></script>
<![endif]-->4.2. Предупреждение для устаревших браузеров
<!--[if lt IE 9]>
<div class="browser-warning">
Ваш браузер устарел! Обновите его для корректной работы сайта.
</div>
<![endif]-->5. Итоговый пример header.php
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<?
use Bitrix\Main\Page\Asset;
$isMainPage = $APPLICATION->GetCurPage(false) == SITE_DIR;
?>
<!DOCTYPE html>
<html lang="<?=LANGUAGE_ID?>">
<head>
<meta charset="<?=SITE_CHARSET?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?$APPLICATION->ShowTitle()?></title>
<!-- Favicon -->
<link rel="icon" href="<?=SITE_TEMPLATE_PATH?>/img/favicon.ico">
<!-- Подключение стилей -->
<?Asset::getInstance()->addCss(SITE_TEMPLATE_PATH.'/css/main.css');?>
<!-- Подключение скриптов -->
<?Asset::getInstance()->addJs(SITE_TEMPLATE_PATH.'/js/main.js');?>
<!-- Open Graph -->
<?$APPLICATION->ShowMeta('og:title')?>
<!-- Canonical URL -->
<link rel="canonical" href="<?='https://'.$_SERVER['HTTP_HOST'].$APPLICATION->GetCurPage(false)?>">
</head>
<body class="<?=($isMainPage ? 'home' : 'inner')?>">
<?$APPLICATION->ShowPanel();?>
<!--[if lt IE 9]>
<div class="browser-warning">Ваш браузер устарел!</div>
<![endif]-->Вывод
Правильный header.php в Битрикс должен:
- Подключать ресурсы через D7 (
Asset) - Поддерживать старые браузеры
- Иметь SEO-разметку (Open Graph, canonical)
- Определять главную страницу
Используйте пример выше как основу для своего шаблона!
