SEO対策 header.php コードを見直し表示速度を上げる

SEO対策 header.php コードを見直し表示速度を上げる

いよいよheader.phpのSEO対策を行いたいと思います。表示速度を上げる事により検索エンジンの評価に多少なりとも影響を与える項目になりますので不要なコードを見直して、header.phpのコードの書き変え・コードの削除を行い表示速度を上げたいと思います。※Wordpressのphpファイルの記載内容を変更・削除する際は必ずバックアップを取りましょう。こちらでheader.phpの説明をしています。記述内容が分からない場合はこちらを参照して下さい。WordPress 初心者の為のheader.php解説(説明)

 

 

スポンサーリンク

表示速度を上げる理由

Googleの品質に関するガイドラインにこの様な記載が有ります。

 

SEO対策 header.php 高速化に関するガイドライン

SEO対策 header.php 高速化に関するガイドライン

 

気になる所だけ抜粋します。表示が早いサイトはユーザーの満足度を高め、ウェブ全体の質を向上させます。如何でしょうか?表示速度を上げる事を進める理由が理解できたでしょうか?何処から?どの様に?かはグレーですがGoogle様がこの様におっしゃっているので、キチンと表示速度を上げましょう。今現在分かっているので下記の項目にプラスの効果があるようです。

・クローラーの読み込み
・サーバーへの負荷(メモリー使用料)
・検索順位への影響

どれも捨てがたい項目です。今回のSEO対策では微々たる影響でしょうがそれでも順位が1つでも上がるなら表示速度は上げるべきです。

 

テキストエディッターのダウンロード

WordPressではメモ帳で編集するのは御法度です。phpファイルをメモ帳で編集するとエラーになります。無料でいいのでテキストエディターを用意する必要が有ります。私が今現在使用しているテキストエディターを紹介いたします。

TeraPadです。←クリックすると窓の杜へジャンプ出来ます。

使い方等はとても充実しているのであえて説明は省かせて頂きます。そのままでも使用できますので安心ですよ。

 

header.phpの保管場所

wp-content/themes/テーマの名前/header.phpです。又ここにダッシュボード外観テーマの編集で表示されているPHPファイル・CSSファイルが保存されていますので場所を覚えておきましょう。一番触るファイル類になると思います。

 

FTPソフトの用意

もしFTPソフトをお持ちで無い方はこちらでFTPソフトを紹介しているので是非ダウンロードして下さい。イチイチサーバーにアクセスするの大変ですよ。今回紹介するのはFileZillaです。人気もありその人気に過信せず今でも尚ヴァージョンアップし続けるとても素敵なフリーソフトです。

FileZillaダウンロード←クリックすると公式HPにジャンプします。

FileZillaのダウンロード方法

公式HPにジャンプ後Download FileZilla Clientをクリックします。

 

header.php表示速度 FileZillaダウンロード

header.php表示速度 FileZillaダウンロード

 

Client Download画面が表示されます。

Dowuload Nowをクリックします。

 

header.php表示速度 FileZillaダウンロード

header.php表示速度 FileZillaダウンロード2

 

ファイルを開く・保存が選べますので好きな方法でダウンロードを進めて下さい。圧縮ファイルでダウンロードされますので任意の解凍ソフトで解凍後インストールして下さい。解凍ソフトをお持ちで無い方はLhaplusを取りあえずダウンロードされる事をお勧めします。

Lhaplusダウンロード←こちらからダウンロード出来ます。窓の杜にジャンプします。

FileZillaの初期設定

インストール後起動したら下記の画面が表示されます。

 

header.php表示速度 Filezilla初期設定1

header.php表示速度 Filezilla初期設定1

 

画面が表示されればファイル(F)の下にタワーの絵が有りますのでそちらをクリックします。

 

header.php表示速度 Filezilla初期設定2

header.php表示速度 Filezilla初期設定2

 

サイトマネージャ画面が表示されます。

新しいサイト(N)をクリックして新規サイトを作ります。

名前の変更(R)をクリックして新規サイトの任意の名前を決めます。

ホスト(H)にさくらのFTPサーバー名を入力します。

ログオン種類匿名通常に変更します。

ユーザ(U)FTPアカウントを入力します。

パスワード(W)パスワードを入力します。

全ての入力・選択が終了したら接続をクリックします。

 

header.php表示速度 Filezilla初期設定3

header.php表示速度 Filezilla初期設定3

 

するとTOP画面に戻って状態にディレクトリー一覧表示成功と表示されれば成功です。

 

header.php表示速度 Filezilla初期設定4

header.php表示速度 Filezilla初期設定4

 

サイト内初期Wordpress関連ファイル位置

先ほどの状態からTOP画面下ファイル名の部分の説明を致します。

さくらのサーバー内の階層が表示されています。右のカーソルを下に操作してWWWファイルを選択します。

 

header.php表示速度 Filezilla Wordpress関連ファイル位置1

header.php表示速度 Filezilla Wordpress関連ファイル位置1

 

下の説明した絵ではファイル名が記載されていませんが、ここはさくらのサーバーでデータベース作成時に入力したファイル名が記載されています。そのファイルをクリックします。

 

header.php表示速度 Filezilla Wordpress関連ファイル位置2

header.php表示速度 Filezilla Wordpress関連ファイル位置2

 

こちらもファイル名が記載されていませんが、ここではさくらのサーバーWordPress自動インストール時に付けたファイル名のファイルをクリックします。※ドメインが直下に設置されている方はこの項目は必要有りません。

 

header.php表示速度 Filezilla Wordpress関連ファイル位置3

hedaer.php表示速度 Filezilla Wordpress関連ファイル位置3

 

すると下記画面で wp-admin wp-content wp-includes 等のファイルが表示されます。これがWordpressのファイルになります。

 

header.php表示速度 Filezilla Wordpress関連ファイル位置4

header.php表示速度 Filezilla Wordpress関連ファイル位置4

 

FileZillaの基本操作

サイトの呼び出し方

一度登録してしまえば呼び出すのは凄く簡単です。初期設定でファイル(F)下のタワーの絵の横▼ボタンをクリックします。すると初期設定時に任意の名前を決めたサイト名が表示されるのでそれをクリックします。

 

header.php表示速度 Filezilla サイトの呼び出し方法

header.php表示速度 Filezilla サイトの呼び出し方法

 

ファイルの移動

任意の階層でファイルをクリックしたままファイルを移動させる事によりファイルの移動が可能になります。またサーバー内にあるファイルを自分のパソコンに移動させる時もファイルをクリックしたまま自分のパソコンのディスクトップに移動させることによりファイルのやり取りが可能になります。

 

header.php表示速度 Filezilla ファイルの移動

header.php表示速度 Filezilla ファイルの移動

 

階層の移動

階層に潜る際は任意のファイルをクリックすればその階層に移動できます。

一つ前の階層に戻る場合はファイルの絵..をクリックする事により一つ前の階層に戻る事が出来ます。

 

header.php表示速度 Filezilla 階層の移動

header.php表示速度 Filezilla 階層の移動

 

 

以上でFileZillaの説明を終わります。WordpressのPHPファイルやCSSファイルの変更した後のアップロードで使用する際に凄く便利にツールです。インストールがまだの方は是非使用してください。お勧めですよ。

 

言語設定の設定の見直し

言語関数とはWordpress関数のlanguage_attributes(); の説明はこちらで行っています。header.php language_attributes();関数の説明←クリックするとジャンプします。

hedaer.phpのSEO対策前

<!--[if IE 8]>
<html class="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

私の場合は日本語のみのブログになりますので、英語等他の国の言語をフォローする必要が有りません。その為Wordpressの関数language_attributes();を呼び出して重たいPHPファイルを実行する必要が無いのでこの部分を日本語のみのコード記載に変更したいと思います。

header.phpのSEO対策後

<!--[if IE 8]>
<html class="ie8" lang="ja">
<![endif]-->
<!--[if !(IE 8) ]><!-->
<html lang="ja">
<!--<![endif]-->

 

文字コードの設定の見直し

hedaer.phpのSEO対策前

<meta charset="<?php bloginfo( 'charset' ); ?>">

文字コードの記載になりますね。文字化け覚悟で処理スピードが速いUTF-8以外の文字コードを使用される方はその対象のコードを記載される様にお願いします。私は文字化けでユーザーを逃すのは嫌なので、少し重たいですがUTF-8でしっかり文字化けの無いブログに致します。PHP言語Wordpressの関数<?php bloginfo( ‘charset’ ); ?>文字コードを呼び出す関数になり、初期の設定ではUTF-8が設定されています。

header.phpのSEO対策後

<meta charset="UTF-8">

 

xfn(リンク先との関係)の削除

<link rel="profile" href="http://gmpg.org/xfn/11">

リンク先との関係を記載する記述になります。記述内容は下記の様な内容になります。

本人と友好関係:本人・知人・連絡先・友人

仕事関係:同僚・仕事仲間

近所関係:同居人・近所・その他

縁関係:子供・親・兄弟・配偶者・その他

恋愛関係:片思い・夢中・デートする仲・恋人同士

以上の事がxfnで設定する事が出来ます。全くもって要らない機能なので削除します。

 

ピンバック機能の削除

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

ピンバック機能になります。この機能はWordpressを使用している誰かが破リンクを貼ったら自動でこちらからも貼られてURLにリンクを貼る機能になります。分かり易く言うと自動相互リンク機能ですね。要らないので削除します。私の場合はフッダーに出力する様に記載内容が有るようです。フッダー部分も後日削除いたします。

 

SEO対策 header.php ピンバック機能削除

SEO対策 header.php ピンバック機能削除

 

TOPタイトルの設定の見直し

hedaer.phpのSEO対策前

条件1<?php if ( get_theme_mod( 'graphy_logo' ) && get_theme_mod( 'graphy_replace_blogname' ) ) : ?>
<h1 class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_theme_mod( 'graphy_logo' ) ); ?>" /></a></h1>
条件2<?php elseif ( get_theme_mod( 'graphy_logo' ) ) : ?>
<div class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img alt="" src="<?php echo esc_url( get_theme_mod( 'graphy_logo' ) ); ?>" /></a></div>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
条件3<?php else : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php endif; ?>

人により異なる対応が必要な部分になりますね。又テーマによりlogoの名前・replace_blognameの名前が異なるコードになります。画像を扱うコードになります。alt属性が入っているか?入っていないかキチンと確認して下さい。SEO対策です。無い場合はキチンと記載しましょう。ダイレクト入力でいいですよ。上記記載条件2にalt属性に記載が無いので追加しておきます。

alt属性の入力

<div class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img alt="サイト名:初心者がもの申す" src="<?php echo esc_url( get_theme_mod( 'graphy_logo' ) ); ?>" /></a></div>

又私の場合はlogoを使用してい無いのと、これからも使用する予定が無い為、条件3だけ残して全てコメントアウトします。全て削除もしくは//や/*を使用して読まれない様に致します。残るPHP言語コードは下記記載だけです。

hedaer.phpのSEO対策後

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

 

見出しの見直し

hedaer.phpのSEO対策前

<h1 class="menu-toggle"><?php _e( 'Menu', 'graphy' ); ?></h1>

メニューの表示になりますね。しかし驚くべき事に何故か・・・見出し1が使われています。もはや意味の無い見出しですがアリゴリズムの変更により効果が今後期待出来るかも?しれませんのでキチンと適正に削除しておきます。と言いたい所ですが・・・・h1を削除するとレイアウトが崩れました。と言う事でh1を削除する為にid代用してスタイル調整が必要になります。後日追記SEO対策します。

hedaer.phpのSEO対策後

<class="menu-toggle"><?php _e( 'Menu', 'graphy' ); ?>

 

headerアイキャッチ設定の見直し

<?php if ( is_home() && get_header_image() ) : ?>
<div id="header-image" class="header-image">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
</div><!-- #header-image -->
<?php elseif ( is_page() && has_post_thumbnail() ) : ?>
<div id="header-image" class="header-image">
<?php the_post_thumbnail( 'graphy-page-thumbnail' ); ?>
</div><!-- #header-image -->
<?php endif; ?>

これも人により使われたり使わなかったりしますね。アイキャッチを使用される方は画像処理がなされているのでalt属性が入力されている事を必ず確認して下さい。

私の場合は使用しないので全てコメントアウトします。全て削除もしくは//や/*を使用して読まれない様に致します。

 

header.php コードを見直して表示速度を上げた効果

SEOチェキのページ読み込み時間でheaser.php変更前と変更後の表示速度の確認をしました。試行回数15回少ないですが差が出たので報告しますね。

変更前表示速度0.7648に対して

変更後表示速度0.74になりました。

 

SEO対策 header.php コードを見直して高速化を図た効果

SEO対策 header.php コードを見直して表示速度を上げた効果

 

hedaer.phpコードを見直す事により0.0248秒の表示速度の短縮に成功する事が出来ました。少ないと思われる方もおられるかと思いますが、こういうのは一つ一つの積み重ねが必要なのだと私は思います。

 

まとめ

まずまずの結果が出たのでは?無いでしょうか?この表示速度を上げる事によりクローラーの読みスピードの高速化・ユーザーへの表示速度の高速化が図れました。又サーバーへのメモリー使用料負荷も勿論減少しているでしょう。一番オーソドックスな方法ですが、皆さんもキチンとコードを見直して表示速度を上げる事をお勧めします。今回はheader.phpの見直しでしたが、他の項目もドンドン紹介したいと思います。ちなみに肝心な検索順位は見事にほぼ全てUPしました。

 

ここまで読んで頂いてありがとうございます。これからもSEO対策とPHP言語の解説を並行して行いたいと思いますのでこれからもどうぞ宜しくお願いします。

 

 

関連記事一覧

SEO対策検索順位チェックツール GRC凄くお勧めする理由 
最低限必要な2つのSEO対策ツールの使い方 初心者の方必見です
SEO これぞ!!内部リンク効果的な使い方・貼り方・最適化
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です