• HTML

PCサイトとスマホサイトのurlが分かれている場合(フルレスポンシブでない) の紐付け link rel="canonical" の使用例

例えば、PC用サイトhttps://www.hoge.comがあるとて
スマホサイトがhttps://www.hoge.com/sp/
だった場合に
それぞれのhead内の link rel="canonical" をどのように書くべきか?

現象だけ言うと・・・
2つのURLの関係を link タグ、rel="canonical" 要素、rel="alternate" 要素で伝える

参考:https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls?hl=ja

参考:https://webmaster-ja.googleblog.com/2013/05/5-common-mistakes-with-relcanonical.html

パソコン用のページのheadには

  <link rel="alternate" media="only screen and (max-width: 640px)" href="https://www.hoge.com/sp/">

スマホ用のページのheadには

  <link rel="canonical" href="https://www.hoge.com">

でよい。

なお、上記の場合は、
当たり前ですが
.htaccessにユーザーエージェント毎に表示サイトを替える記述が必要

.htaccessの記述例

  <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
  RewriteCond %{QUERY_STRING} !mode=pc
  RewriteRule ^$ /sp/ [R,L]
  
  #スマホでtopページ(index.html)に来た場合は/sp/へ移動
  RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
  RewriteCond %{QUERY_STRING} !mode=pc
  RewriteRule ^index.html$ /sp/ [R,L]

  #ページ毎に設定したい場合は、ページ毎指定するのが管理が楽だと思う。
  #PCには存在するページがスマホでは存在しない場合とかね。
  RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
  RewriteCond %{QUERY_STRING} !mode=pc
  RewriteRule ^/profile/index.html$ /sp/profile/index.html [R,L]
  
  #もしスマホサイトにパソコンでアクセスしたらPCサイトに移動する
  #要はパソコンでアクセスしたら/sp/を URL からとるって流れ
  RewriteCond %{REQUEST_URI} /sp/
  RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|Android|Windows\ Phone)
  RewriteRule ^sp/(.*)$ $1 [R]
  RewriteBase /

  </IfModule>

これは、PC用サイトhttps://www.hoge.comに対し
スマホサイトがhttps://www.sp.hoge.com
の場合でも同じルールで書くことができる

パソコン用のページのheadには

  <link rel="alternate" media="only screen and (max-width: 640px)" href="https://www.sp.hoge.com">

スマホ用のページのheadには

  <link rel="canonical" href="https://www.hoge.com">

こちらは、スマホサイトがサブドメインで分かれているため、
.htaccessにユーザーエージェント毎に表示サイトを替える記述はいらない