【超初心者向けノーコード入門】STUDIOでサイトの構築と運用〜④完璧なSEO対策とバックアップ運用を目指す〜


これは[no plan inc.の Advent Calendar 2023](https://qiita.com/advent-calendar/2023/noplan_inc)の25日目の記事です。


この記事は、超初心者向けにノーコード入門をします。STUDIOというノーコードサイト制作ツールでサイトの構築と運用を写真付きで解説してみたいと思います。


# もくじ

[【超初心者向けノーコード入門】STUDIOでサイトの構築と運用〜①テンプレを駆使して最速リリース〜](https://qiita.com/okamu_/items/6fcc93e43da9caa945d5)
[【超初心者向けノーコード入門】STUDIOでサイトの構築と運用〜②デザインをカスタムしてオリジナルを目指す〜](https://qiita.com/okamu_/items/55231ad180556ead7fac)
[【超初心者向けノーコード入門】STUDIOでサイトの構築と運用〜③多言語対応してみる〜](https://qiita.com/okamu_/items/334f30bfc046f51e01d5) 
**[【超初心者向けノーコード入門】STUDIOでサイトの構築と運用〜④完璧なSEO対策とバックアップ運用を目指す〜](https://qiita.com/okamu_/items/b3c8f1f4be054c1b9d66)  <= いまここ**

# この記事でわかること
- STUDIOでサイトの構築と運用をした場合の完璧なSEO対策や、バックアップなどでしっかりと運用を行う方法がわかります


# この記事の対象
- Web超初心者
    - デザイナーや非技術者で、Webのフロントエンドの実装知識がない、Web超初心者を対象としています
        - まずは雰囲気や使い方について触れてもらうことを目的とします
        - したがって案件化にはこの記事の目次4つは最低でもクリアしないと案件化は難しいでしょう

# 結論
- SEO周りの設定は全て設定しよう
    - metaタグの設定 title, description, OGP画像
    - sitemapはナゾポイントがあります🥺
- 編集する前にまずはバックアップを取ろう


# SEO周りの設定は全て設定しよう

### SEO周りの基礎知識
- 以前no plan inc.の技術記事でも少しSEOとMEOについては紹介を行いましたのでご参考ください

https://note.com/noplan_inc/n/n802148dc2057

> SEO対策はTittle、Description、OGP画像を中心に全部がんばること



### STUDIOでもこの項目を設定していきたいと思います
- metaタグの設定 title, description, OGP画像
- sitemap

### metaタグの設定 title, description, OGP画像を設定する
STUDIOでは「metaタグの設定 title, description, OGP画像」をかんたんに設定することができます！！
ただし注意点があります
- 「サイト(全体)設定」と「ページ(指定)設定」があることです
    - サイト全体に設定していたつもりがページ１つだけに設定してしまっていたパターンなどがあるので注意しましょう
    - 「サイト設定」で全体の設定をしつつ、ページごとの設定を入れておくのがおすすめです


![Screenshot 2023-12-16 at 5.36.13 PM copy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/b4c09f7b-6711-8848-c50d-9c454d4a4a4b.png)

### sitemap
STUDIOでは「sitemap」が最初から自動で生成されています

![Screenshot 2023-12-16 at 5.55.27 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/d68951e0-26f9-485d-962e-e6b9f1860677.png)

```
https://hodohodo.studio.site/sitemap.xml
```

- しかしここの、自動生成リンクでは静的ページのサイトマップとして認識されない時がありました
    - (ちゃんとリンク先にはstaicがついているので正しいとは思う)

サイトマップの登録の仕方は先ほどの[リンク](https://note.com/noplan_inc/n/n802148dc2057)が参考になるかと思います

### もし認識されない場合はURLを手動で書き換えたものもGoogle Search Consoleに登録しましょう!

```
https://hodohodo.studio.site/sitemap.xml
https://hodohodo.studio.site/sitemap-static.xml
```


# 編集する前にまずはバックアップを取ろう

STUDIOさんの公式ブログ(https://studio.design/ja/whats-new/version-control)によると


![Screenshot 2023-12-16 at 6.16.39 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/477d5935-7d2a-0211-1dff-9cc94b146dca.png)

課金してStarterプランで7日だけ！？
ちょっと少ない気もします。。。ぴえん

これではミスってクライアントさん確認をしたりしたときに切り戻しも大変になりそうです。。。

なので、個人的に編集を始める前にはプロジェクトを「複製」して使っています(１アカウントの最高プロジェクト数があるので注意です、いらないバックアップは消すなどした方がいいです)

![Screenshot 2023-12-16 at 6.27.41 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/dcf44774-a6c0-2661-31e5-fce7e2ddee03.png)



# 前回の記事と同様公開と動作確認しましょう
> 動作確認

https://qiita.com/okamu_/items/6fcc93e43da9caa945d5

# まとめ
- SEO周りの設定は全て設定しよう
    - metaタグの設定 title, description, OGP画像
    - sitemapはナゾポイントがあります🥺
- 編集する前にまずはバックアップを取ろう

# 最後に
- STUDIO4部作の視聴ありがとうございました！
    - これを読めばみんなSTUDIOマスターになれます！


# no plan inc.で扱っているTechに関する様々なジャンルをアウトプットします!!


[![top.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/41177709-516f-0174-7cc4-c3052a311ac8.gif)](https://noplan-inc.com)



# no plan株式会社について

- no plan株式会社は **「テクノロジーの力でZEROから未来を創造する、精鋭クリエイター集団」** です。
- ブロックチェーン/AI技術をはじめとした、Webサイト開発、ネイティブアプリ開発、チーム育成、などWebサービス全般の開発から運用や教育、支援なども行っています。よくわからない、ふわふわしたノープラン状態でも大丈夫！ご一緒にプランを立てていきましょう！
- [no plan株式会社について](https://noplan-inc.com)
- [no plan株式会社 | web3実績](https://noplan-inc.com/web3)
- [no plan株式会社 | ブログ一覧](https://noplan-inc.com/blog)
エンジニアの採用も積極的に行なっていますので、興味がある方は是非ご連絡ください！
- [CTOのDMはこちら](https://twitter.com/_serinuntius)