モバイルとタブレットの別のディレクトリを持つ古い Web サイトを継承しました。どちらもデスクトップ版と内容が重複しています。モバイル バージョンとタブレット バージョンはどちらも JQuery Mobile を使用しており、「ページ」のデータ ロールを持つ 1 ページャーです。
award.html という名前のデスクトップ ページは、モバイルおよびタブレット バージョンでは次のように表示されます。
<div data-role="page" id="awards">
デスクトップ ページでは、head タグに次のように追加しています。
<link rel="alternate" media="only screen and (max-width: 480px)" href="http://www.example.com/mobile/#awards"/>"
<link rel="alternate" media="only screen and (max-width 768px) and (min-width 481px)" href="http://www.example.com/tablet/#awards"/>"
私の質問は、モバイル版とタブレット版で、サイト全体が 1 つのインデックスにあり、head タグを共有しているため、canonical タグを追加するにはどうすればよいですか? これをどこに置くのですか？
<link rel="canonical" href="http://www.example.com/awards.html" />