4ページ目 WORDPRESS

今回はWordPressでSEOを意識したhead内の書き方について説明します。前提条件は以下プラグインは使いたくない独自でheadの中をカスタマイズしたい説明環境は以下macOSMonterey12.5VisualStudioCodev1.70.1WordPressv6.0WordPressでSEO対策を意識した書き方SEOを意識したhead内の情報は以下になります。これをWordPressでページごとに出力する設定を説明していきます。 サイトのタイトル 用意するファイルすべてをheader.phpに書かず、編集しやすいようにファイル分割して管理します。header.php…共通の設定とseo.phpとogp.phpの読み込み用ogp.php…各ページごとのogp設定seo.php…各ページごとのogp設定以外（titleやdescriptionなど）|_Theme/|-header.php|-seo.php|-ogp.phpheader.phpで書くことheader.phpで書く内容は以下になります。３〜７行目でogpを使うための宣言をしています。11行目と12行目でseo.phpとogp.phpを読み込んでいます。 seo.phpで書くことseo.phpでは以下の４つを各ページごとに出力しています。title…ページのタイトルdescription…ページの説明文canonical…canonicalタグの設定robots…index,followの設定 "/> ID)):?> "/> ';}else{echo' ';}?> description;$custon_description=str_replace(array("\r\n","\r","\n"),'',$custon_description);if($custon_description){echo' ';}else{echo' ';};?> | ';}else{echo' ';};?> | cat_ID;$post_id='category_'.$cat_id;$text=category_description();$text=strip_tags($text);$text=mb_substr($text,0,120,'UTF-8');if($text){echo' ';}echo' ';?> ページ目 | ID)):?> "/> ';}else{echo' ';}?> 検索結果| お探しのページはございません| "/> ';}?>上記のseo.phpに書いたコードだけでは正しく機能しません。正しく機能させるためにはfunctions.phpに以下のコードを加える必要があります。追加でfunctons.phpに書くコード検索エンジンが１つのサイトで登録できるページ数には限りがあります。余計なページをインデックスさせないようにfunctions.phpに以下を追加しましょう。以下のページは検索エンジンからインデックスさせないようにします。月のアーカイブ日のアーカイブタグページアーカイブ検索結果ページ404ページ分割されたページ添付ファイルアーカイブ作成者アーカイブ/***Indexしないページの定義*/if(!function_exists('is_noindex_page')):functionis_noindex_page(){return(is_month())||//月のアーカイブページはインデックスに含めない!is_date()||//日のアーカイブはインデックスに含めない!is_tag()||//タグのアーカイブページをインデックスに含めない!is_search()||//検索結果ページはインデックスに含めない!is_404()||//404ページはインデックスに含めない!is_paged()||//分割されたページはインデックスに含めない!is_attachment()||//添付ファイルページはインデックスに含めない!is_author();//作成者のアーカイブページはインデックスに含めない!}endif;また分割したページを判定するために、以下もfunctions.phpに加えてます。//何ページ目か判定する定義functionshow_page_number(){global$wp_query;$paged=(get_query_var('paged'))?get_query_var('paged'):1;$max_page=$wp_query->max_num_pages;echo$paged;}WordPresssでは自動でcanonicalタグを出力されるので、それを止めるために以下をfunctions.phpに加えます。//WordPress独自のcanoicalタグ出力を停止remove_action('wp_head','rel_canonical');固定ページでも「抜粋」機能が使えるように以下をfunctions.phpに加えます。//固定ページで抜粋を入力できるようにするadd_post_type_support('page','excerpt');ogp.phpで書くことogp.phpで設定するのは以下です。fb:app_idについては、特に設定しなくても機能するのでcontentの中は空欄で問題ありません。og:typeog:titleog:descriptionog:urlog:imageog:image:widthog:image:heightog:site_nameog:localefb:app_idtwitter:cardtwitter:creatortwitter:site "> "/> "/> "/> ID)):?> "/> ';}else{echo' ';}?> "/> description;$custon_description=str_replace(array("\r\n","\r","\n"),'',$custon_description);if($custon_description){echo' ';}else{echo' ';};?> | "/> ';}else{echo' ';};?> | "/> cat_ID;$post_id='category_'.$cat_id;$text=category_description();$text=strip_tags($text);$text=mb_substr($text,0,120,'UTF-8');if($text){echo' ';}else{echo' ';}?> ページ目 "/> | "/> ID)):?> "/> ';}else{echo' ';}?> "/> "/> ';echo"\n";}?> post_content;$search_pattern='/ /i';//投稿にイメージがあるか調べる!if(is_single()){//単一記事ページの場合!if(has_post_thumbnail()){//投稿にサムネイルがある場合の処理!$image_id=get_post_thumbnail_id();$image=wp_get_attachment_image_src($image_id,'full');echo' ';echo"\n";echo' ';echo"\n";echo' ';echo"\n";}elseif(preg_match($search_pattern,$str,$imgurl)&&!is_archive()){//投稿にサムネイルは無いが画像がある場合の処理echo' ';echo"\n";echo' ';echo"\n";echo' ';echo"\n";}else{//投稿にサムネイルも画像も無い場合の処理!$ogp_image=get_template_directory_uri().'/images/og-image.jpg';echo' ';echo"\n";echo' ';echo"\n";echo' ';echo"\n";}}else{//単一記事ページページ以外の場合（アーカイブページやホームなど)!if(get_header_image()){//ヘッダーイメージがある場合は、ヘッダーイメージを!echo' ';echo"\n";echo' ';echo"\n";echo' ';echo"\n";}else{//ヘッダーイメージがない場合は、テーマのスクリーンショット!echo' ';echo"\n";echo' ';echo"\n";echo' ';echo"\n";}}?> "> 設定する際の注意点サイトの基本情報は【設定>一般】から設定しておきましょう。このサイトは以下のように設定しています。投稿記事と個別記事については、「抜粋」にテキストがあれば優先されてdescriptionに設定され、「抜粋」に何も無ければ本文の120文字がdescriptionに設定されます。カスタム投稿タイプのアーカイブについて、descriptionを設定するためには、カスタム投稿タイプを作成したときに、一緒にdescriptionを書いておく必要があります。何も設定されていない場合はサイトのキャッチフレーズがdescriptionに反映されます。以下はカスタム投稿タイプがnewsで作成した例です。17行目でdescriptionを設定しています。functionnews_init(){$labels=array('name'=>_x('News','posttypegeneralname'),'singular_name'=>_x('News','posttypesingularname'),'add_new'=>_x('新規追加','News'),'add_new_item'=>__('新しくNewsを追加する'),'edit_item'=>__('Newsを編集'),'new_item'=>__('新しいNews'),'view_item'=>__('Newsを見る'),'search_items'=>__('Newsを探す'),'not_found'=>__('Newsはありません'),'not_found_in_trash'=>__('ゴミ箱にNewsはありません'),'parent_item_colon'=>'',);$args=array('labels'=>$labels,'description'=>'Support-Rの更新情報一覧ページです。','public'=>true,'publicly_queryable'=>true,'show_ui'=>true,'query_var'=>true,'rewrite_withfront'=>true,'rewrite'=>true,'capability_type'=>'post','hierarchical'=>false,'menu_position'=>5,'menu_icon'=>'dashicons-edit-large','show_in_rest'=>false,/*カスタム投稿でgutenberg有効化する場合はtrue/false*/'supports'=>array('title','editor','page-attributes','excerpt'),'has_archive'=>true,);register_post_type('news',$args);}add_action('init','news_init');カテゴリーやタームの説明文を加えておけばそれぞれのアーカイブページで反映されます。ogpの画像について、投稿記事にサムネイル画像が設定されていれば、その画像が設定され、サムネイル画像がない場合は投稿記事内にある最初の画像を取得して、その画像が設定されます。それでも画像がない場合はimagesフォルダにあるog-image.jpgが表示される設定です。og-image.jpgはご自身で用意してもらい、サイズは1200x630にしておきます。投稿記事以外ではheader画像が設定されていれば、その画像がogp画像として設定され、header画像がない場合はscreenshot.pngがogp画像になります。まとめ今回はWordpressでSEOを意識したhead内の書き方について説明しました。プラグインに頼らず、独自に設定したい方は参考にしてみてください。プログラミングの知識がない場合は、SEOSIMPLEPACKというプラグインを使えば簡単に設定することができます。説明も日本語で、管理画面上から設定できるのでオススメです。

WordPressでSEOを意識したhead内の書き方とは？ - OGP設定を含む

GSAPのScrollTrigger.jsを使ったスクロールアニメーションを実装する方法

Photoshopで写真を水彩画にするテクニック

Sassで@useと@forwardを使ったサイト設計 - @importから切り替える手順

スマホ表示でもパララックス！simpleParallax.jsの使い方 - IE11対応済み

イラレ（Illustrator）で手書き文字をトレースして書き出す方法

vwとrem、カスタムCSSを使ってレスポンシブなサイトを作成する手順

FLOCSSベースのサイト設計 - 破綻しないルールを決める

【VSCode】ReactとTypeScriptでTODOリストを作って基礎を学ぶ