Администрирование сайта - это не просто управление контентом и техническими деталями. Это искусство поддержания сайта в оптимальном и актуальном состоянии. В данной статье мы окунемся в мир администрирования веб-ресурсов, рассмотрим его основы и тонкости, необходимые для создания и поддержания успешного сайта в современной онлайн-среде.
Кто такой администратор сайта?
В идеале, администратор сайта должен быть куратором web-проекта и обеспечивать его работу и развитие.
Что должен знать и уметь администратор сайта?
CMS
Администратор обязательно должен хорошо понимать как работает CMS сайта и уметь управлять ей. В идеале, если у администратора есть опыт работы с разными CMS и он понимает их преимущества и недостатки и знает как выбрать наиболее подходящую систему для своего проекта.
Основы HTML и CSS
Современные сайты часто требуют хотя бы минимального оформления контента, а иногда и создания условий оформления контента для разных типов устройств. Администратору не обязательно быть специалистом в верстке сайтов, но без базовых навыков сайту можно нанести вред.
Основы SEO
В задачи администратора сайта не входит продвижение сайта, но он как минимум должен знать как не навредить сайту с точки зрения SEO. Но в идеале, он может уметь провести простейшие оптимизации сайта и контента.
Базовые знания в области серверов
Администратор сайта должен знать, чем отличается shared hosting от VPS. Должен уметь работать с локальным сервером. Должен знать как создать и восстановить резервную копию. А также уметь управлять почтовыми аккаунтами, доменом.
Базовые навыки обработки изображений
Администратор сайта должен уметь подготовить изображения для сайта в правильных размерах и правильных форматах.
Управление проектом
При наличии вышеперечисленных знаний и навыков, опытный администратор, сможет составить план развития проекта, знать когда и каких подрядчиков нужно привлечь, как поставить задачи и осуществлять контроль за их выполнением.
Однако, в реальности, люди занимающиеся администрированием сайтов не имеют всех этих навыков. Есть заблуждение, что администрирование сайта - это простая и заурядная работа, не требующая никакой подготовки. Администрирование сайта часто поручают секретарям, бухгалтерам, маркетологам, а иногда и владельцы бизнеса самостоятельно занимаются этим.
Недостаток знаний и навыков администрирования может стать причиной провала продвижения сайта, потери сайта, или возникновения большого количества технических проблем.
Тем, кому приходится заниматься администрированием против собственной воли, мы можем только посочувствовать. Но если вам интересен этот вопрос и вы хотите стать хорошим специалистом, мы попробуем рассказать, чему конкретно нужно учиться и в какой последовательности.
Что изучить администратору на старте и как развиваться?
Под начальным уровнем будем понимать минимальный объем навыков, который снизит вероятность навредить проекту.
Знания в области серверов
В первую очередь, нужно научиться делать резервные копии сайта и разворачивать копию на хостинге или локальном сервере. Также, вы должны знать как закрыть вашу копию от индексации, если она размещена на публичном хостинге.
Ни один хороший разработчик никогда не работает напрямую с рабочим сайтом. Сначала все изменения делаются на копии, а потом переносятся на рабочий сайт. Это не просто традиция или ритуал. Это результат большого опыта ломания сайтов. Сайт легко сломать и трудно починить, если вы не опытный разработчик. Ваша копия - это что-то вроде черновика, на котором вы можете безопасно практиковаться. Прежде чем сделать что-то на рабочем сайте, сделайте на копии и убедитесь, что ничего не сломалось. Только после этого, повторяйте действия на рабочем сайте.
Далее нужно освоить нюансы управления хостинг-аккаунтом, доменом и почтовыми аккаунтами. Прямая обязанность администратора сайта, следить за тем, чтобы все было оплачено, чтобы сайт не превышал выделенных лимитов, а также следить за безопасностью в отношении доступа людей к этим ресурсам.
Также, стоит иметь хотя бы поверхностное понимание серверных ресурсов, на что они влияют и сколько нужно вашему сайту.
CMS
Очень трудно определить минимальный уровень владения CMS. Это сильно зависит и от самой CMS и от задач, которые перед вами стоят. Вы должны понимать что делаете. В идеале, для самого начала, нужно попросить у разработчика или предшественника, дать видео-инструкции по основным задачам с админкой.
Не экспериментируйте с настройками на рабочем сайте. Вам может казаться, что вы можете попробовать активировать настройки и если не будет желаемого результата, то переключите настройку обратно. Однако, есть настройки CMS, которые требуют определенных настроек на сервере. Если сайт с новой настройкой CMS не получит поддержку соответственных параметров сервера, то сайт перестанет работать, включая админку и вернуть настройки вы уже не сможете.
Никогда не обновляйте CMS без тестов на копии. И вообще, обновление версий не является задачей администратора, это задача разработчика. Администратору нужно только своевременно ставить разработчику такую задачу.
Наряду с изучением основных сущностей CMS вашего сайта, нужно освоить работу с текстовым редактором.
Работа с редактором
Около 80% работы администратора сайта заключается в работе с текстовым редактором.
Когда вы работаете с текстовым редактором в админке сайта, то самая большая ошибка - это относиться к этому редактору как к Word.
Когда вы работаете с Word, в подавляющем большинстве случаев, вам важно только то, как документ выглядит и не важно, как вы этого добились. Например, для создания нумерованного списка, вы можете не пользоваться специальной функцией, а создать список простым текстом. Да, это очень не удобно, но результат визуально может быть не отличим от результата использования функции списка.
При работе с редактором сайта, нужно помнить о том, что редактор формирует специальный код, который отвечает за оформление. И этот код читает поисковый робот. С помощью разметки, мы не просто указываем, как должен выглядеть контент, мы указывает поисковому роботу тип контента, расставляем акценты, и пытаемся дать понять поисковику, что наш контент более качественный, чем у конкурентов. Потому, неправильная разметка контента может привести к провалу продвижения сайта. Также, неправильная разметка может создать серьезные проблемы при редизайне сайта.
Работая с текстом в редакторе, стоит воздержаться от его оформления функциями редактора. Редактор предлагает большой набор функций оформления, но при этом правила оформления он записывает прямо у каждого оформленного тега. Такой тип записи является наиболее приоритетным и он получит приоритет над общими правилами оформления контента сайта. Так на разных страницах сайта у вас может получится текст написанный разными шрифтами, разных размеров, разного цвета и т.д.
Но самые большие проблемы начинаются тогда, когда вы захотите сменить дизайн и привести контент в порядок. Например, вы выделяли важный текст красным цветом через редактор, а при смене дизайна это оформление вам уже не подходит. Если бы оформление было задано общими правилами (через атрибут class), то оформление можно было бы заменить одной командой. Но у нас приоритетные правила оформления на каждой странице и если таких страниц тысячи, то это может стать неприятной проблемой и потребовать дополнительных затрат для решения.
Вы можете безопасно в редакторе выбирать уровень заголовка от h2 до h4 (h1, обычно уже используется в названии статьи или товара. h1 на странице может использоваться только раз), можете использовать маркированный и нумерованный список, вставлять изображения и ссылки.
Отдельно обращу внимание на выделение текста жирным и курсивом. Редактор это делает с помощью установки тегов strong и em, соответственно. Поисковый робот обращает на эти теги повышенное внимание, особенно на тег strong. Потому, важно не злоупотреблять их использованием. Не нужно таким образом выделять большие массивы текста. Так вы можете выделить ключевые слова, словосочетания или максимум короткое предложение. Для выделения большого объема текста стоит использовать css.
Рекомендую воздержаться от написания текста заглавными буквами. Поисковый робот может решить, что это аббревиатура. С помощью css можно задать тексту оформление заглавными буквами, но при этом на уровне кода, он будет написан обычным текстом.
Не допускайте использование пустых тегов. Чаще всего эта проблема возникает когда администратор хочет увеличить отступы между абзацами и нажимает несколько раз клавишу Enter. При этом, на уровне кода образуются пустые теги p. Тег p - это тег абзаца и он предполагает наличие текста в нем. Если отступы малы, то их стоит увеличить глобально через css. Если же у вас уникальная ситуация в контенте и отступ нужно увеличить только тут, то используйте перенос строки (нажмите enter+shift). Это работает так же как и в Word. Чаще всего используется, если в списке нужно написать текст с новой строки, но не в новом пункте списка.
Одной из наиболее распространенных проблем при работе с редактором, является проблема копирования форматирования текста при копировании текста из Word или других редакторов. Та же проблема будет наблюдаться при копировании контента с других сайтов, но копирование с других сайтов вообще недопустимо, если только это не какой-то генератор контента типа ChatGPT.
Так может выглядеть код абзаца текста, скопированного из Word.
<p style="margin: 0cm 0cm 11.25pt; text-align: justify; background: white; font-size: 12pt; font-family: 'Times New Roman', serif;"><span style="font-size: 10.5pt; font-family: Arial, sans-serif; color: black;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ligula vel justo bibendum facilisis. Nam luctus, neque vel fringilla blandit, nulla tellus ornare lectus, tristique dictum est mi a sem. Aliquam elementum ut metus nec dapibus. Nulla sodales massa ut facilisis vulputate. Nunc quis tempor ante. Suspendisse potenti. Suspendisse potenti.<span></p>
Тут есть и лишние элементы и много лишнего оформления, такого как отступы, выравнивание текста, фон, размер шрифта, тип шрифта, цвет шрифта. При чем, два из этих параметров дублируются с разными значениями.
Так этот текст может выглядеть на сайте
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ligula vel justo bibendum facilisis. Nam luctus, neque vel fringilla blandit, nulla tellus ornare lectus, tristique dictum est mi a sem. Aliquam elementum ut metus nec dapibus. Nulla sodales massa ut facilisis vulputate. Nunc quis tempor ante. Suspendisse potenti. Suspendisse potenti.
А вот так должен выглядеть чистый код этого абзаца.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ligula vel justo bibendum facilisis. Nam luctus, neque vel fringilla blandit, nulla tellus ornare lectus, tristique dictum est mi a sem. Aliquam elementum ut metus nec dapibus. Nulla sodales massa ut facilisis vulputate. Nunc quis tempor ante. Suspendisse potenti. Suspendisse potenti.</p>
Т.е. мы избавились от лишнего тега span и от всего форматирования, чтобы на текст распространялись общие правила оформления сайта.
При копировании текста, стоит очищать его форматирование. Но, к сожалению, такая функция есть не у всех редакторов. И даже после очистки форматирования, в коде могут остаться лишние теги.
Потому, администратору очень важно знать html и css, для того, чтобы он мог прочитать этот код и понять, что в нем лишнее. Ну и для того, чтобы знать, как правильно оформить контент.
HTML и CSS
Многие администраторы боятся кода и считают html и css являются чем-то слишком сложным. Я не буду упрощать и говорить, что это элементарные языки. Нет, там много нюансов и их можно изучать бесконечно. Но это если мы говорим о сложных применениях, необходимых верстальщику. Администратору нужно намного меньше и необходимый объем, при большом желании, можно освоить за выходные.
Однако, я не рекомендую изучать эти языки сегментировано. Вы можете найти на YouTube много обучающих курсов с хорошим объяснением и демонстрацией. Начните с того, чтобы вдумчиво посмотреть хотя бы один курс. Ваша задача понять возможности этих языков и их логику.
Критерием вашего понимания будет ваша способность сформулировать задачу. Когда вы смотрите на дизайн или представляете себе желаемый результат, вам нужно представить себе, как это сделать, какие теги и свойства применить. При этом вам даже не нужно помнить, как они называются или пишуться. Просто сформулируйте задачу на обычном языке, например: увеличить размер шрифта, окрасить текст в синий цвет, добавить подчеркивание текста. Если вы можете сформулировать задачу, то вы уже сможете найти в поисковике, как пишется тот или иной элемент.
Не старайтесь выучить сразу все теги html и свойства css. Вы будете забывать то, что не используете на практике. Потому, ознакомьтесь с языками полностью, но особое внимание только тому, что необходимо для работы.
Минимально для администратора нужен довольно ограниченный набор тегов html:
- тег абзаца
<p></p> - тег блока
<div></div> - тег строчного элемента
<span></span> - тег заголовка
<h1></h1> ... </h6> - теги списков
<ol></ol>,<ul></ul>,<li></li> - тег ссылки
<a href=""></a> - тег изображения
<img src=""/> - тег заголовка страницы
<title></title> - тег описания страницы
<meta name="description"> - универсальные атрибуты
classиstyle
для подключения css
А для более продвинутого уровня, я бы дополнил этот список следующими тегами:
- тег изображения
<picture></picture>
для того, чтобы выводить разные изображения на разных разрешениях экрана (ускорение загрузки страницы на мобильных устройствах) - тег интеграции
<iframe></iframe>
для отображения на сайте контента других ресурсов (видео YouTube, карты Google и т.д.)
Язык css обширнее, чем html, но для базовых задач, объем необходимых свойств также будет скромным:
- размер шрифта -
font-size - толщина шрифта -
font-weight - цвет шрифта -
color - текст заглавными буквами -
text-transform: uppercase; - подчеркивание текста -
text-decoration: underline; - фон -
background
На втором этапе нужно освоить оформление блоков, а для этого нужно изучить следующие свойства:
- внешний отступ -
margin - внутренний отступ -
padding - ширина -
width - высота -
height - рамка -
border - скругление углов блока -
border-radius
Перечисленных выше элементов будет достаточно для самого разнопланового оформления текста. Однако, современные тенденции дизайна сайтов предполагают и более сложные методы оформления контента. Иногда контент важно разместить в блоках и эти блоки как-то расположить по отношению друг к другу, и это положение может меняться на устройствах с разным разрешением экрана. Например, такой вариант.
Для того, чтобы вы могли делать подобное оформление, вам нужно освоить две темы: Grid Layout и Flexbox. Это сложные и обширные темы, но вам будет достаточно поверхностное их изучение. Также, для того, чтобы задавать разные правила для разных разрешений экрана, вам понадобится изучить media queries.
Если вы освоите все это, то будете в числе лучших администраторов сайтов, но не останавливайтесь на достигнутом и старайтесь изучать и применять html и css более широко.
Основы SEO
Администрирование сайта предполагает и базовую поисковую оптимизацию. Это важная тема, которую никак нельзя пропустить.
Все, что необходимо знать администратору о SEO, изложено в документе Google “Введение в поисковую оптимизацию”.
Как получить все эти знания?
Вы можете пройти обучающие курсы. Хотя, я не встречал целевого курса администратора сайта. Потому, вероятно, придется пройти несколько разных курсов.
Вы можете изучить все самостоятельно. В сети есть вся необходимая информация в большом количестве в общем доступе и в доступном виде.
Или же вы можете комбинировать эти два варианта, если найдете ментора, который сможет вас направить, помочь подобрать материалы и дать необходимые ключи к пониманию.