Google XML Sitemapsで「送信されたURLにnoindexタグが追加」を解決【除外の追加方法】

「送信されたURLにnoindexタグが追加されています」は、noindexが付いてる投稿がサイトマップに含まれていることからサーチコンソール上で発生するエラー。

つまりはnoindexを付けた投稿を、サイトマップに掲載しなければOK。

Google XML Sitemapsをサイトマップ生成のために使っているのであれば、noindexを付けた投稿をサイトマップ上に表示しない設定が必要。

表示しないためには、除外設定に投稿IDを追加する必要がある。

追加の手順は以下の通り。

1.noindexを付けた投稿のIDを確認する

投稿IDの確認の仕方は、投稿一覧で該当する投稿のタイトル上にカーソルを合わせると、左下に表れるURLの「post=数字」の数字がIDとなっている。

投稿ID

この数字をメモしておく。

複数の投稿にnoindexを付けているなら、付けている全ての投稿のIDを控えておく。

2.noindexが付いた投稿のIDを、Google XML Sitemapsの除外設定に追加する

管理画面左側のメニューから、設定→XML-Sitemapへ移動し、Google XML Sitemapsの設定ページを表示する。

下の方にスクロールしていくと、「Excluded Items」という項目がある。

「Excluded Items」の欄の中の、「投稿 (個別記事) を含めない」の下のボックスに、先ほど控えた投稿IDを入力していく。

複数の投稿IDを入力する場合は、カンマ区切りで入力する。

Google XML Sitemap 除外
数字・カンマは英数半角入力モードにすること、また各投稿IDの間にスペースを入れないように注意。

以上で除外に登録した投稿はサイトマップから表示されなくなる。

試しに「ドメイン名/sitemap.xml」にアクセスして、除外登録した投稿のスラッグで検索し、サイトマップ上にないことを確かめてみるのがおすすめ。

設定完了後、サーチコンソール上で、「修正を検証」をクリックすることを忘れずに。

追記:

検索すると、Google XML Sitemapsの「HTML形式でのサイトマップを含める」のチェックを外すのが多数検索結果に表示されるが、そもそもの問題の原因が異なるため要注意。

SANGOテーマでタグに付くnoindex解除の方法【公式の修正版】

先に答えを知りたい人は、以下のコードをコピーしてSANGOの子テーマのfunctions.php内貼り付ければ解除できます。

// デフォルトのmeta robotsタグの除去
function remove_parent_theme_hook(){
  remove_action('wp_head','sng_meta_robots', 10);
}
add_action('after_setup_theme','remove_parent_theme_hook');

// デフォルトのコードをカスタマイズ
function my_meta_robots() {
  global $post;
  $rogots_tags = '';

  if (is_attachment()) {//メディアページの場合

    $rogots_tags = 'noindex,nofollow';

  } elseif (is_page() || is_single()) { //記事・固定ページの場合

    $robots_r  = get_post_meta( $post->ID, "noindex_options", true );
    if( is_array($robots_r) ) {
      $rogots_tags = ( in_array('noindex', $robots_r) && !in_array('nofollow', $robots_r)) ? 'noindex,follow' : implode( ",", $robots_r);
    }

  } elseif(is_paged() || is_date()){ //トップやアーカイブの2ページ目以降はindexせず、followだけ。

    $rogots_tags = 'noindex,follow';

  } elseif(is_search()){ //検索結果はインデックスしない

    $rogots_tags = 'noindex,nofollow';

  } elseif(is_category()){ //カテゴリーページ
    //初期設定ではインデックス。下記のコメントアウトを外すとnoindexに
    //$rogots_tags = 'noindex,follow';
  }
  elseif(is_tag()) {
    // 下記のコメントアウトを外すと再度noindexに
    //$rogots_tags = 'noindex,follow';
  }

  if($rogots_tags) {
    echo '<meta name="robots" content="'.$rogots_tags.'" />'."\n";//出力
  }
}
add_action( 'wp_head', 'my_meta_robots' ,10);

以下説明。

WordPressでメジャーなブログテーマであるSANGOでは、自動でタグページにnoindexが付くようになっている。

そしてこのタグがつかないようにするために、公式サイトでも子テーマに追加するコードが書かれている。

タグページにnoindexがつかないようにしたい

しかし、このコードを貼り付けてもnoindexが解除されない

なぜならWordPressが子テーマのfunctions.phpの方を先に読み込み、親テーマのfunctions.phpを後に読み込むから。

つまり子テーマのfunctions.phpで親テーマのfunctions.phpのコードを上書きしようとしても、ファイルの読み込み順序が子テーマの方が先なため上書きできない。

そもそも読み込まれる順序が逆だからである。

親テーマでフックに登録された関数を消すためには、’after_setup_theme’アクションフックで、親テーマの読み込みが終わってから実行されるようにする必要がある。

またコード3行目のremove_action関数の引数を「10」にしないと解除できないため要注意

※引数とはremove_action(‘wp_head’,’sng_meta_robots’, 10);の、最後についてる数値のことです

この引数はフックの優先順位を指定するもので、優先度の数が小さいほど先に実行され、大きいほど後に実行される。

初期値はどのフックも「10」なのだが、優先度を同じにしないと解除できない。

本来であればSANGO公式サイトに連絡するのがいいのかもしれないが、その時間が取れず。(この記事は書いてるけど…w)

誰か優しい方はSANGO公式に連絡してあげてください。

Mac上のVirtualBoxでWindows10の画面サイズが小さい問題を解決【Guest Additionsインストール後の設定もあり】

先日VirtualBoxをアップデートしたところ、アップデート方法を間違えたのか各仮想OS再インストールするはめに。

再インストールしたところ、画面サイズが小さい。。

調べてみるとGuest Additionsをインストールすれば直るとのこと。

VirtualBoxでWindows10を入れたらGuest Additionsをインストールしよう

しかしこのGuest AdditionsをインストールしてWindows10を再インストールしても、画面は小さいまま。

カーソルで画面の端を持って拡大させてみても画面の大きさに合わせてWindows10の画面が拡大されない。

さらに調べると、VirtualBoxのWindows10のDisplay設定のメモリを増やすことでできることが判明!!

VirtualBoxの初期画面から、MSEdge – Win10の設定画面を表示。キーボードショートカットはCmd + S

VirtualBox6.0

開いたらDisplayタブを選択する。

ScreenタブでVideo Memoryが初期状態だと8MBになってるので、右端いっぱいの128MBまで増やす。

VirtualBox6.0 Display

増やした後再度仮想Windows10を起動すると、画面が拡大できるようになった。

しかし仮想Windows10内の解像度が高すぎて文字が小さく読めない。。

こちらは仮想Windows10内のディスプレイ設定を直すことで修正。Windows10の画面上で右クリックし、Display settingsを開く。

後は出たきたDisplay設定画面で”Cnage the size of text, apps, and other items”のゲージを右に伸ばしてく。

仮想Windows10

200%ぐらいがちょうどよかった。

ここまで来るのに約1時間が溶けた…

関連記事で現在のページを除外するWordPressループの引数の指定方法

関連記事を出力するWordPressループで、現在のページを関連記事に表示させないような引数の指定方法。

‘post__not_in’オプションを使用することで実現できる。

<?php
$currentID = get_the_ID();
$my_query = new WP_Query( array('cat' => '1', 'showposts' => '5', 'post__not_in' => array($currentID)));
while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h2>
<?php the_content(); ?>
<?php endwhile; ?>

参考:Exclude current post from WP Query

オプションタグ(option)で初期表示させる項目を選択できないようにする方法

オプションタグで最初に表示させる項目は、ラベルのようなもので実際には選択されないようにするための方法。

最初のoptionを使って、valueを空にし、selected disabled hiddenをoptionタグ内に入力すれば実現できる。

<select>
  <option value="" selected disabled hidden>選択肢を選ぶ</option>
  <option value="1">項目A</option>
  <option value="2">項目B</option>
  <option value="3">項目C</option>
  <option value="4">項目D</option>
  <option value="5">項目E</option>
</select>

参考:How can I set the default value for an HTML <select> element?

フォームのinputボタン内のvalueの文字をCSSで折り返す方法

フォームのinputボタン内のvalueの文字をCSSで折り返す方法。valueに設定している文字列が長く、モバイル表示ではボタン内で折り返して表示したい時。

white-spaceプロパティで実現できる。

input {
 white-space: normal;
}

参考:Wrap text on an HTML input button with CSS

tbodyタグは省略可能かどうか【W3Cの和訳あり】

tbodyタグは省略可能か。結論から言うと、table要素内い表が1つしかなければ省略可能。以下詳細説明。

このtbodyタグはテーブルの本体に当たるコンテンツを囲むために使われる。特にtableタグで囲む表が複数に渡る場合、thead、tfootを追加(テーブル内のheader、footerの役割)してテーブルに関する情報を入れ、実際のテーブル本体をtbodyで囲む。

W3Cを参照すると、表が1つしかなく、thead、tfootタグを使わない場合は、tbodyタグを省略することが可能。以下W3Cの説明箇所のスクショ。

そしてなんとこのthead、tfoot、tbodyは閉じタグはオプションとなっている。下記のように開始タグのみで書くことが可能。

ということで、複数の表を1つのtable内で使わず、1つの表のみであればtbodyタグは省略可能である。

参考:The World Wide Web Consortium, 11 Tables

 

selectタグに::before ::afterなどの疑似要素を追加する方法【CSS】

結論から言うとselectタグには::beforeや::afterの疑似要素を当てることはできない。

そのためselectタグの親要素に擬似要素を指定して代用する。

<div class="search-pref">
  <select name="pref[]">
    <option>都道府県</option>
    <optgroup label="北海道・東北">
      <option value="1">北海道</option>
      <option value="2">青森県</option>
      <option value="3">岩手県</option>
      <option value="4">宮城県</option>
      <option value="5">秋田県</option>
      <option value="6">山形県</option>
      <option value="7">福島県</option>
    </optgroup>
    <optgroup label="関東">
      <option value="8">茨城県</option>
      <option value="9">栃木県</option>
      <option value="10">群馬県</option>
      <option value="11">埼玉県</option>
      <option value="12">千葉県</option>
      <option value="13">東京都</option>
      <option value="14">神奈川県</option>
    </optgroup>      
  </select>
</div>

このような構成だった場合、

.search-pref::before {
 /* スタイル */
}

このように親要素に擬似要素を付けて調整する。

参考:Pseudo elements and SELECT tag

CSSで背景画像の位置を中央から引いた/足したpx数にする

CSSで背景画像のpositoinを要素の中央から何pxか引いた、もしくは足した数にする方法。

calcを用いて計算させる。

.from-center {
 background-image: url('nandemo.png');
 background-repeat: no-repeat;
 background-position: calc(50% - 120px) 0;
}

こんな感じ。上の例だと中央から120px離してる。