PHPで管理、インクルード可能のheadタグまとめ

2022年3月22日 2024年5月29日 15分14秒

タスラ t3l

各ページごとに入力する内容が変わるheadタグないですが、変数などを利用することで便利にインクルードすることが可能です。

サンプルを作成してみましたので、是非ご使用いただけたらと思います。

1 PHPで管理、headタグテンプレートはこちら
- 1.1 各ページに入れる変数
- 1.2 インクルードのサンプル
2 簡単なコード解説
3 まとめ

PHPで管理、headタグテンプレートはこちら

<?php
$pageUrl = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
$rootUrl = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"];
?>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<?php if($_SERVER['REQUEST_URI']=="/" || $_SERVER['REQUEST_URI']=="/index.php"): ?>
<title><?php echo $siteTitle; ?></title>
<?php else: ?>
<title><?php echo $pageTitle; ?> | <?php echo $siteTitle; ?></title>
<?php endif; ?>
<?php if(empty($canonical)): ?>
<link rel="canonical" href="<?php echo $pageUrl; ?>">
<?php else: ?>
<link rel="canonical" href="<?php echo $canonical; ?>">
<?php endif; ?>
<meta name="description" content="<?php echo $description; ?>">
<meta property="og:locale" content="ja_JP">
<meta property="og:title" content="<?php echo $pageTitle; ?>">
<meta property="og:description" content="<?php echo $description; ?>">
<?php if($_SERVER['REQUEST_URI']=="/" || $_SERVER['REQUEST_URI']=="/index.php"): ?>
<meta property="og:type" content="website">
<?php else: ?>
<meta property="og:type" content="article">
<?php endif; ?>
<meta property="og:url" content="<?php echo $pageUrl; ?>">
<meta property="og:image" content="<?php echo $rootUrl; ?>/ogp-image.png">
<meta property="og:site_name" content="<?php echo $siteTitle; ?>">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="<?php echo $pageTitle; ?>" />
<meta name="twitter:url" content="<?php echo $pageUrl; ?>" />
<meta name="twitter:description" content="<?php echo $description; ?>" />
<meta name="twitter:image" content="<?php echo $rootUrl; ?>/ogp-image.png" />
<link rel="stylesheet" href="<?php echo $Path; ?>css/common.css">
<link rel="stylesheet" href="<?php echo $Path; ?>css/header.css">
<link rel="stylesheet" href="<?php echo $Path; ?>css/footer.css">
<?php if($_SERVER['REQUEST_URI']=="/" || $_SERVER['REQUEST_URI']=="/index.php"): ?>
<link rel="stylesheet" href="<?php echo $Path; ?>css/top.css">
<?php else: ?>
<link rel="stylesheet" href="<?php echo $Path; ?>css/<?php echo $pageID; ?>.css">
<?php endif; ?>

<?php/*　あったら入れるもの
<meta name="twitter:site" content="ウェブサイトの@ユーザー名">
<meta name="twitter:creator" content="著者の@ユーザー名">
<meta property="fb:app_id" content="AppID" />
<meta property="fb:admins" content="Facebook_ID">
*/?>

私は上記内容にてhead.phpというファイルを作成しincというディレクトリの中で管理しています。

各ページに入れる変数

<?php
	$Path = '相対パス用「/」か「./」から始める';
	$siteTitle = 'サイトタイトル';
	$pageTitle = 'ページタイトル';
	$description = 'ページの説明文';
	$pageID = 'ページ固有CSSの名前や条件分岐等につかう';
	$canonical = '';
?>

各ページ毎に異なる内容はこの変数の部分にて管理します。
※ページの最上部などに記述します。

インクルードのサンプル

<head>
    <?php include(__DIR__.'/inc/head.php'); ?>
</head>

表示させたいところに記述すれば/inc/head.phpを表示することができます。

簡単なコード解説

ページのURLとサイトのURLを取得

<?php
$pageUrl = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
$rootUrl = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"];
?>

プロトコルから取得するためにこの形にしてあります。

タイトルタグ

<?php if($_SERVER['REQUEST_URI']=="/" || $_SERVER['REQUEST_URI']=="/index.php"): ?>
<title><?php echo $siteTitle; ?></title>
<?php else: ?>
<title><?php echo $pageTitle; ?> | <?php echo $siteTitle; ?></title>
<?php endif; ?>

以前の記事で紹介した形を採用しています。

https://t3l.org/web/meta-title/

rel="canonical"

<?php if(empty($canonical)): ?>
<link rel="canonical" href="<?php echo $pageUrl; ?>">
<?php else: ?>
<link rel="canonical" href="<?php echo $canonical; ?>">
<?php endif; ?>

一行目で変数が空じゃないか判断をし、条件分岐させています。
空だった場合は$pageUrl(現在のページのURL)を表示させ、空じゃなかったら$canonical(指定したURL)を表示させる仕組みです。

og:type

<?php if($_SERVER['REQUEST_URI']=="/" || $_SERVER['REQUEST_URI']=="/index.php"): ?>
<meta property="og:type" content="website">
<?php else: ?>
<meta property="og:type" content="article">
<?php endif; ?>

タイトルタグと同様、トップページかそうじゃないかで条件分岐をし、TOPページの場合はwebsite、その他はarticleになるようになっています。
その他のOGP関係は下記記事を参照ください。

https://t3l.org/web/head-ogp-template/