Что значит верстка текста

Как сверстать веб-страницу. Часть 1

Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.

Часть 1. Верстка стандартными средствами

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

Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.

Структура файлов

Первым шагом давайте создадим простую структуру файлов для наших файлов.

Предварительный осмотр

После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:

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

Общие изображения

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

Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png

В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png

Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png

Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png

Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.

Основные стили

И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.

На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега.

Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.

Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.

Прописываем все эти стили в styles.css:

В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».

Каркас HTML

И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:

Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.

Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет.

Макет

В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).

Опишем это в теге body:

Wrapper используется для объединения блоков и их выравнивания по центру страницы.

Затем укажем стили блоков:

Логотип

Вставляем логотип в тег header:

Дополнительных стилей не требуется.

Поиск

Вставляем форму поиска в тег header:

И стили выравнивания по правому краю для нее:

Для отображения меню необходимо создать список со ссылками внутри тега nav:

CSS стили для него будут следующие:

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

Заголовок страницы

Заголовок страницы помещается в div с идентификатором heading

Заголовок имеет следующие стили:

Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.

Колонки

Для того, чтобы создать колонки страницы нужно прописать следующие стили:

Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.

Подменю

Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:

И применяем к подменю следующие стили:

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

Контент сайдбара

В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.

В html это выглядит так:

В стилях укажем шрифты, цвета и отступы:

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

Цитата

Вёрстку контента начнём с добавления цитаты.

Добавим код цитаты в раздел section

И применим для него стили:

Здесь нет ничего нового, так же — шрифты, фоны и отступы.

Контент

Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после

Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью тега :

, которому зададим следующие стили:

Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.

Блок «Our team»

При верстке этого блока добавим сначала заголовок:

А затем два блока-строки с карточками сотрудников

Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:

Здесь мы задали шрифт и отступ для подписи, размер и цвет должности, добавили верхний отступ для карточек и указали, что для всех карточек в строке, кроме первой, должен быть отступ слева.

Футер

Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.

Для начала создадим контейнер футера с этим блоками:

И применим к нему оформление:

Контейнер с находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.

Лента Твиттера

Верстаем содержимое ленты Твиттера:

Из интересных моментов здесь следующее: подчеркивание у заголовка мы сделали через нижнюю границу, а сам блок твиттера, как и последующие блоки выровняем по левому краю и задаём ширину.

Карта сайта

Карта сайта представляет собой два блока со ссылками:

Ссылкам задаем цвет и оставляем подчеркивание только для наведённых.
Колонки со ссылками делаем через инлайновые блоки и затем свойством #sitemap div + div отодвигаем вторую колонку от первой.

Социальные ссылки

Вставляем набор ссылок в контейнер

Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.

Копирайт

Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.

Стили делают аналогично предыдущим блокам с той лишь разницей, что блок прибивается к правому краю и выравнивание внутри него так же по правому краю:

На этом наши работы закончены. Готовый проект можно скачать здесь.

Источник

Чек-лист вёрстки

Это статья — список полезных мелочей. Весь текст поделен на две части. Первая рассказывает про простые элементы (текст, кнопки, изображения, формы и другие), вторая часть про производительность, масштабируемость, безопасность и доступность.

Часть 1

Текст

Размер шрифта и интерлиньяж

Оптимальная высота строки ( line-height ) 1.4 — 1.8 от размера шрифта. Это значение лучше указывать множителями, а не конкретными значениями в пикселях. Так оно будет масштабироваться относительно любого размера шрифта.

Длина строки

Длина строки влияет на интерлиньяж. На телефонах line-height должен быть меньше, чем на большом мониторе. Существует интересный адаптивный подход (css-шлюзы), который плавно подстраивает размер шрифта и интерлиньяж под экран.

Ограничение длинных слов

Текст в строке может оказаться непредвиденно большим, в этом случае его можно ограничить с помощью text-overflow.

Выравнивание по ширине

Типограф

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

Все эти проблемы можно решить с помощью онлайн типографов, плагинов и предустановленных расширений на компьютер.

Продвинутые методы работы с типографикой

Обратная связь (наведение, клик, скролл)

Блоки

Удобный интерфейс откликается на каждое действие, будь то наведение мыши или клик. Нестандартному кликабельному элементу в некоторых случаях можно добавить:

Предусмотреть спиннер, если состояние элемента зависит от асинхронного события

Область клика

Чем больше и ближе объект, тем легче на него кликнуть. Существует даже математическое правило, которое это описывает. Например, в поисковой выдаче Google ссылкой является не только номер страницы, но и часть логотипа. Это спасает от случайных промахов.

Не накладывайте поверх кликабельных элементов другие элементы, например, иконку лупы над инпутом. В крайнем случае добавьте иконке pointer-events или решите это более поддерживаемым способом (в случае с лупой, добавьте её через background-image ).

Правильный формат ссылки

Скролл на айфоне

Инпуты

Тег form

Чтобы форма работала в любых браузерах, даже без js, нужно использовать тег form по назначению. Форму можно улучшать очень долго, вплоть до отправки данных даже в офлайне.

Типы

Разные значения аттрибута type (email, number, password и другие) включают правильную клавиатуру на телефонах и помогают валидировать данные

Автофокус

Изображение

picture и srcset

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

Таблица

Адаптивность

Таблица изначально не предусмотрена под ширину экрана телефона. Есть несколько вариантов, как изменять таблицу под небольшие экраны

Сделать таблицу удобной не просто. Советую почитать статьи про отображение больших таблиц и переверстку.

Компоненты

Теория близости

Объекты, расположенные близко друг к другу, воспринимаются связанно. Если поставить заголовок посредине нескольких статей, будет сложно разобраться, к какому из текстов относится заголовок. Кстати, на Хабре именно такая ошибка. Заголовок параграфа должен быть ближе к своему параграфу, а не быть равноудален от всех. Существует масса других примеров с ошибкой в теории близости.

Пустой блок

Бывает, что баннерная реклама не приходит в баннерную позицию, тогда остается большой непонятный пробел. Чтобы его убрать, достаточно использовать псевдокласс :empty :

Почти, но не совсем

Верстка (в плане дизайна) приятного сайта не разваливается на ходу. Элементы ровно выровнены, размеры хорошо подобраны. Посмотрите статью «Почти, но не совсем», она поможет взглянуть на любой сайт свежим взглядом.

Часть 2

Маштабируемость

Поддерживаемость

Несколько простых практик:

Архитектура

Важное условия для масштабирования кода — единообразие. Посторонний разработчик должен как можно быстрее вникнуть в код и продолжить его писать в том же стиле. Существуют множество методологий наименований селекторов, в том числе БЭМ.

Хорошим примером единообразия является бутстрап. Даже незнакомый с проектом разработчик легко продолжит писать код. Ему не нужно будет вникать, он скорее всего уже все знает. Важно с самого начала определиться со стайл гайдом проекта и писать в одном стиле.

Типовая страница

Если проект довольно крупный, попросите дизайнера собрать все основные компоненты в отдельный типовой лист. Страницы можно будет собирать из готовых элементов как конструктор. Такие типовые листы могут перерасти в целые гайды и библиотеки компонентов. Это отличный подход для крупных компаний. Примеры:

Производительность

Селекторы

Вторая проблема селекторов — неиспользуемые селекторы. Селектор для поиска неиспользованного элемента обходит все дерево и ничего не находит. Время тратится впустую.

Анимации

Тяжелые свойства

Не стоит использовать большие радиусы, лишний ресайзинг картинок ( background-size ) и сложные тени. Браузеру придется делать огромное количество перерасчетов. Например, Airbnb увеличила производительность скролла просто убрав размытие теней.

Скорость загрузки

Сжать стили

Конкатенируйте, минифицируйте и кешируйте файлы стилей.

Критичные стили

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

Префетчинг

Браузер можно предупредить об использовании на странице ресурсов с другого адреса. Тогда браузер заранее преобразует URL этих ресурсов в IP и не будет тратить время на поиск DNS.

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

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

Безопасность

Target

Страница, открытая через target=»_blank», получает частичный контроль над открывшей её страницей через js свойство window.opener. Эту уловку можно использовать, чтобы перевести пользователя на фишинговую страницу. Чтобы избежать уязвимости, добавляйте к ссылкам с target=»_blank» атрибут rel=»noopener noreferrer».

Семантика

Верстка

ARIA и роли

Источник

Верстка текста для статьи! Html теги, оформление на примерах из моего блога

Вот именно для наглядного представления и даже возможности скопировать/поэкспериментировать, я и приведу здесь наиболее характерные и показательные тэги, основываясь на опубликованных на моем блоге статьях.

Также в конце статьи немного остановлюсь на самых характерных ошибках, которые нахожу в присылаемых вами публикациях.

Коротко о тэгах

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

Вообще “тэги”, это специальные команды, позволяющие разметить с помощью html-кода веб-страницу или, например, создать метки на основе ключей для улучшения навигации по сайту, ну и так далее.

Говоря по простому и применительно к нашему случаю, тэги это специальные команды, которые позволяют браузеру отобразить вашу статью в том виде, в каком вы ее оформляете.

1) в данном случае мы имеем в редакторе заголовок “ИНТЕРЬЕР САНАТОРИЯ” в открывающем и закрывающем его тэге и последующий за ним абзац текста в тэге

(по треугольным скобкам машина определяет, что это тэг):

Выглядит эта абракадабра в опубликованной статье так:

2) ну а здесь заключаем текст в элемент оформления “цитата” тэгом

, плюс к этому еще и включаем в него ссылку на одну из опубликованных ранее статей:

Верстка статей

Все это очень подробно, с примерами описывает в своих видео Владимир Белев в шаге № 12 тренинга и в последующих шагах.

Отлично, с первой статьей вас, коллеги!

Поскольку в тренинге я по ряду причин позиционируюсь как “активист” (со школы это слово не люблю), меня довольно часто в чате ВК нашей группы просят прислать тэги конкретных примеров оформления из моих опубликованных статей.

Подобный продвинутый движок, доступный пока только участникам тренинга, позволяет нам не отвлекаться от основной задачи: написания контента.

Необходимость их ввода “вручную” просто отпадет благодаря тем инструментам, которые будут в графический редактор встроены. И в этом редакторе блога мы сразу будем видеть текст так, как он будет отображаться на блоге!

С его выходом данная статья, как и html-редактор вроде бы потеряют актуальность, но… Учитывая свой прошлый опыт и рекомендации коучей, хочу сказать: учитесь, учитесь работать с тэгами, ибо всякое бывает!

Поэтому знание тэгов и опыт работы с ними нам, блогерам, совершенно необходим!

Вижу, вы уже зеваете, поэтому перейду наконец к конкретным примерам!

Конкретные примеры

Дублировать Владимира Белева и объяснять, как пользоваться Типографикой и какой тэг что означает, я не буду. Надеюсь, понимание что и как делается при верстке у вас уже есть.

Рисунки

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

Тут же посетили и 3Д тур по как самому санаторию, так и по некоторым номерам. Ничесе! Красочные ландшафты и явно не любительские обзоры обещали манящий отдых и разнообразное лечение.

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

Здесь хочу обратить ваше внимание на тэг

вставляющий «пустой» абзац, что может пригодиться, если например рисунок налезает на нижележащую рамку. Тогда пустой абзац между ними поможет им разбежаться.

от Главного корпуса уже небыло видно этих зданий.

Выглядел Главный корпус точь в точь так, как на фотографиях: огромный, необычный,

укладывать на пол плитки мраморные…

Необычные работы палехских мастеров и живописцев по стенам, большое количество раритетов и образцов народных промыслов было расставлено в по стеллажам и витринам (часть этих работ можно было здесь же и приобрести). Конечно, я просто обязан показать вам это на фотках?

На редкость ВЕЖЛИВАЯ администраторша тут же оформила нам документы и проводила

Здесь приметьте: во втором ряду рисунки выровнены по высоте height=»125″

Позже заснял я и двухкомнатный номер (с

Пример №5 (последний)

фойе. Шампуры с решеткой получил напрокат в этом же магазине.

Цветы, чрезвычайно ухоженные, сечас же привлекли внимание моей Татьяны

На этом закончим наконец с рисунками и перейдем к шрифту.

Шрифт

Моему блогу предстоит скоро пройти общую модерацию, в результате которой все оформление статей будет приведено к одному знаменателю.

Теперь мы получим двойное рабочее окно, подтвердив на своей почте регистрацию. В этик окнах будем получать прямоугольные капчи квадратиками и кликать по ним мышкой. Средняя цена капчи тут 5,5 копеек. Работать преимущественно и будем в этом окне.

1. рекомендовать капчу не могу, как настоящий и реальный способ заработка;

2. Однако, если вы своего дела в интернете еще не нашли, могу рекомендовать для начала взяться за капчу.

Ну и достаточно со шрифтом, кому мало, напишите, добавлю.

Рамки, цитаты, сноски, ссылки

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

А вот тут будет не так! А здесь хочу как вот тут! (совал мне под нос фотки)!

Цитата, как цитата, не стал бы я ее приводить, но скажу вот о чем: вставляемые в текст цитаты, анекдоты, пословицы и тому подобные заимствования совершенно портят уникальность статьи. А она должна быть 100%!

? Первый: перефразировать цитату. В статье “Как нас развели на косметике DeSheli” я использую массу цитат, но все они перефразированы!

? Второй: оформлять это дело в виде рисунков, например:

? Третий вариант: создавать РИСУНКИ в виде обычных для вашего блога цитат. У меня есть несколько таких штук в разных статьях, например:

Да-да, это рисунок цитаты. Посмотрите на него в статье “О технарях и гуманитариях”, наведите на него курсор, вместо текстового он останется указывающим.

Не надо мучиться с Фотошопом и Paint, просто наберите эту цитату в черновике и при просмотре на блоге сделайте ее скрин, а затем вставьте в статью, как рисунок.

Не удивляйтесь смайлику. Эта непримечательная картинка при проверке на уникальность дала многомиллиардное совпадение с. «КАЗИНО»! Не знаю почему, но про уникальность картинок мы еще поговорим ниже.

Ну и приведу еще яркую рамку, захватив ссылку на мою же статью “О себе”.

Об этом я писал в “О себе”. Просто не помню уже, когда я в такой задрипаной квартире жил в последний раз.

Пример №10/1 (внесен 26.11.18)

Ягодное и грибное изобилие было (и есть) невероятным. Зато зимы тут суровые, снежные. А уж как катались мы с горок, благо здесь их создала сама природа превеликое множество!

На самодельных санях, сколоченных из фанеры, по двое, с поросячьим визгом неслись по заснеженным лесным склонам, с трудом уворачиваясь от вековых пихт и елей.

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

Что же, с примерами я пожалуй закончу.

Распространенные ошибки при оформлении статей

Напоследок скажу еще о самых частых ошибках, на которые мне приходится указывать в присылаемых статьях.

Анонс это не начало статьи! Он должен кратко и сочно отражать суть вашей статьи и заинтересовывать. При этом он должен быть уникальным по отношению к тексту самой статьи, то есть анонс не нужно дублировать, как первый абзац в статье. Его размер 350 символов с пробелами (+/- 10).

Всего в статье должно быть не меньше трех заголовков h2. Их может быть и больше, если хотите, но отделенных друг от друга как минимум тремя абзацами. Заголовки h3 (если они есть) должны стоять ПОСЛЕ заголовков h2, и так далее.

При этом заголовок статьи h1 считается первым заголовком, поэтому после тизера должно быть минимум три абзаца, лишь затем идет заголовок h2 к общей части, затем к заключению. Заголовок h1 в статье должен быть только один!

После заголовка не должны сразу идти подзаголовки или выделенные элементы текста (например, жирным шрифтом), между ними нужен минимум один абзац текста. Точки в конце заголовков НЕ СТАВЯТСЯ! ☝

(Внесено 26.11.18) А вот этот пример меня заставила внести моя совесть. Недавно встретилась мне статья, где автор выделяет текст не жирным, а как ЗАГОЛОВОК (т.е. тэгом h)! И вспомнилось вдруг, что и сам я этим грешен, не моя ли статья послужила примером?! (Вот я негодяй, сам косячу и других с панталыку сбиваю. )

Речь идет о странице «Контакты» на моем блоге. В ней я не только развлекся с цветом, курсивом и жирностью (говорю же, негодяй!), но и умудрился трижды выделить текст как заголовок. Дело то было еще в кейсе.

Делать этого категорически нельзя, звездюлей я получил, но исправить руки не дошли пока (как всегда). Вот короткая выдержка из наставлений сенсея по этому поводу:

В общем, не любят машины, когда выпендриваются. Нравится им, когда все «правильно» и «по полочкам»! Ну и ладно. Поговорим теперь об абзацах.

Не бойтесь, что статьят получиться слишком длинной, для того и даны нам в Типографике элементы оформления, чтобы разнообразить текст. Плюс картинки, которые вставляются по смыслу.

Можно разумно использовать по тексту эмодзи (Emoji), то есть смайлики и другие миникартинки, также расставленные по смыслу.

Ссылки! Используемые в статье ссылки вставляются гиперссылками в словосочетания или слова, то есть не вставляются в текст в полном виде “как есть”, с ttps://.

Не бегите впереди паровоза! А то будете потом руками всплескивать: почему, мол, ГуглАдсенс мой блог не модерирует?! А может потому и не модерирует, что ваши коммерческие анкоры на молодом блоге ему не внушают доверия. Идите по шагам тренинга планомерно и будет вам удача в делах и счастье в жизни!

О ключах говорить не буду, сам пока не специалист. По тренингу все это пройдем. Приведу только примеры того, как я хотел назвать статьи, и как они стали выглядеть после корректировки Гуру Сенсеевичами.

Присматривайтесь ко всему: тизерам, анонсам, оформлению, содержанию.

Сделать это можно в сервисе “Картинки” Гугла, просто перетащив в него свою картинку. При этом выявленных совпадений должно быть не более четырех!

Самым же оптимальным размером у seo-шников (если вы не фотограф, презентующий свои работы, или это не подробные карты местности, где важна супер четкость) считается 0,3Мб.

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

Такое может случиться, если расширение у картинок прописано большими буквами (например: 1.JPG вместо 1.jpg). Попробуйте прописать расширение маленькими буквами.

Вторая возможная причина: если страница ещё не до конца загрузилась и в это время попытаться открыть картинку в полный размер, то она также откроется неправильно.

Уникальность текста: ее надо проверять ДО выкладки статьи на блог, при этом она должна составлять 100% (но не менее 95% в особо тяжелых случаях).

Это также может стать причиной того, что ваши статьи не будут индексироваться машинами (или еще чего похуже), да и Адсенсу это может не понравится (хотя точных алгоритмов его “одобрям” не знает никто).

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

В Word-е статьи не набираю, хотя он мне более привычен, а к ГуглДиску приходилось приспосабливаться. Но это была одна из первых рекомендаций сенсеев кейса, вроде там при копировании текста из Word-а в редактор косяки случаются. Так и вошло в привычку.

Кроме Word-а использую один из онлайн-сервисов. Сервисов таких много и каждый пользуется тем, к которому привык. Мой называется Text.ru и кроме орфографии позволяет проверить уникальность текста, посмотреть проблематичные куски и понять, с чем они конкретно совпадают.

Заодно посмотреть количество символов с пробелами и без, подобрать синонимы (актуально при исправлении уникальности).

На этот ресурс ссылаются в тренинге, меня он вполне устраивает, поэтому можете считать это моей личной рекомендацией.

Естественно, лучше на нем зарегистрироваться, это обычное дело для таких ресурсов, но позволит вам не ждать в длинной очереди, поскольку сайт популярный.

Немного о тренинге “Одна Семья”

Теперь скажу пару слов о бесплатности Проекта “Одна Семья”. По этому поводу также задают вопросы, хотя в группе в ВК, в разделе “Обсуждения” есть подробнейшая раскладка по этому поводу и в чате все это не один раз обсуждено (не читают, что ли?!)

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

Всего этого добра в инете хватает, но хватает и желающих завести свое дело, поэтому стоит все это офигеть как дорого, да и покупки не всегда качественные.

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

Ну вот, теперь точно закончил!

Эх, обещал же, что маленькая статья будет, так нет, на 23 страницы наворотил… Честно, планировал в пять уложиться, только тэги прописать! Понесло опять Остапа… Уж простите старого сварщика, надеюсь вам не очень скучно было!

Для тех же, кто не знаком еще с проектом “Одна семья”, загляните на нашу страничку и почитайте, чем живет тренинг в ВК, кто каких результатов добился и кто что обо всем этом думает. Не беспокойтесь, тренинг действительно бесплатный и заманухи тут нет.

Понравилась статья? Поделись!

57 комментариев

Автор: Лариса

Роберт прочитала, но и половины не поняла)) Для меня это оказывается так далеко.

Автор: Семён

Здравствуйте, Роберт, очень полезная и нужная статья дня нас, которая и ещё очень легко читается. Только вот до сих пор не могу понять, как делаются такие смайлики(эмодзи) как у вас в статьях? То есть если просто поставить ;), то в смайлик-картинку они не превращаются. Получается у вас это как маленькие картинки? Заранее спасибо за ответ и удачи!)

Спасибо, Роберт, за статью. Она для меня как «настольная книга», для постоянного пользования. Спасибо Успехов и удачи!

Екатерина, рад, что пригодилась заметка, правда надо ее доработать уже. Успешного вам блогерства!

Автор: Татьяна

Роберт, да вы просто молодец! Применяете хороший стиль написания статей, мне было интересно читать. Кое-что возьму на вооружение. Удачи вам!

Татьяна, да у вас и самой статьи замечательные, успеха вам в блоговедении!

Автор: Татьяна

Источник