コピペで使える最強タイトルタグを作ってみる

バリバリPHPを使っている人などからすると、物足りない内容になってしまっていると思いますが、苦手な人でもコピペで使えるように解説等もふんわり記載しています。
極力シンプルにしてありますので、独自に調節をして使用していただけたらと思い作成いたした。

OGPにも適した最強タイトルタグはコレ

<?php
$pageTitle = 'ページタイトル';
$siteTitle = 'サイトタイトル';
?>

<?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; ?>

<meta property="og:title" content="<?php echo $pageTitle; ?>">
<meta property="og:site_name" content="<?php echo $siteTitle; ?>">

titleタグだけではなく、og:site_nameも入れてしまっていますが、ページのタイトルとサイトのタイトルを分けて変数に代入することで、TOPと下層で表示する形が違っても対応することができ、og:titleとog:site_nameにも流用できるような形にしました。

タイトルのあいだにキャッチコピー入れる形にも対応できます。

<?php
$pageTitle = 'ページタイトル';
$siteTitle = 'サイトタイトル';
$catchCopy = 'キャッチコピー';
?>

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

<meta property="og:title" content="<?php echo $pageTitle; ?>">
<meta property="og:site_name" content="<?php echo $siteTitle; ?>">

だいぶイレギュラーとは思いますが、時々SEO会社にページタイトルとサイトタイトルの間にキャッチコピーをいれてくださいという依頼をもらったりもするので、その形にも対応できるものも作成しました。

コード解説

変数に格納

<?php
$pageTitle = 'ページタイトル';
$siteTitle = 'サイトタイトル';
?>

流用するために変数に代入しています。
=前の$のうしろは任意の名前で大丈夫です。
シングルクォートで囲ってある部分は流用したい文言を挿入しています。

条件分岐のif文

<?php if($_SERVER['REQUEST_URI']=="/" || $_SERVER['REQUEST_URI']=="/index.php"): ?>

TOPページが判断をする為のif文です。phpを使用しているためindex.phpと記載しています。

TOPページ用タイトルタグ

<title><?php echo $siteTitle; ?></title>

//アップしたページのソースを確認すると下記のように表示されます。
<title>サイトタイトル</title>

$pageTitleの内容をechoでtitleタグの中に表示させています。

下層ページ用タイトルタグ

<title><?php echo $pageTitle; ?> | <?php echo $siteTitle; ?></title>

//アップしたページのソースを確認すると下記のように表示されます。
<title>ページタイトル | サイトタイトル</title>

$pageTitleと$siteTitleの間に半角スペースと|を入れて区切っています。

OGPの記述

<meta property="og:title" content="<?php echo $pageTitle; ?>">
<meta property="og:site_name" content="<?php echo $siteTitle; ?>">

//アップしたページのソースを確認すると下記のように表示されます。
<meta property="og:title" content="ページタイトル">
<meta property="og:site_name" content="サイトタイトル">

titleタグ同様の方法でog:titleやog:site_nameにはサイトタイトルとページタイトルがそれぞれ表示されるように記述してあります。

まとめ

今回ページのタイトルに特化して記載をしましたが、PHPが苦手な人も変数を使う事によって、headタグ内を整理したり、作業を楽にできたりと、少し使うだけで整理ができ凄く便利にできるようになると思います。

私もPHPがかけるというわけではないですが、最低限触れるというだけでサイトの構造をかなり整理することができるようになりましたので、今後インクルードなどについても記事を書いていけたらと思っています。

スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事

 

スポンサードリンク