Контрольный список запуска веб-сайта: 7 главных вещей, которые нужно сделать перед запуском

Мы ЛЮБИМ контрольные списки. И хотя мы знаем, что запуск нового веб-сайта может быть захватывающим, он также может быть стрессовым для любого, независимо от того, опытный вы или нет. Вместо того, чтобы беспокоиться о нескольких вещах, которые могут пойти ужасно неправильно при запуске вашего сайта, не было бы неплохо иметь удобный контрольный список, на который можно ссылаться перед запуском? Вам повезло!

Мы понимаем, что у большинства финансовых консультантов практически нет опыта в разработке веб-сайтов, что может сделать создание собственного сайта очень пугающей идеей. Даже если у вас есть базовое представление о том, как работает сеть, создание собственного веб-сайта часто может быть дорогостоящим и трудоемким делом.

Вот почему мы разработали платформу Twenty Over Ten не только для конечного пользователя, но и для строителя — вас! Наша интуитивно понятная CMS (система управления контентом) дает вам инструменты для автономного управления вашим сайтом, как профессионал. Он прост в использовании, удобен для пользователя и оснащен мощными функциями как для новичков, так и для экспертов!

Контрольный список перед запуском

Пункт №1 Добавить название сайта

Домашняя страница вашего веб-сайта, безусловно, является самой загруженной страницей на всем вашем веб-сайте. Поэтому очень важно, чтобы вы выбрали выдающееся название для своего нового веб-сайта. Название вашего веб-сайта будет отображаться в результатах поиска, в панелях браузера и в формах уведомлений. Мы понимаем, что придумывать название веб-сайта может быть страшно. Это первое, что увидят потенциальные клиенты, зайдя на ваш сайт.

Название вашего сайта — это ваш бренд. Четко определите цель своего веб-сайта и не торопитесь, чтобы разработать хорошо продуманное название сайта, чтобы помочь вашей фирме финансового планирования выделиться среди конкурентов. Выбор хорошего названия сайта также поможет сообщить посетителям, о чем ваш сайт и что они могут ожидать найти, попав на ваш сайт.

ДОБАВЛЕНИЕ НАЗВАНИЯ САЙТА:

Шаг 1: Получите доступ к «настройкам сайта» в нижней части боковой панели.

Шаг 2 (загрузка файла логотипа): Используйте кнопку «загрузить логотип», чтобы импортировать файл. Предпочтительны типы файлов .svg, .png или .jpeg.

Шаг 3 (Добавление логотипа): Если у вас нет определенного логотипа, используйте инструмент «Название сайта» и введите нужное имя (имейте в виду, что оно будет отображаться как ваш логотип на страницах вашего сайта).

Шаг 4: Если вы используете инструмент «название сайта», используйте инструмент «шрифт логотипа», чтобы изменить шрифт логотипа, чтобы он соответствовал желаемому бренду.

Пункт № 2 Добавить заголовки страниц

Теги заголовков отображаются в верхней части используемого вами браузера, и это важно как для пользователей, так и для SEO. Добавление и настройка заголовков ваших страниц не только даст посетителям сайта больше информации, но также может помочь поисковым системам, таким как Google, получить больше информации о страницах вашего сайта и информации, которую они содержат.

Тег заголовка веб-страницы предназначен для точного и краткого описания содержимого страницы. В приведенном ниже примере «Кливленд, Огайо | Женский финансовый консультант | Glass Financial — это тег заголовка. С точки зрения SEO теги заголовков должны быть отформатированы следующим образом: Первичное ключевое слово – Вторичное ключевое слово | Фирменное наименование . Вы можете увидеть, где находится фирма, ключевое слово, описывающее консультанта или фирму, и название компании.

НАСТРОЙКА НАЗВАНИЯ СТРАНИЦЫ:

Пункт № 3. Добавьте метаданные ко всем страницам и сообщениям блога.

Метаописания объясняют поисковым системам и пользователям, о чем ваш сайт. Включение убедительных мета-описаний на ваш сайт часто может быть определяющим фактором, если кто-то нажмет на ваш сайт или нет из SERP (страницы результатов поисковой системы), особенно если вы включаете ключевые слова, которые ищет искатель.

Клиент Twenty Over Ten, Forward Thinking Wealth Management, проделал большую работу по включению описания метаданных не только в основной тег заголовка, но и в подзаголовки.

Вот подвох и где мы видим, что большинство советников ошибаются. Метаданные необходимо добавить на каждую страницу вашего сайта. Это включает в себя главные страницы, целевые страницы и сообщения в блогах!

ДОБАВЛЕНИЕ МЕТАДАННЫХ НА ВАШИ ВЕБ-СТРАНИЦЫ:

ДОБАВЛЕНИЕ МЕТАДАННЫХ В ВАШИ СООБЩЕНИЯ В БЛОГЕ:

Шаг 1: Получите доступ к «управлению сообщениями» на боковой панели (значок A).

Шаг 2: Выберите сообщение в блоге, к которому вы хотите добавить метаданные.

Шаг 3: Прокрутите вниз, пока не дойдете до поля SEO-описания, и добавьте свой контент.

Шаг 4: Ваши метаданные должны представлять собой короткое описание из 1-2 предложений (богатое ключевыми словами) контента, появляющегося в этом конкретном сообщении блога. После того, как вы добавили контент по вашему выбору, нажмите кнопку «Сохранить».

Пункт № 4. Подключить формы

У вас есть форма на странице контактов? Важно заполнить каждое из них, чтобы убедиться, что каждое поле в форме работает правильно. Когда вы нажимаете «Отправить» или «Отправить», вы также должны убедиться, что появляется правильное подтверждение или страница благодарности. Наконец, проверьте свою электронную почту, с которой вы зарегистрировались, чтобы убедиться, что ваш запрос был успешно отправлен. Нет ничего более раздражающего для посетителей вашего сайта, чем заполнение формы, которая не работает, и, как владелец бизнеса, вы хотите убедиться, что вы тоже захватываете эти лиды!

ДОБАВЛЕНИЕ ДАННЫХ ФОРМЫ ПОДКЛЮЧЕНИЯ:

1) Переименовать поля по умолчанию

Шаг 1: Чтобы изменить имена полей по умолчанию для вашей формы, вам сначала необходимо войти в систему и открыть экран EDIT. Отсюда перейдите на страницу (страницы) с вашей формой и нажмите на содержимое страницы, чтобы активировать панель инструментов редактора:

Шаг 2: Здесь выберите значок </> на панели инструментов редактирования:

Шаг 3: Это переключит вас на то, что мы называем «Просмотр кода» содержимого вашей страницы. То, на что вы смотрите, является фактическим кодом веб-сайта для этой страницы. В этом коде найдите, где находится ваша форма, она должна выглядеть примерно так:

Шаг 4: Для каждого поля есть две области, которые вы можете изменить, чтобы настроить поля по умолчанию. Это будет текст метки и имя поля.

Итак, допустим, вы хотели изменить поле «Телефон» на «Ваш номер телефона» :

 < 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) Добавить однострочный текст

Однострочное текстовое поле полезно для сбора введенного пользователем текста для коротких ответов из 2-5 слов (например, название компании, возраст, почтовый индекс и т. д.).

Шаг 1: Чтобы добавить это, вам сначала нужно войти в систему и открыть экран EDIT. Отсюда перейдите на страницу (страницы) с вашей формой и щелкните содержимое страницы, чтобы активировать панель инструментов редактора, и щелкните значок </> , чтобы активировать «Просмотр кода».

Шаг 2: В этом коде найдите, где находится ваша форма, она должна выглядеть примерно так:

Шаг 3: Каждое поле содержится в этом коде: <div class="form-item"> ... </div> , поэтому убедитесь, что вы вставили свой код, скопированный выше, так, чтобы он располагался до или после кода другого поля. .

Шаг 4: Вы захотите изменить текст метки и имя поля этого поля, как указано в первом разделе выше.

3) Добавить многострочный текст

Многострочные текстовые поля отлично подходят для длинных вопросов.

Шаг 1: Чтобы добавить это, вам сначала нужно войти в систему и открыть экран EDIT. Отсюда перейдите на страницу (страницы) с вашей формой и щелкните содержимое страницы, чтобы активировать панель инструментов редактора, и щелкните значок </> , чтобы активировать «Просмотр кода».

Шаг 2: В этом коде найдите, где находится ваша форма, она должна выглядеть примерно так:

Шаг 3: Каждое поле содержится в этом коде: <div class="form-item"> ... </div> , поэтому убедитесь, что вы вставили свой код, скопированный выше, так, чтобы он располагался до или после кода другого поля. .

Шаг 4: Вы захотите изменить текст метки и имя поля этого поля, как указано в первом разделе выше.

4) Добавить раскрывающийся список выбора

Поля Select Dropdown отлично подходят для длинных предопределенных опций.

Шаг 1: Чтобы добавить это, вам сначала нужно войти в систему и открыть экран EDIT. Отсюда перейдите на страницу (страницы) с вашей формой и щелкните содержимое страницы, чтобы активировать панель инструментов редактора, и щелкните значок </> , чтобы активировать «Просмотр кода».

Шаг 2: В этом коде найдите, где находится ваша форма, она должна выглядеть примерно так:

Шаг 3: Каждое поле содержится в этом коде: <div class="form-item"> ... </div> , поэтому убедитесь, что вы вставили свой код, скопированный выше, так, чтобы он располагался до или после кода другого поля. .

Шаг 4: Вы захотите изменить текст метки и имя поля этого поля, как указано в первом разделе выше, но вы также захотите настроить параметры раскрывающегося списка, доступные вашим пользователям. Для этого просто добавьте/удалите из скопированного и вставленного кода следующее: <option>Option 1</option>

Вы заметите, что первый <option> настроен немного по-другому. Это необязательный параметр по умолчанию, чтобы сообщить пользователям, что делать, как указано в коде disabled="disabled" и selected="selected" . Вы также можете отредактировать текст для этой опции или полностью удалить ее.

5) Добавьте радиокнопки

Поля с переключателями — еще один отличный способ продемонстрировать варианты с одним ответом.

Шаг 1: Чтобы добавить это, вам сначала нужно войти в систему и открыть экран EDIT. Отсюда перейдите на страницу (страницы) с вашей формой и щелкните содержимое страницы, чтобы активировать панель инструментов редактора, и щелкните значок </> , чтобы активировать «Просмотр кода».

Шаг 2: В этом коде найдите, где находится ваша форма, она должна выглядеть примерно так:

Шаг 3: Каждое поле содержится в этом коде: <div class="form-item"> ... </div> , поэтому убедитесь, что вы вставили свой код, скопированный выше, так, чтобы он располагался до или после кода другого поля. :

Шаг 4. Вы захотите изменить текст метки и имя поля этого поля, как указано в первом разделе выше, но вам также потребуется настроить параметры переключателя « Значение » и « Отображаемый текст ».

Значение здесь — это то, что вы видите как: value="1" , просто измените 1 на любой текст, который вы хотите отображать в своих уведомлениях по электронной почте. Отображаемый текст — это то, что вы видите: Option 1 , который отображается прямо перед закрывающим </label> . Это текст, который пользователь увидит для этой опции, измените его на любой другой.

6) Добавить флажки

Флажки отлично подходят для вопросов с несколькими вариантами ответов.

Шаг 1: Чтобы добавить это, вам сначала нужно войти в систему и открыть экран EDIT. Отсюда перейдите на страницу (страницы) с вашей формой и щелкните содержимое страницы, чтобы активировать панель инструментов редактора, и щелкните значок </> , чтобы активировать «Просмотр кода».

Шаг 2: В этом коде найдите, где находится ваша форма, она должна выглядеть примерно так:

Шаг 4: Каждое поле содержится в этом коде: <div class="form-item"> ... </div> , поэтому убедитесь, что вы вставили свой код, скопированный выше, так, чтобы он располагался до или после кода другого поля. .

Шаг 4. Вы захотите изменить текст метки и имя поля этого поля, как указано в первом разделе выше, но вам также потребуется настроить параметры флажка « Значение » и « Отображаемый текст ». Для этого просто найдите в скопированном и вставленном коде следующее:

Значение здесь — это то, что вы видите как: value="1" , просто измените 1 на любой текст, который вы хотите отображать в своих уведомлениях по электронной почте. Отображаемый текст — это то, что вы видите: Option 1 , который отображается прямо перед закрывающим </label> . Это текст, который пользователь увидит для этой опции, измените его на любой другой.

Пункт № 5 Добавить фавикон

Фавикон (сокращение от любимого значка) — это, по сути, небольшой значок, связанный с определенным веб-сайтом. Браузеры, поддерживающие фавиконы, обычно отображают значок в адресной строке браузера, в закладках и в истории. Хорошо продуманные значки Favicon обычно соответствуют логотипу вашей фирмы или теме вашего веб-сайта. Добавление фавикона на ваш веб-сайт позволяет посетителям быстро узнать ваш веб-сайт с первого взгляда.

У клиента Twenty Over Ten, Fit Wealth Advisors, есть значок «Fit», который появляется слева при вводе имени в поисковой системе.

ДОБАВЛЕНИЕ ФАВИКОНА:

Мы рекомендуем создать фавикон размером не менее 16x16 пикселей. На платформе Twenty Over Ten добавить свой собственный фавикон очень просто. При загрузке фавикона обратите внимание, что предпочтительными являются форматы файлов PNG или ICO.

Пункт №6 Добавить аналитику

Отслеживание и мониторинг аналитики вашего веб-сайта имеет решающее значение и является основой веб-сайта, ориентированного на производительность. Google Analytics предлагает пользователям огромное количество данных и может быть легко интегрирован на ваш веб-сайт Twenty Over Ten. Если у вас нет настройки учетной записи Google Analytics, вы можете настроить ее здесь.

ДОБАВЛЕНИЕ GOOGLE ANALYTICS НА ВАШ ВЕБ-САЙТ:

Для интеграции вашей учетной записи Google Analytics с веб-сайтом Twenty Over Ten вам потребуется номер вашей учетной записи Google Analytics. Идентификатор отслеживания, предоставляемый Google Analytics, представляет собой строку букв и цифр, например UA-000000-2. Это должно быть включено в ваш код отслеживания, чтобы указать Analytics, в какой аккаунт и ресурс отправлять данные. Первый набор цифр (-000000 в приведенном выше примере) относится к номеру вашей учетной записи, а второй набор цифр (-2) относится к конкретному номеру свойства, связанному с учетной записью. Вот основные инструкции о том, где найти идентификатор отслеживания в вашей учетной записи Google Analytics.

Пункт #7 ТЕСТ ТЕСТ ТЕСТ

Мы не можем сказать этого достаточно - тестируйте, тестируйте и еще раз тестируйте! Когда ваш веб-сайт работает хорошо, это поможет вашему бизнесу расти в геометрической прогрессии. Однако без использования аналитики и тестирования вы никогда не узнаете, как работает ваш сайт и как его улучшить. Тестирование вашего веб-сайта перед запуском невероятно важно, чтобы найти любые проблемы и исправить любые ошибки, которые могут нанести вред пользовательскому опыту.

Будьте уверены, что наша команда всегда тестирует, исправляет ошибки и улучшает нашу платформу, но есть некоторые дополнительные элементы на странице, которые мы рекомендуем нашим пользователям проверять для обеспечения качества перед запуском вашего нового веб-сайта, например:

• Ссылки: мы не думаем, что есть что-то хуже, чем щелкнуть ссылку, которая никуда не ведет или ведет на совершенно нерелевантную страницу. Нажмите на каждую ссылку на вашем сайте, чтобы проверить и убедиться, что они идут туда, куда вы и хотели.
• Грамматика и правописание. Вы потратили много времени на разработку качественного контента для своего веб-сайта. Не позволяйте ему пропадать впустую, пропуская глупые ошибки. После просмотра вашего сайта в течение нескольких часов (может быть, даже недель) можно легко пропустить ошибки. Попросите коллегу или партнера взглянуть на ваш тестовый сайт перед запуском, чтобы выявить любые орфографические и грамматические ошибки.
• Посмотрите и почувствуйте: сделайте шаг назад и взгляните на свои изображения и блоки контента. Достаточно ли пустого пространства или все выглядит смазанным? Убедитесь, что интервалы адекватны, цветовая палитра отражает индивидуальность вашего бренда, а общий стиль соответствует стилю. Кроме того, убедитесь, что ваш сайт хорошо работает. Средняя продолжительность посещения веб-сайтов большинства консультационных фирм составляет чуть более одной минуты. Сохраняйте простоту и легкость навигации. Нет причин, по которым вам нужно рассказывать свое сообщение более чем на пяти страницах.