ウェブサイト立ち上げチェックリスト：公開する前にすべき7つのこと

私たちはチェックリストが大好きです。 また、新しいWebサイトの立ち上げはエキサイティングなものになる可能性があることは承知していますが、経験の有無にかかわらず、誰にとってもストレスの多い取り組みになる可能性があります。 サイトを立ち上げるときにひどくうまくいかない可能性のあるいくつかのことを心配する代わりに、公開する前に参照できる便利なチェックリストがあると便利ではないでしょうか。 あなたは運がいいです！

ほとんどのファイナンシャルアドバイザーはウェブサイトのデザインの経験がほとんどないかまったくないため、独自のサイトを構築することは非常に恐ろしい考えになる可能性があることを理解しています。 あなたがウェブがどのように機能するかについての基本的な考えを持っているとしても、あなた自身でウェブサイトの構築に着手することはしばしば費用と時間がかかることがあります。

そのため、エンドユーザーだけでなくビルダーであるあなたも念頭に置いて、TwentyOverTenプラットフォームを開発しました。 私たちの直感的なCMS（コンテンツ管理システム）は、プロのようにあなたのウェブサイトを自律的に管理するためのツールを提供します。 使いやすく、ユーザーフレンドリーで、初心者からエキスパートまで、強力な機能が満載です。

リリース前のチェックリスト

アイテム＃1サイトタイトルを追加する

あなたのウェブサイトのホームページはあなたのウェブサイト全体で群を抜いて最も重みのあるページです。 したがって、新しいWebサイトの傑出したタイトルを選択することが重要です。 Webサイトのタイトルは、検索結果、ブラウザバー、およびフォーム通知に表示されます。 私たちはそれを理解しています–ウェブサイトのタイトルを思い付くのは恐ろしいことかもしれません。 これは、見込み客がWebサイトにアクセスしたときに最初に目にするものです。

あなたのウェブサイトのタイトルはあなたのブランドです。 あなたのウェブサイトの目的を明確にし、あなたのファイナンシャルプランニング会社があなたの競争から際立つのを助けるためによく練られたサイトタイトルを開発するためにあなたの時間をかけてください。 適切なサイトタイトルを選択すると、訪問者にサイトの内容と、サイトにアクセスしたときに何が見つかると期待できるかを伝えるのにも役立ちます。

サイトタイトルの追加：

ステップ1：サイドバーの下部から「サイト設定」にアクセスします。

ステップ2（ロゴファイルのアップロード）： 「ロゴのアップロード」ボタンを使用してファイルをインポートします。 .svg、.png、または.jpegファイルタイプが推奨されます。

ステップ3（ロゴタイプの追加）：特定のロゴがない場合は、「サイトタイトル」ツールを使用して、必要な名前を入力します（これは、Webサイト内のページにロゴとして表示されることに注意してください）。

ステップ4： 「サイトタイトル」ツールを使用する場合は、「ロゴフォント」ツールを使用して、目的のブランドに一致するようにロゴタイプのフォントを変更します。

アイテム＃2ページタイトルの追加

タイトルタグは、使用しているブラウザの上部に表示されます。これは、ユーザーエクスペリエンスとSEOの両方にとって重要です。 ページタイトルを追加してカスタマイズすると、サイトの訪問者により多くの情報が提供されるだけでなく、Googleなどの検索エンジンにサイトのページとそこに含まれる情報に関するより多くの情報を提供するのにも役立ちます。

Webページのタイトルタグは、ページのコンテンツを正確かつ簡潔に説明することを目的としています。 以下の例では、「オハイオ州クリーブランド| 女性ファイナンシャルアドバイザー| GlassFinancialはタイトルタグです。 SEOの観点から、タイトルタグは次のようにフォーマットする必要があります。プライマリキーワード–セカンダリキーワード| ブランド名。 あなたは会社がどこにあるか、顧問または会社を説明するキーワードとビジネスの名前を見ることができます。

ページタイトルのカスタマイズ：

アイテム＃3すべてのページとブログ投稿にメタデータを追加する

メタディスクリプションは、検索エンジンと検索者にあなたのサイトが何であるかを説明します。 説得力のあるメタディスクリプションをサイトに含めることは、誰かがSERP（検索エンジンの結果ページ）からサイトをクリックしたかどうかを決定する要因になることがよくあります。特に、検索者が探しているキーワードを含める場合はそうです。

TwentyOverTenのクライアントであるForwardThinkingWealth Managementは、メインのタイトルタグだけでなく、サブヘッダーの下にもメタデータの説明を含めるという素晴らしい仕事をしてきました。

これがキャッチであり、ほとんどのアドバイザーがスリップアップしているところです。 Webサイトの各ページにメタデータを追加する必要があります。 これには、メインページ、ランディングページ、ブログ投稿も含まれます。

Webページへのメタデータの追加：

ブログ投稿へのメタデータの追加：

ステップ1：サイドバー（Aアイコン）から「投稿の管理」にアクセスします。

ステップ2：メタデータを追加するブログ投稿を選択します。

ステップ3： SEOの説明ボックスが表示されるまで下にスクロールして、コンテンツを追加します。

ステップ4：メタデータは、その特定のブログ投稿に表示されるコンテンツの短い1〜2文の説明（キーワードが豊富）である必要があります。 選択したコンテンツを追加したら、[保存]ボタンをクリックします。

アイテム＃4接続フォーム

お問い合わせページにフォームはありますか？ フォーム内の各フィールドが正しく機能していることを確認するために、それぞれに記入することが重要です。 [送信]または[送信]をクリックすると、正しい確認またはありがとうページが表示されることも確認する必要があります。 最後に、サインアップした電子メールをチェックして、リクエストが正常に送信されたことを確認します。 あなたのサイトの訪問者にとって、機能しないフォームに記入することほど腹立たしいことはありません。ビジネスオーナーとして、あなたはそれらのリードも確実に獲得したいと思っています！

接続フォームデータの追加：

1）デフォルトフィールドの名前を変更する

ステップ1：フォームのデフォルトのフィールド名を編集するには、最初にログインして編集画面を表示する必要があります。 ここから、フォームが表示されているページに移動し、ページのコンテンツをクリックしてエディターツールボックスをアクティブにします。

ステップ2：ここから、編集ツールボックスから</>アイコンを選択します。

ステップ3：これは、ページのコンテンツの「コードビュー」と呼ばれるものに切り替わります。 あなたが見ているのは、このページの実際のWebサイトコードです。 このコード内でフォームが配置されている場所を見つけると、次のようになります。

ステップ4：フィールドごとに、デフォルトのフィールドをカスタマイズするために変更できる2つの領域があります。 これは、フィールドのラベルテキストとフィールド名になります。

したがって、 「電話」フィールドを「あなたの電話番号」に変更したいとします。

 < div class = " form-item " > < label > Phone </ label > < input class = " form-control " name = " contact[phone] " type = " text " /> </ div >

 < label > Phone </ label >

次のように変更できます。

 < label > Your Phone Number </ label >

次に、フィールド名を変更し、次のようなものを探します。

 < input class = " form-control " name = " contact[phone] " type = " text " />

フィールドコード内に、次のように表示されます。

 name="contact[phone]"

フィールドの名前は[]括弧内にあります。 したがって、これを次のように変更します。

 name="contact[your-phone-number]"

ステップ5：完了したら、コードビューの右上にある</>アイコンをクリックして、ビジュアルエディターに戻り、更新されたフォームを確認します。

フォームフィールドの名前が正常に変更されました。 すべてが良さそうな場合は、[変更を保存]をクリックし、公開プロセスを進めて更新を公開することを忘れないでください。

2）単一行のテキストを追加する

1行のテキストフィールドは、2〜5語の短い回答（会社名、年齢、郵便番号など）のユーザー入力テキストを収集するのに役立ちます。

ステップ1：これを追加するには、最初にログインして編集画面を表示する必要があります。 ここから、フォームが表示されているページに移動し、ページのコンテンツをクリックしてエディターツールボックスをアクティブにし、 </>アイコンをクリックして「コードビュー」をアクティブにします。

ステップ2：このコード内で、フォームが配置されている場所を見つけます。次のようになります。

ステップ3：各フィールドは次のコードに含まれています： <div class="form-item"> ... </div>なので、上にコピーしたコードを貼り付けて、他のフィールドのコードの前後に配置してください。 。

ステップ4：上記の最初のセクションで概説したように、このフィールドのラベルテキストとフィールド名を変更する必要があります。

3）複数行のテキストを追加する

複数行のテキストフィールドは、長い形式の質問に最適です。

ステップ1：これを追加するには、最初にログインして編集画面を表示する必要があります。 ここから、フォームが表示されているページに移動し、ページのコンテンツをクリックしてエディターツールボックスをアクティブにし、 </>アイコンをクリックして「コードビュー」をアクティブにします。

ステップ2：このコード内で、フォームが配置されている場所を見つけます。次のようになります。

ステップ3：各フィールドは次のコードに含まれています： <div class="form-item"> ... </div>なので、上にコピーしたコードを貼り付けて、他のフィールドのコードの前後に配置してください。 。

ステップ4：上記の最初のセクションで概説したように、このフィールドのラベルテキストとフィールド名を変更する必要があります。

4）選択ドロップダウンを追加

[ドロップダウンフィールドの選択]は、事前定義された長いオプションに最適です。

ステップ1：これを追加するには、最初にログインして編集画面を表示する必要があります。 ここから、フォームが表示されているページに移動し、ページのコンテンツをクリックしてエディターツールボックスをアクティブにし、 </>アイコンをクリックして「コードビュー」をアクティブにします。

ステップ2：このコード内で、フォームが配置されている場所を見つけます。次のようになります。

ステップ3：各フィールドは次のコードに含まれています： <div class="form-item"> ... </div>なので、上にコピーしたコードを貼り付けて、他のフィールドのコードの前後に配置してください。 。

ステップ4：上記の最初のセクションで概説したように、このフィールドのラベルテキストとフィールド名を変更する必要がありますが、ユーザーが使用できるドロップダウンオプションもカスタマイズする必要があります。 これを行うには、コピーして貼り付けたコードから次のものを追加/削除するだけです。 <option>Option 1</option>

最初の<option>の設定が少し異なることに気付くでしょう。 これは、 disabled="disabled"およびselected="selected"コードで示されているように、ユーザーに何をすべきかを指示するためのオプションのデフォルトオプションです。 このオプションのテキストも自由に編集するか、オプションを完全に削除してください。

5）ラジオボタンを追加する

ラジオボタンフィールドは、単一回答オプションを表示するためのもう1つの優れた方法です。

ステップ1：これを追加するには、最初にログインして編集画面を表示する必要があります。 ここから、フォームが表示されているページに移動し、ページのコンテンツをクリックしてエディターツールボックスをアクティブにし、 </>アイコンをクリックして「コードビュー」をアクティブにします。

ステップ2：このコード内で、フォームが配置されている場所を見つけます。次のようになります。

ステップ3：各フィールドは次のコードに含まれています： <div class="form-item"> ... </div>なので、上にコピーしたコードを貼り付けて、他のフィールドのコードの前後に配置してください。 ：

ステップ4 ：上記の最初のセクションで概説したように、このフィールドのラベルテキストとフィールド名を変更する必要がありますが、ラジオボタンオプションの値と表示テキストもカスタマイズする必要があります。

ここでの値は次のように表示されます： value="1" 、 1を電子メール通知に表示するテキストに変更するだけです。 表示テキストは、 Option 1として表示されます。これは、終了</label>タグの直前に表示されます。 これは、ユーザーがこのオプションに対して表示するテキストです。これを好きなように変更してください。

6）チェックボックスを追加する

チェックボックスは、複数の選択肢がある質問に最適です。

ステップ1：これを追加するには、最初にログインして編集画面を表示する必要があります。 ここから、フォームが表示されているページに移動し、ページのコンテンツをクリックしてエディターツールボックスをアクティブにし、 </>アイコンをクリックして「コードビュー」をアクティブにします。

ステップ2：このコード内で、フォームが配置されている場所を見つけます。次のようになります。

ステップ4：各フィールドは次のコードに含まれています： <div class="form-item"> ... </div>なので、上にコピーしたコードを貼り付けて、他のフィールドのコードの前後に配置してください。 。

ステップ4：上記の最初のセクションで概説したように、このフィールドのラベルテキストとフィールド名を変更する必要がありますが、チェックボックスオプションの[値]と[テキストの表示]もカスタマイズする必要があります。 これを行うには、コピーして貼り付けたコード内で次のものを見つけるだけです。

ここでの値は次のように表示されます： value="1" 、 1を電子メール通知に表示するテキストに変更するだけです。 表示テキストは、 Option 1として表示されます。これは、終了</label>タグの直前に表示されます。 これは、ユーザーがこのオプションに対して表示するテキストです。これを好きなように変更してください。

アイテム＃5ファビコンを追加する

ファビコン（お気に入りアイコンの略）は、基本的に特定のWebサイトに関連付けられた小さなアイコンです。 ファビコンをサポートするブラウザは、通常、ブラウザのアドレスバー、ブックマーク、および履歴にもアイコンを表示します。 適切に設計されたファビコンは、通常、会社のロゴまたはWebサイトのテーマと一致します。 Webサイトにファビコンを追加すると、訪問者はWebサイトを一目ですばやく認識できます。

TwentyOverTenクライアントのFitWealthAdvisorsには、名前を検索エンジンに結び付けるときに左側にポップアップする「Fit」アイコンがあります。

ファビコンの追加：

サイズが16x16px以上のファビコンを作成することをお勧めします。 Twenty Over Tenプラットフォーム内で、独自のファビコンを追加するのは簡単です。 ファビコンをアップロードするときは、PNGまたはICOファイルタイプが優先されることに注意してください。

アイテム＃6アナリティクスを追加

Webサイト分析の追跡と監視は非常に重要であり、パフォーマンス重視のWebサイトの基盤です。 Google Analyticsは、ユーザーに大量のデータを提供し、Twenty OverTenWebサイトに簡単に統合できます。 Google Analyticsアカウントを設定していない場合は、ここで設定できます。

あなたのウェブサイトにグーグルアナリティクスを追加する：

GoogleAnalyticsアカウントをTwentyOverTen Webサイトと統合するには、GoogleAnalyticsアカウント番号が必要です。 Google Analyticsが提供するトラッキングIDは、UA-000000-2のような文字と数字の文字列です。 データを送信するアカウントとプロパティをAnalyticsに指示するには、これをトラッキングコードに含める必要があります。 最初の番号のセット（上記の例では-000000）はアカウント番号を示し、2番目の番号のセット（-2）はアカウントに関連付けられた特定のプロパティ番号を示します。 Googleアナリティクスアカウント内でトラッキングIDを見つけるための基本的な手順は次のとおりです。

アイテム＃7テストテストテスト

私たちはそれを十分に言うことはできません–テストし、テストし、そしてもう一度テストしてください！ あなたのウェブサイトがうまく機能しているとき、それはあなたのビジネスを指数関数的に成長させるのを助けます。 ただし、分析とテストを使用しないと、Webサイトのパフォーマンスや、サイトのパフォーマンスを向上させる方法を知ることはできません。 ユーザーエクスペリエンスに悪影響を与える可能性のある問題を見つけてバグを修正するには、起動する前にWebサイトをテストすることが非常に重要です。

私たちのチームは常にテスト、バグの潰し、プラットフォームの改善を行っていますが、新しいWebサイトを立ち上げる前に、ユーザーが品質保証のために確認することをお勧めする追加のページ上の項目がいくつかあります。

• リンク：どこにも行かない、または完全に無関係なページに移動するリンクをクリックすることほど悪いことはないと思います。 サイトの各リンクをクリックしてテストし、意図した場所に移動していることを確認します。
• 文法とつづり：あなたはあなたのウェブサイトのための堅実なコンテンツを開発することに多くの時間を費やしました。 ばかげたエラーを見逃して無駄にしないでください。 何時間も（場合によっては数週間も）サイトを見た後、エラーを見逃しがちです。 起動する前に、同僚またはパートナーにテストサイトを確認してもらい、スペルや文法の誤りを見つけることを検討してください。
• ルックアンドフィール：一歩下がって、画像とコンテンツのブロックを確認します。 十分な余白がありますか、それともすべてが滑らかに見えますか？ 間隔が適切であり、カラーパレットがブランドのアイデンティティを反映しており、全体的なスタイルが同等であることを確認してください。 さらに、あなたのウェブサイトがうまく流れることを確認してください。 ほとんどのアドバイザリーファームのWebサイトの平均訪問時間は、1分強です。 シンプルでナビゲートしやすいものにしてください。 5ページ以上でメッセージを伝える必要がある理由はありません。