どうも、仙台のWeb制作フリーランスとして活動しているキクチウェブのキクチです。
本日も毎度お馴染みノーコードツールSTUDIOについて解説していきます。
去年の夏に登場した機能が「リダイレクトページ」というモノ。
簡単にSEO評価を引き継いだ301リダイレクトを設定できます。
301リダイレクトというのは、サイトにアクセスしたユーザーを最初にリクエストのあったURLとは別のURLに恒久的に変更する転送処理らしいです。
リダイレクトの活用場面は、
SEO評価を引き継いだまま別ページに飛ばせる。
名刺やチラシなどにURLやQRコードをすでに載せてしまっている場合にも別ページを見せられる。
などが挙げられます。
STUDIOでは自分のSTUDIOサイト内の別ページに飛ばす方法と外部のページに飛ばす方法
両方ともとても簡単に設定できます。
しかし、注意点もあるので併せてご覧ください。
では早速、リダイレクト処理をやっていきましょう！
リダイレクト先がSTUDIOのサイト内の場合
まずは、リダイレクト先がSTUDIOのサイト内の場合を見ていきましょう。
STUDIOのブログ記事からサイト内の別のブログ記事にリダイレクトさせていきます。
分かりやすいように、今回は「Small Company」というテンプレートから始めていきます。
このテンプレートから始めることで最初からサンプルのブログ記事が3つ用意されます。
このように最初から記事が3つ用意されています。
今回はSTUDIOのサイト内へリダイレクトさせるので、
①の「住宅が完成した田中様にお話をお伺いしました。」から②の「ホームページをリニューアルしました。」にリダイレクトさせたいと思います。
なので、「Slug」を覚えておきたいと思います。
①は「/voice01」、②は「/website-renewal」
続いて、「デザインエディタ」に移動します。
画面左下のこのマークから
画像のように「ページを追加」して「リダイレクトページ」を選択します。
このようなポップアップが現れるので、
ここにSTUDIOサイト内のページのパスを入力していきます。
今回の場合は、このように入力することになります。
各記事は「/info」の下に位置しているのでこのような書き方になります。
私の場合は、リダイレクト先をコピペで貼り付けると上手くいかなかったので、手打ちの方が良いかもしれません。スペルミスにはご注意ください。
「作成」をクリック。
画面左側のレイヤーパネルを見るとこのようにリダイレクトページが生成されています。
禁止マークのようなものが出ており、上手くいってないように見えますが、リダイレクト処理は行われるので大丈夫です。
はい。これで完成です。
ライブプレビュー機能でリダイレクトされるか見てみましょう。
「お知らせ」をクリック。
そして「住宅が完成した田中様にお話をお伺いしました。」をクリック。
このように「ホームページをリニューアルしました。」のページにリダイレクトできてればOKです。
ライブプレビューのURLの末尾に「/info/voice01」を追加して、リダイレクトされるか確認する方法もあります。
リダイレクト先が外部のサイトの場合
続いて、リダイレクト先が外部のサイトの場合を見ていきましょう。
STUDIOのブログ記事から外部のサイト（STUDIO Showcase）にリダイレクトさせていきます。
分かりやすいように、今回は「Small Company」というテンプレートから始めていきます。
このテンプレートから始めることで最初からサンプルのブログ記事が3つ用意されます。
このように最初から記事が3つ用意されています。
「設立100周年を迎えました。」の記事から外部サイト（STUDIO Showcase）にリダイレクトさせたいと思います。
なので、記事の「Slug」を覚えておきたいと思います。
「/100th-anniversary」を覚えておきましょう。
続いて、「デザインエディタ」に移動します。
画面左下のこのマークから
画像のように「ページを追加」して「リダイレクトページ」を選択します。
このようなポップアップが現れるので、
「パス」にリダイレクト元となる「info/100th-anniversary」を入力。
「リダイレクト先」には「https://showcase.studio.design/ja」を入力します。
今回のようにリダイレクト先が外部サイトの場合、「https://」から始まるURLを入力します。
私の場合は、リダイレクト先をコピペで貼り付けると上手くいかなかったので、手打ちの方が良いかもしれません。スペルミスにご注意ください。
このように入力したら「作成」をクリック。
はい。これで完成です。
画面左のレイヤーパネルでリダイレクトページが生成されたのを確認できます。
ライブプレビュー機能でリダイレクトされるか確認してみましょう。
「お知らせ」をクリック。
そして「設立100周年を迎えました。」をクリック。
このように外部サイト「STUDIO Showcase」のページにリダイレクトできてればOKです。
ライブプレビューのURLの末尾に「/info/100th-anniversary」を追加して、リダイレクトされるか確認する方法もあります。
リダイレクトの注意点
STUDIOのリダイレクト処理には注意点が2つございます。
1つ目が、リダイレクト元にすでにあるページのパスを指定できないという仕様です。
あくまで一例ですが、すでに「Contactページ」が存在していて、それをリダイレクト元に設定したいとします。
するとこのようなメッセージが出て、設定することができません。
なので、これを解消するためには元ページである「Contactページ」のパスを変更するか削除するかになります。
直感的には大丈夫そうなのに、出来ないので「あれ？」と困惑すると思います。
STUDIOのリダイレクト処理の場合、リダイレクト元のページが存在していると上手くいきません。
その理屈からすると、先に紹介したリダイレクト元をブログ記事にするのも上手くいかない気がしますが、そちらに関しては動作しました。しかし、禁止マークのようなものが出ていたのは確かです。
この仕様には十分ご注意ください。
もう一つの注意点は、リダイレクト先のページが非公開や存在しないページだとアクセス時にエラーになるという仕様です。
まぁでもこれに関しては、あまりないケースだと思うので大したデメリットにはならないでしょう。
非公開ページなどにリダイレクトさせることはできないので、ご注意ください。
まとめ
STUDIOではこのように簡単にリダイレクト処理を行うことが可能です。
もし、リダイレクト処理が上手くいかない場合は、パスやURLなどのスペルミスがないかチェックしてみてください。
リダイレクト先の部分でコピペだと上手くいかないところがあって、手打ちだと反応するのですがミスも多くなりがちなのでチェックしてみてください。
STUDIOでは以前まではリダイレクト処理は少し面倒なものでしたが、去年の夏のアップデートによって改善されました。STUDIOは日々使いやすいツールへと進化しているのを感じます。
とはいえ、まだできないことがあるのも事実です。
私が知る限りでのSTUDIOでできないことをまとめているのでよろしければご覧ください。
最近はとても暑くなってきたので、お身体にはお気をつけください。
以上、仙台のWeb制作フリーランスとして活動しているキクチでした。ではでは。
