HTMLでmetaタグを使って自動的に他のページにジャンプする方法を現役デザイナーが解説【初心者向け】
初心者向けにHTMLでmetaタグを使って自動的に他のページにジャンプする方法について解説しています。metaタグを使ったリダイレクト処理の書き方、使用時の注意点について説明します。サイト移転時などの参考にしてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLでmetaタグを使って自動的に他のページにジャンプする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
metaタグを使って自動的に他のページにジャンプする方法について詳しく説明していくね！
お願いします！
活用場面
ネットでとあるページを開いてみると「このページは30秒後に自動的に別のURLにリンクします。」なんて表示が出てきて、別のURLに飛ばされた、なんて経験をしている方は結構多いと思います。
このような別のサイトに自動的に飛ばされることを「リダイレクト処理」といい、HTMLによるリダイレクト処理を使う場面としてはサイトのドメインやページのアドレスなど、URLを変更したときや、サイトをhttps化したときなどに使用します。 古いサイトやページのURLに訪れた人に対して「アドレスが変わりました」ということを教える役割があります
自動的に他のページにジャンプする方法
使い方としては、HTMLに専用のタグ「meta refresh」を埋め込むためhtmlによるリダイレクトと呼ばれることがあります。使いかたはいたってシンプルです。HTMLファイルの＜head＞～＜/head＞内に
<meta http-equiv="refresh"content="0;URL=https://hoge.com">
と記述するだけです。ページによっては、「本サイトは移転しました。5秒後にジャンプします」といった表示が出た後、自動的に転送されるのを見たことがあるかもしれません。
そうすると、記述は下記のようになります。
<meta http-equiv="refresh" content="5;URL=https://hoge.com">
SEOの効果を期待するならば、転送までの時間は0秒を指定しておくことをお勧めします。
「meta refresh」タグでのリダイレクトは、SEO効果を最大限に発揮できないという可能性はあるものの、移転先のURLをインデックスさせ、評価をある程度引き継ぐことが可能です。
ただし、Googleは「meta refresh」によるリダイレクトをサポートこそしているけれど決して推奨しているわけではないので、.htaccessやphpなどを利用したサーバーサイドでのリダイレクト（301/302リダイレクト）ができない場合に利用することがおすすめです。
metaタグを使って自動的に他のページにジャンプしてみよう
meta refreshは初心者でも簡単にリダイレクト処理ができるとても便利なタグです。確かにGoogleの推奨ではありませんが、簡単でお手軽というのが最大の利点であると思います。
また、「meta refresh」タグを設置した場合はリダイレクト処理が正常に行われているかどうかチェックできるツールもありますので、そちらも利用してきちんと正常なリダイレクト処理が行われるチェックすることも併せてお勧めしておきます。
監修してくれたメンター
| メンター増田直子
40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。 趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
