Как правильно писать теги Title, Description и атрибуты Alt и Title. Правильный заголовок страницы, SEO title

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

Статья вышла большая, но оно того стоит, уж поверь.

Какой элемент сео оптимизации страницы имеет наибольшее значение?! Думаю, что ты без труда ответишь на этот вопрос правильно – конечно же тайтл страницы!

Ок, согласен, но как правильно его оптимизировать?

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

А еще?

Ну… Надо писать заголовок страницы короче 70-80-90 символов, так ведь?!

Надо делать этот тег читаемым и для людей?!

Надо соблюдать определенную плотность и тошнотность?!

Тайтл должен быть уникален?!

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

Это прописная истина, но скажу тебе по секрету - большинство так и не могут правильно разместить ГЛАВНЫЙ ключ в ПРАВИЛЬНОЙ форме в самом начале Тайтла и это не паранойя, а статистика…

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

Давай начнем с самого начала, а именно использования главного ключа в самом начале тайтла.

Главный ключ

Думаешь все тут однозначно и просто? - а вот и нет…

Что такое главный ключ?

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

О чем я тут вообще говорю?

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

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

Можно ли считать главным запросом для этого кластера самый частотный запрос, то есть «запрос 1»? В принципе можно, но намного эффективней будет сделать главным запрос, который имеет не самую высокую частотность, зато намного более высокую позицию, ведь куда проще и эффективней сдвинуть запрос с 18-го места в ТОП 3, чем двигать запрос из ниоткуда.

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

Конкурентность запроса

Итак, теперь мы определились с тем, что главный запрос для страницы это далеко не всегда наиболее частотный запрос. Еще одним фактором тут может стать анализ конкурентности, особенно для молодых сайтов! Нет смысла оптимизировать молодой сайт под самые конкурентные запросы и ставить их на первое место в тайтл, это просто не имеет смысла! Ведь все-равно из этого ничего толкового не выйдет и запрос даже и через год не выйдет в ТОП без применения серых и черных техник (об этих техниках возможно поговорим в одной из следующих статей).

То есть нет никакого смысла тратить самое ценное место текстовой оптимизации, а именно первое место тайтла для запроса, который все-равно не выйдет в ТОП.

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

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

Аналогия идеальна для молодых сайтов, которые главным запросом для кластера выбирают основной ВЧ, потратив на него самое ценное место в Title.

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

Хорошо, с термином главный запрос мы разобрались, но уверен ли ты, что точно знаешь правильную форму запроса.

Правильная форма запроса

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

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

Давайте разберем пару интересных примеров, тебе понравится:

Есть запрос - «мягкий медведь игрушка»

Какая у него правильная форма?

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

Ну а вот реальная частотность запросов с учетом порядка слов:

Как тебе такие метаморфозы?!

Но и это еще не все

Знал ли ты, что в зависимости от порядка слов может меняться коммерческость запроса и даже его интент?!

Возьмем тот же самый пример:

Коммерческость правильной формы, как видишь, самая высокая.

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

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

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

Определить правильную форму предельно просто – достаточно вбить в вордстат интересующий запрос в кавычках:

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

Как составить Title

  1. Коммерческие слова (купить, цена и т.д.) повторяем не более одного раза
  2. Обычные слова повторяем не более двух раз
  3. Главный ключ в правильной форме строго в начале тайтла
  4. Строго никаких символов, бьющих пассажи (точка, восклицательный и вопросительный знаки, точка с запятой)
  5. Можно использовать запятые, но если можно без них, то лучше так
  6. Длина не ограничена ни какими символами
  7. Опционально - короче 12 слов (важно лишь для Гугл)
  8. Не забываем, что чем больше слов в тайтл, тем меньше вес каждого из слов, так что не надо тут поэм писать
  9. Уникальность тайтла в рамках сайта
  10. Уникальность тайтла в рамках индексной базы Яндекс. Банально добавляем в конец название компании

Поджарим утку

Ну а теперь пристрелим пару уток, с которыми я сражаюсь с незапамятных времен:

  1. Ограничение длины

Длина тайтла 60-70-80-90 cимволов – бред, бред и еще раз бред! Есть всего одна рекомендация и то не более, чем рекомендация – длина Тайтла короче 12 слов. Все! Не верите – смотрите тайтлы сайтов–лидеров.

  1. Писать тайтлы исключительно для людей

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

Главные принципы

Итак, если все-таки выделить самые главные принципы, влияющие на правильную подготовку тайтла, то я бы выделил следующие:

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

Другие интересные статьи ты найдешь в моем паблике ВК

Тег Title – это заголовок html-документа. Title почти всегда используется в результатах поисковых систем. На данный момент, он очень важен для классического SEO и для привлечения внимания в социальных сетях.

Основное предназначения тега Title, это точное и краткое описание содержания контента страницы.

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

Оптимальная структура тега title

Главная ключевая фраза – второстепенная ключевая фраза | Название бренда

Оптимальная длина для поисковых систем

Google обычно отображает первые 50-60 символов или столько символов, сколько поместится в 512 пикселей. Если все ваши заголовки будут 55 символов, то вы можете ожидать, что около 95% страниц будут полностью отображаться.

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

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

Почему так важен тег title?

Title уже давно считается одним из важнейших факторов среди внутренних факторов ранжирования (важнейший: контент страницы) и он появляется в 3-х местах:

1. Браузер. Отображается в верхней части вашего браузера + в закладках.

2. На страницах результата поиска. При использовании ключевых слов в title, поисковые системы будут выделять их в результатах поиска, если пользователь выполнил запрос с этими ключевыми словами. Это дает пользователю больше доводов нажать именно на вашу ссылку.

3. На внешних сайтах . Многие внешние сайты, особенно социальных сети, будут использовать title, как анкор ссылки на вашу страницу.

Например, так это выглядит в Facebook:

А теперь разберемся в том, как же лучше оптимизировать и прописать title на вашем сайте.

Как правильно оптимизировать title

  • Всегда помните про длину

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

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

  • Размещайте основные ключевые слова в начале

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

  • Усиление Брендом

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

  • Читаемость и эмоциональное воздействие

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

Инструменты, которые могут помочь с оптимизацией title

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

В итоге можно посмотреть как выглядит title в результатах поиска:

В заключение

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

Тег title и мета-теги description и keywords - играют исключительную роль в раскрутке сайта. От их правильного составления во многом зависит положение страницы в поисковой выдаче. Элементы title, description и keywords должны обязательно присутствовать на каждой странице сайта и содержать ключевые фразы:

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

Т ег Title

От того, насколько привлекательно в глазах пользователя выглядит заголовок (это содержимое title) и страницы в результатах поисковой выдачи, зависит их выбор в её пользу. Даже, если ваш сайт будет находиться в поисковой выдаче, скажем, на 7-ом месте, то переходов на него может быть больше, чем на сайт, занимающий 4-ое место. Особенно, если у него заголовок и сниппет привлекательные, т.е. составлены правильно.

Пример поисковой выдачи в Google:

Для того чтобы правильно составить title - это название страницы, нужно определиться с двумя вопросами: сколько может быть вхождений ключевых фраз и его длиной - общим количеством символов в теге. Для «рядовых» страниц рекомендуемое количество - одна ключевая фраза . Для главных страниц разделов и index-страницы возможно 2-3 вхождения ключевых словосочетаний.

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

Максимальная длина заголовка, которую я обнаружил у Google - 59 символов с пробелами. Теперь обратимся к результатам выдачи Яндекса:

Аналогичный заголовок в результатах поиска Яндекса составил 55 символов - остальные слова тега title в него не попали. Но обратите внимание, основное ключевое словосочетание состоит из заглавных букв. Если буквы будут строчные, то количество символов в заголовках результатов выдачи увеличивается. Смотрим на следующий скриншот:

Результат 5-ой позиции в выдаче - 68 символов (это максимум). Делаем вывод: длина title может составлять около 60-65 символов с пробелами, самое важное должно располагаться ближе к началу и, желательно, не превышать 55 символов.

Внимание: не следует помещать в title, а также в keywords, слова, которых нет на странице.

М ета-тег Description

Содержание сниппета поисковики составляют из description или выбирают фрагмент текста из страницы. Мета-тег description дает краткое описание веб-страницы. Целесообразно тщательнее отнестись к его составлению, даже если он не будет использован каким-то поисковиком для создания сниппета. Рекомендуемая длина 150-200 символов с пробелами (максимальный сниппет Яндекса - 182, у Google - 140).

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

Мета-тег Keywords

Что же касается мета-тега keywords - это набор ключевых слов страницы, то его - основные поисковые системы не учитывают. Однако пренебрегать его составлением не следует. Алгоритмы поисковых систем время от времени меняются, возможно «завтра» мета-тег keywords будет снова важным звеном в поисковой оптимизации.

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

Грамотное составление тега – это одна из важнейших основ успешного продвижения страницы сайта. Существует набор требований, по которым необходимо составлять тег <title> для продвигаемой страницы.</p> <p>Конечно, одного лишь отлично составленного <title> будет не достаточно для продвижения страницы по некоторым <a href="/nizkochastotnoe-prodvizhenie-uvelichivaet-trafik-kak-podobrat/">низкочастотным запросам</a>, не говоря уже о среднечастотных и высокочастотных ключевых словах. Но без этого тега любое продвижение будет бесполезным.</p> <h2>1. Что такое тег <title>... и для чего он нужен

HTML тег ... - является одним из заголовочных тегов , который располагается вверху страницы между тегами ... . На языке оптимизаторов его часто называют "тайтл". Он не является обязательным, но если Вы хотите, чтобы сайт занял достойные позиции в поисковых системах, то его обязательно нужно использовать, причем учитывая множество нюансов (о них чуть ниже).

Синтаксис html тега ...
<span>Название страницы </span> Контент страницы

Тег составляется исходя из текста на конкретной странице. Статья, которая размещена на странице должна иметь вхождение ключевых слов и словосочетаний в тексте из тайтла. Причем вовсе необязательно большое число вхождение ключевых слов, достаточно и одного. В этом случае, <title> будет очень положительно влиять на позиции этой страницы.</p> <p>Например, если у нас тема статьи "Как выбрать лыжи для конькового хода", то логично, чтобы тайтл был примерно таким:</p> <blockquote><head > <title ><span>Как выбрать лыжи для конькового хода - 5 советов от опытных лыжников </span>

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

Чтобы грамотно подбирать эти дополнительные ключи читайте:

2. Как выглядит в выдаче</h2> <p>В выдаче именно "тайтл" выводится в качестве названия страницы. Например:</p> <p>Этот тег пользователи видят в первую очередь, которые ввели поисковый запрос. Поэтому помимо важности тег <title> для SEO-оптимизации, еще и для пользователя он очень важен. Ведь на основание его пользователь принимает решение о переходе на сайт или нет.</p> <h2>3. Ссылки из социальных сетей содержат <title></h2> <p><img src='https://i2.wp.com/zarabotat-na-sajte.ru/seo/img/title-v-socsetyah1.jpg' width="100%" loading=lazy></p> <p>Или сокращенный вариант без изображения в ВК</p> <p><img src='https://i1.wp.com/zarabotat-na-sajte.ru/seo/img/title-v-socsetyah2.jpg' width="100%" loading=lazy></p> <p><img src='https://i0.wp.com/zarabotat-na-sajte.ru/seo/img/title-v-socsetyah3.jpg' width="100%" loading=lazy></p> <b>Входящие ссылки и title </b> <p>Входящие ссылки на продвигаемую страницу, как правило, должны содержать слова из тега <a href="/podrobnoe-posobie-po-ispolzovaniyu-tega-title-teg-title-nazvanie/">title страницы</a> акцептора . Причем, часть входящих ссылок должна иметь прямое вхождение, часть ссылок – частичное, часть ссылок должна вмещать в своем анкоре словоформы синонимы и так далее. Это нужно, чтобы продвижение происходило по одним запросам.</p> <h2>4. Как правильно составить тег <title></h2> <h3>4.1. Уникальность <title> внутри сайта</h3> <p>Все страницы на одном сайте должны иметь различный Title. Уникальный <title> - залог вашего успеха в выдаче всех поисковых систем. Это настолько важно, что можно приравнять это к уникальности контента на странице. Я хочу подчеркнуть, что уникальность я подразумеваю в пределах одного сайта.</p> <p>Если не соблюдать правило уникальности, то это будет крайне негативно сказывать на продвижении сайта по <a href="/primery-sql-zaprosov-k-baze-dannyh-mysql-kak-sostavlyat-sql-zaprosy---podrobnye/">данному запросу</a>, поскольку это автоматически создаст дубли страниц на сайте .</p> <h3>4.2. <title> должен отвечать содержанию страницы</h3> <p>Указывайте только те ключевые слова, на которые действительно отвечает страница. С введением поведенческих факторов это стало еще сильнее влиять на позиции в выдаче.</p> <p>Например, пользователь заходит на страницу с тайтлом, которой отвечает его требованиям, а содержимое страницы совсем о другом, то логично предположить, что большинство просто закроет страницу и пойдет дальше искать информацию в поисковик. В итоге у такого ресурса быстро испортится поведенческая картинка , что в конечном итоге может негативно повлиять на позиции всего сайта в целом.</p> <h3>4.3. Порядок следования ключевых слов в теге <title> имеет значение</h3> <p>Первое слово в теге <title> самое весомое для поисковой системы, следовательно, на первом месте необходимо употреблять самое важное ключевое слово на странице.</p> <p>Также стоит отметить, что если некоторые смежные ключевые слова не совсем подходят к содержанию страницы, то возможно стоит вообще их не указывать, даже в конце тайтла, этим усиливается важность первого ключевика.</p> <h3>4.4. Адекватная длина <title></h3> <p>Количество слов в <title> не должно превышать 5-6. Оптимальное количество символов в title согласно ПС – 70. Обычно эту цифру используют для составления тега title для главной страницы. Для <a href="/krasivoe-menyu-dlya-gruppy-vkontakte-kak-sdelat-vnutrennyuyu-stranicu-dlya/">внутренних страниц</a> его длина немного меньше – 40-60 символов. Но опять-таки, это лишь рекомендация. Если есть необходимость сделать тайтл 120 символов, то значит делайте его 120 символов. Все что сделано на благо пользователей - вознаграждается и поощряется.</p> <h3>4.5. Знаки препинания</h3> <p>Используйте знаки препинания в своем <title> только в случае, если это крайне необходимо, и есть уверенность, что поисковая система правильно расценит мысль, которую Вы хотели донести до посетителей. Дело в том, что знаки препинания могут разбить тег <title> на разные смысловые части. Человек сможет разобраться в этом, а вот поисковая система может понять все совсем иначе.</p> <h3>4.6. Не используйте бесполезные слова</h3> <p>Никогда не указывайте в тайтле слова типо "<a href="/yandeks-glavnaya-stranica-sdelat-domashnei-kak-sdelat-yandeks/">главная страница</a>". Это бесполезный мусор для пользователей. Есть шансы быть пессимизированным в выдаче за злоупотребление такими словами. В тайтле должно быть все только по делу.</p> <h3>4.7. Уточняйте <title>, если это нужно</h3> <p>Не делайте тайтл из одного слова. Например, на многих сайтах есть раздел "статьи". Если обратить внимание, то многие сайты допускают серьезную ошибку и имеют заголовок в виде одного слова "статьи", но это абсолютно противоречит здравому смыслу. Это слово явно требует уточнения. Например, "статьи про футбол" - в случае, если у вас футбольная тематика будет смотреться куда более понятно. А ещё лучше дополнить это ещё одним более уточняющим словом.</p> <h3>4.8. Дублирование может быть полезным</h3> <p>Порой бывает очень полезно в конце тайтла указать название вашей фирмы. Например, "<span>ключевая фраза | Название фирмы </span>". Это <a href="/luchshie-emulyatory-elektronnyh-shem-na-russkom-qucs-prostoi-i/">хорошая схема</a>, которая давно себя зарекомендовала. Несмотря на постоянное дублирование в тайтле названия вашей фирмы, такая конструкция позволяет понизить показатель отказов на страницах сайта, поскольку пользователь, который переходит с поисковых систем уже примерно знает, что заходит на сайт организации (кстати, возможно о которой он уже что-то слышал ранее).</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <footer> <div class="td-post-source-tags"> </div> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://rokwell.ru/kak-pravilno-pisat-tegi-title-description-i-atributy-alt-i-title-pravilnyi-zagolovok/" content="https://rokwell.ru/kak-pravilno-pisat-tegi-title-description-i-atributy-alt-i-title-pravilnyi-zagolovok/" /><span style="display: none;"><span style="display: none;"><meta itemprop="url" content="/assets/logo.svg"></span> <meta itemprop="name" content="Как правильно писать теги Title, Description и атрибуты Alt и Title. Правильный заголовок страницы, SEO title"> </span> <meta itemprop="headline " content="Сбербанк Копилка онлайн"><span style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://i2.wp.com/markintalk.ru/wp-content/uploads/2018/09/2018-09-01_21-11-28.png"> <meta itemprop="width" content="366"><meta itemprop="height" content="262"></span> </footer> </article> <style> .ads-border { overflow: hidden; } .ads-content { width: 930px; display: block; } @media(max-width: 1140px) { .ads-content { width: 910px; } } @media(max-width: 1018px) { .ads-content { width: 970px; } } @media (max-width: 767px) { .ads-content { width: 134%; } } @media (max-width: 479px) { .ads-content { width: 100%; height: 490px; } } </style> <div class="ads-block"> <h4 class="td-related-title"><span class="td-related-left td-cur-simple-item">СХОЖИЕ СТАТЬИ</span></h4> <div class="ads-border"> <div class="ads-content"> <div id="fofuny1" style="height:90px;width:690px;" align="center"></div> </div> </div> </div> <style> #mc-container { padding: 10px; } </style> <dblock></dblock> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> <aside class="widget widget_text" id="text-23"> <div class="block-title"><span>Полезное</span></div> <div class="textwidget" align="center"><div id="fofuny2" style="height:200px;width:300px;" align="center"></div></div> </aside> <aside class="widget widget_text" id="text-24"> <div class="block-title"><span>Реклама</span></div> <div class="textwidget" align="center"><div id="fofuny3" style="height:200px;width:300px;" align="center"></div></div> </aside> <aside class="widget widget_text" id="text-25"> <div class="textwidget"> <p style="text-align: center;"> </p> </div> </aside> <aside class="widget rpwe_widget recent-posts-extended" id="rpwe_widget-4"> <div class="block-title"><span>Новое</span></div> <dblock></dblock> <div class="rpwe-block "> <ul class="rpwe-ul"> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/preryvanie-na-kontrollere-avr-v-atmel-avr-studio-chto-takoe-preryvaniya-v-mikrokontrollerah-preryvani/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/cxem.net/mc/book10-2.png" alt="Что такое прерывания в микроконтроллерах Прерывания микроконтроллера avr" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/preryvanie-na-kontrollere-avr-v-atmel-avr-studio-chto-takoe-preryvaniya-v-mikrokontrollerah-preryvani/" title="Что такое прерывания в микроконтроллерах Прерывания микроконтроллера avr" rel="bookmark">Что такое прерывания в микроконтроллерах Прерывания микроконтроллера avr</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/pravilnaya-struktura-statei-dlya-bloga-blogosfera-kak/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/ruskweb.ru/wp-content/uploads/2013/03/robots.jpg" alt="Блогосфера как сетевое информационное пространство Упражнения от freeCodeCamp" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/pravilnaya-struktura-statei-dlya-bloga-blogosfera-kak/" title="Блогосфера как сетевое информационное пространство Упражнения от freeCodeCamp" rel="bookmark">Блогосфера как сетевое информационное пространство Упражнения от freeCodeCamp</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/ne-uda-tsya-aktivirovat-windows-na-etom-ustroistve-obzor-vseh-oshibok-pri/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/geekon.media/wp-content/uploads/2015/10/okno-vypolnit.png" alt="Обзор всех ошибок при активации Windows и методы устранения Решение возникшей проблемы" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/ne-uda-tsya-aktivirovat-windows-na-etom-ustroistve-obzor-vseh-oshibok-pri/" title="Обзор всех ошибок при активации Windows и методы устранения Решение возникшей проблемы" rel="bookmark">Обзор всех ошибок при активации Windows и методы устранения Решение возникшей проблемы</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/programma-konvertacii-flac-v-wav-kak-konvertirovat-faily-flac-v-mp3-aac-wma-wav-i/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/mymusictools.com/rus/articles/flac-v-wav-1.gif" alt="Как конвертировать файлы FLAC в MP3, AAC, WMA, WAV и т" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/programma-konvertacii-flac-v-wav-kak-konvertirovat-faily-flac-v-mp3-aac-wma-wav-i/" title="Как конвертировать файлы FLAC в MP3, AAC, WMA, WAV и т" rel="bookmark">Как конвертировать файлы FLAC в MP3, AAC, WMA, WAV и т</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/vse-o-kriptovalyute-nem-kriptovalyuta-nem-nem-xem-unikalnaya-set-s-algoritmom/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/miningbitcoinguide.com/wp-content/uploads/2017/12/Kurs-NEM-v-2017-godu.jpg" alt="Криптовалюта NEM (Нэм, XEM) — уникальная сеть с алгоритмом доказательства важности Как устроен NEM" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/vse-o-kriptovalyute-nem-kriptovalyuta-nem-nem-xem-unikalnaya-set-s-algoritmom/" title="Криптовалюта NEM (Нэм, XEM) — уникальная сеть с алгоритмом доказательства важности Как устроен NEM" rel="bookmark">Криптовалюта NEM (Нэм, XEM) — уникальная сеть с алгоритмом доказательства важности Как устроен NEM</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/uznat-kogda-vyidet-obnovlenie-android-kogda-vyidet-novaya/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/pdalife.info/uploads/p/3fciaz/google-pixel.jpg" alt="Когда выйдет новая прошивка для Samsung Galaxy" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/uznat-kogda-vyidet-obnovlenie-android-kogda-vyidet-novaya/" title="Когда выйдет новая прошивка для Samsung Galaxy" rel="bookmark">Когда выйдет новая прошивка для Samsung Galaxy</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/vylil-kofe-na-noutbuk-vosstanovlenie-zalitoi-klaviatury/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/smart-service.ru/_data/article/66/full/8172_zalit_noutbuk.jpg" alt="Восстановление залитой клавиатуры ноутбука" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/vylil-kofe-na-noutbuk-vosstanovlenie-zalitoi-klaviatury/" title="Восстановление залитой клавиатуры ноутбука" rel="bookmark">Восстановление залитой клавиатуры ноутбука</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/nastroiki-bios-detalnaya-instrukciya-v-kartinkah-bazovyi-kod-chto-takoe/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/alexzsoft.ru/wp-content/uploads/2017/04/Parametry.png" alt="Базовый код: что такое BIOS Не заходит в биос на windows 10" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/nastroiki-bios-detalnaya-instrukciya-v-kartinkah-bazovyi-kod-chto-takoe/" title="Базовый код: что такое BIOS Не заходит в биос на windows 10" rel="bookmark">Базовый код: что такое BIOS Не заходит в биос на windows 10</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="/oshibka-application-error--chto-delat-oshibka-application-load-error-p-0000065432-chto-delat-proverit/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/tvoykomputer.ru/wp-content/uploads/2017/06/application-load-error-5-0000065434.jpg" alt="Ошибка Application Load Error P:0000065432 – что делать Проверить обновление системы" loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="/oshibka-application-error--chto-delat-oshibka-application-load-error-p-0000065432-chto-delat-proverit/" title="Ошибка Application Load Error P:0000065432 – что делать Проверить обновление системы" rel="bookmark">Ошибка Application Load Error P:0000065432 – что делать Проверить обновление системы</a> </li> </ul> </div> </aside> </div> </div> </div> </div> </div> <div class="td-footer-wrapper td-footer-template-3"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12"> </div> </div> <div class="td-pb-row"> <div class="td-pb-span3 logo-footer"> <div class="td-footer-info"> <div class="footer-logo-wrap"><a href="/"><img class="td-retina-data" src="/logo/logo.png" data-retina="/logo/logo.png" alt="Сайт о компьютерной технике" title="Сайт о компьютерной технике" / loading=lazy></a></div> <div class="footer-text-wrap"></div> <div class="footer-social-wrap td-social-style-2"></div> </div> <aside class="widget widget_text" id="text-16"> <div class="textwidget"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <span class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter"></span></div> </aside> </div> <div class="td-pb-span9 footer-discription"> <aside class="widget widget_text" id="text-5"> <div class="textwidget"> <p> <font size="2" color="grey"> </font> </p> © Сайт о компьютерной технике, 2024</div> </aside> </div> </div> </div> </div> <div class="td-sub-footer-container"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12 td-sub-footer-menu"> <div class="td-sub-footer-main"> <div class="menu-foot-container"><ul id="menu-foot" class="td-subfooter-menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu"><a href="/feedback/">Обратная связь</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="/sitemap.xml">Карта сайта</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="">О сайте</a></li> </ul></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("span.ancored").replaceWith(function () { $this = jQuery(this); href = $this.attr("title"); text = $this.html(); return '<a href="' + href + '">' + text + '</a>'; } ) } ) </script> <link rel='stylesheet' id='font-awesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css?ver=4.4.0' type='text/css' media='all' /> <link rel='stylesheet' id='su-content-shortcodes-css' href='/assets/content-shortcodes.css' type='text/css' media='all' /> <link rel='stylesheet' id='su-box-shortcodes-css' href='/assets/box-shortcodes.css' type='text/css' media='all' /> <script type='text/javascript' src='/assets/jquery.form.min.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var _wpcf7 = { "recaptcha":{ "messages":{ "empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."} },"cached":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='/assets/scripts.js'></script> <script type='text/javascript' src='/assets/front.min.js'></script> <script type='text/javascript' src='/assets/imagesloaded.min.js'></script> <script type='text/javascript' src='/assets/masonry.min.js'></script> <script type='text/javascript' src='/assets/jquery.masonry.min.js'></script> <script type='text/javascript' src='/assets/rsvp.js'></script> <script type='text/javascript' src='/assets/tagdiv_theme.js'></script> <script type='text/javascript' src='/assets/comment-reply.min.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "td-default", "margin_top" : 25, "margin_bottom" : 320, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-13'] } ; </script> <script type='text/javascript' src='/assets/q2w3-fixed-widget.min.js'></script> <script type='text/javascript' src='/assets/wp-embed.min.js'></script> <style type='text/css'> /*** Shortcodes Ultimate - box elements ***/ /* Common styles ---------------------------------------------------------------*/ .su-clearfix:before, .su-clearfix:after { display: table; content: " "; } .su-clearfix:after { clear: both; } /* Tabs + Tab ---------------------------------------------------------------*/ .su-tabs { margin: 0 0 1.5em 0; padding: 3px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #eee; } .su-tabs-nav span { display: inline-block; margin-right: 3px; padding: 10px 15px; font-size: 13px; min-height: 40px; line-height: 20px; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; color: #333; cursor: pointer; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .su-tabs-nav span:hover { background: #f5f5f5; } .su-tabs-nav span.su-tabs-current { background: #fff; cursor: default; } .su-tabs-nav span.su-tabs-disabled { opacity: 0.5; filter: alpha(opacity=50); cursor: default; } .su-tabs-pane { padding: 15px; font-size: 13px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; background: #fff; color: #333; } .su-tabs-vertical:before, .su-tabs-vertical:after { content: " "; display: table; } .su-tabs-vertical:after { clear: both; } .su-tabs-vertical .su-tabs-nav { float: left; width: 30%; } .su-tabs-vertical .su-tabs-nav span { display: block; margin-right: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; } .su-tabs-vertical .su-tabs-panes { float: left; width: 70%; } .su-tabs-vertical .su-tabs-pane { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .su-tabs-nav, .su-tabs-nav span, .su-tabs-panes, .su-tabs-pane { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } /* Styles for screens that are less than 768px */ @media only screen and (max-width: 768px) { .su-tabs-nav span { display: block; } .su-tabs-vertical .su-tabs-nav { float: none; width: auto; } .su-tabs-vertical .su-tabs-panes { float: none; width: auto; } } /* Spoiler + Accordion ---------------------------------------------------------------*/ .su-spoiler { margin-bottom: 1.5em; } .su-spoiler .su-spoiler:last-child { margin-bottom: 0; } .su-accordion { margin-bottom: 1.5em; } .su-accordion .su-spoiler { margin-bottom: 0.5em; } .su-spoiler-title { position: relative; cursor: pointer; min-height: 20px; line-height: 20px; padding: 7px 7px 7px 34px; font-weight: bold; font-size: 13px; } .su-spoiler-icon { position: absolute; left: 7px; top: 7px; display: block; width: 20px; height: 20px; line-height: 21px; text-align: center; font-size: 14px; font-family: FontAwesome; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; *margin-right: .3em; } .su-spoiler-content { padding: 14px; -webkit-transition: padding-top .2s; -moz-transition: padding-top .2s; -o-transition: padding-top .2s; transition: padding-top .2s; -ie-transition: padding-top .2s; } .su-spoiler.su-spoiler-closed > .su-spoiler-content { height: 0; margin: 0; padding: 0; overflow: hidden; border: none; opacity: 0; } .su-spoiler-icon-plus .su-spoiler-icon:before { content: "\f068"; } .su-spoiler-icon-plus.su-spoiler-closed .su-spoiler-icon:before { content: "\f067"; } .su-spoiler-icon-plus-circle .su-spoiler-icon:before { content: "\f056"; } .su-spoiler-icon-plus-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f055"; } .su-spoiler-icon-plus-square-1 .su-spoiler-icon:before { content: "\f146"; } .su-spoiler-icon-plus-square-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0fe"; } .su-spoiler-icon-plus-square-2 .su-spoiler-icon:before { content: "\f117"; } .su-spoiler-icon-plus-square-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f116"; } .su-spoiler-icon-arrow .su-spoiler-icon:before { content: "\f063"; } .su-spoiler-icon-arrow.su-spoiler-closed .su-spoiler-icon:before { content: "\f061"; } .su-spoiler-icon-arrow-circle-1 .su-spoiler-icon:before { content: "\f0ab"; } .su-spoiler-icon-arrow-circle-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0a9"; } .su-spoiler-icon-arrow-circle-2 .su-spoiler-icon:before { content: "\f01a"; } .su-spoiler-icon-arrow-circle-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f18e"; } .su-spoiler-icon-chevron .su-spoiler-icon:before { content: "\f078"; } .su-spoiler-icon-chevron.su-spoiler-closed .su-spoiler-icon:before { content: "\f054"; } .su-spoiler-icon-chevron-circle .su-spoiler-icon:before { content: "\f13a"; } .su-spoiler-icon-chevron-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f138"; } .su-spoiler-icon-caret .su-spoiler-icon:before { content: "\f0d7"; } .su-spoiler-icon-caret.su-spoiler-closed .su-spoiler-icon:before { content: "\f0da"; } .su-spoiler-icon-caret-square .su-spoiler-icon:before { content: "\f150"; } .su-spoiler-icon-caret-square.su-spoiler-closed .su-spoiler-icon:before { content: "\f152"; } .su-spoiler-icon-folder-1 .su-spoiler-icon:before { content: "\f07c"; } .su-spoiler-icon-folder-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f07b"; } .su-spoiler-icon-folder-2 .su-spoiler-icon:before { content: "\f115"; } .su-spoiler-icon-folder-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f114"; } .su-spoiler-style-default { } .su-spoiler-style-default > .su-spoiler-title { padding-left: 27px; padding-right: 0; } .su-spoiler-style-default > .su-spoiler-title > .su-spoiler-icon { left: 0; } .su-spoiler-style-default > .su-spoiler-content { padding: 1em 0 1em 27px; } .su-spoiler-style-fancy { border: 1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #fff; color: #333; } .su-spoiler-style-fancy > .su-spoiler-title { border-bottom: 1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #f0f0f0; font-size: 0.9em; } .su-spoiler-style-fancy.su-spoiler-closed > .su-spoiler-title { border: none; } .su-spoiler-style-fancy > .su-spoiler-content { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .su-spoiler-style-simple { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .su-spoiler-style-simple > .su-spoiler-title { padding: 5px 10px; background: #f0f0f0; color: #333; font-size: 0.9em; } .su-spoiler-style-simple > .su-spoiler-title > .su-spoiler-icon { display: none; } .su-spoiler-style-simple > .su-spoiler-content { padding: 1em 10px; background: #fff; color: #333; } /* Quote ---------------------------------------------------------------*/ .su-quote-style-default { position: relative; margin-bottom: 1.5em; padding: 0.5em 3em; font-style: italic; } /*.su-quote-style-default.su-quote-has-cite { margin-bottom: 3em; } */ .su-quote-style-default:before, .su-quote-style-default:after { position: absolute; display: block; width: 20px; height: 20px; background-image: url('../images/quote.png'); content: ''; } .su-quote-style-default:before { top: 0; left: 0; background-position: 0 0; } .su-quote-style-default:after { right: 0; bottom: 0; background-position: -20px 0; } .su-quote-style-default .su-quote-cite { display: block; text-align: right; font-style: normal; } .su-quote-style-default .su-quote-cite:before { content: "\2014\0000a0"; } .su-quote-style-default .su-quote-cite a { text-decoration: underline; } /* Pullquote ---------------------------------------------------------------*/ .su-pullquote { display: block; width: 30%; padding: 0.5em 1em; } .su-pullquote-align-left { margin: 0.5em 1.5em 1em 0; padding-left: 0; float: left; border-right: 5px solid #eee; } .su-pullquote-align-right { margin: 0.5em 0 1em 1.5em; padding-right: 0; float: right; border-left: 5px solid #eee; } /* Row + Column ---------------------------------------------------------------*/ .su-row { clear: both; zoom: 1; margin-bottom: 1.5em; } .su-row:before, .su-row:after { display: table; content: ""; } .su-row:after { clear: both; } .su-column { display: block; margin: 0 4% 0 0; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .su-column-last { margin-right: 0; } .su-row .su-column { margin: 0 0 0 4%; } .su-row .su-column.su-column-size-1-1 { margin-left: 0; margin-right: 0; } .su-row .su-column:first-child { margin-left: 0; } .su-column-centered { margin-right: auto !important; margin-left: auto !important; float: none !important; } .su-column img, .su-column iframe, .su-column object, .su-column embed { max-width: 100%; } @media only screen { [class*="su-column"] + [class*="su-column"]:last-child { float: right; } } .su-column-size-1-1 { width: 100%; } .su-column-size-1-2 { width: 48%; } .su-column-size-1-3 { width: 30.66%; } .su-column-size-2-3 { width: 65.33%; } .su-column-size-1-4 { width: 22%; } .su-column-size-3-4 { width: 74%; } .su-column-size-1-5 { width: 16.8%; } .su-column-size-2-5 { width: 37.6%; } .su-column-size-3-5 { width: 58.4%; } .su-column-size-4-5 { width: 79.2%; } .su-column-size-1-6 { width: 13.33%; } .su-column-size-5-6 { width: 82.66%; } /* Styles for screens that are less than 768px */ @media only screen and (max-width: 768px) { .su-column { width: 100% !important; margin: 0 0 1.5em 0 !important; float: none !important; } .su-row .su-column:last-child { margin-bottom: 0 !important; } } /* Service ---------------------------------------------------------------*/ .su-service { position: relative; margin: 0 0 1.5em 0; } .su-service-title { display: block; margin-bottom: 0.5em; color: #333; font-weight: bold; font-size: 1.1em; } .su-service-title img { position: absolute; top: 0; left: 0; display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .su-service-title i { position: absolute; top: 0; left: 0; display: block !important; width: 1em; height: 1em; text-align: center; line-height: 1em; } .su-service-content { line-height: 1.4; } /* Box ---------------------------------------------------------------*/ .su-box { margin: 0 0 1.5em 0; border-width: 2px; border-style: solid; } .su-box-title { display: block; padding: 0.5em 1em; font-weight: bold; font-size: 1.1em; } .su-box-content { background-color: #fff; color: #444; padding: 1em; } .su-box-style-soft .su-box-title { background-image: url('../images/styles/style-soft.png'); background-position: 0 0; background-repeat: repeat-x; } .su-box-style-glass .su-box-title { background-image: url('../images/styles/style-glass.png'); background-position: 0 50%; background-repeat: repeat-x; } .su-box-style-bubbles .su-box-title { background-image: url('../images/styles/style-bubbles.png'); background-position: 0 50%; background-repeat: repeat-x; } .su-box-style-noise .su-box-title { background-image: url('../images/styles/style-noise.png'); background-position: 0 0; background-repeat: repeat-x; } /* Note ---------------------------------------------------------------*/ .su-note { margin: 0 0 1.5em 0; border-width: 0px; border-style: solid; } .su-note-inner { padding: 1em; border-width: 0px; border-style: solid; box-shadow: 3px 3px 6px #d0d0d0; } /* Expand ---------------------------------------------------------------*/ .su-expand { margin: 0 0 1.5em 0; } .su-expand-content { overflow: hidden; } .su-expand-link { margin-top: 0.5em; cursor: pointer; } .su-expand-link:hover { opacity: 0.7; filter: alpha(opacity=70); } .su-expand-link a, .su-expand-link a:hover, .su-expand-link a:active, .su-expand-link a:visited, .su-expand-link a:focus { display: inline; text-decoration: none; background: transparent; border: none; } .su-expand-link-style-default .su-expand-link a, .su-expand-link-style-default .su-expand-link a:hover { text-decoration: none; } .su-expand-link-style-underlined .su-expand-link span { text-decoration: underline; } .su-expand-link-style-dotted .su-expand-link span { border-bottom: 1px dotted #333; } .su-expand-link-style-dashed .su-expand-link span { border-bottom: 1px dashed #333; } .su-expand-link-style-button .su-expand-link a { display: inline-block; margin-top: 0.2em; padding: 0.2em 0.4em; border: 2px solid #333; } .su-expand-link-more { display: none; } .su-expand-link-less { display: block; } .su-expand-collapsed .su-expand-link-more { display: block; } .su-expand-collapsed .su-expand-link-less { display: none; } .su-expand-link i { display: inline-block; margin: 0 0.3em 0 0; vertical-align: middle; color: inherit; } .su-expand-link img { display: inline-block; width: 1em; height: 1em; margin: 0 0.3em 0 0; vertical-align: middle; } /* Lightbox content ---------------------------------------------------------------*/ .su-lightbox-content { position: relative; margin: 0 auto; } .mfp-content .su-lightbox-content, #su-generator .su-lightbox-content { display: block !important; } .su-lightbox-content-preview { width: 100%; min-height: 300px; background: #444; overflow: hidden; } .su-lightbox-content h1, .su-lightbox-content h2, .su-lightbox-content h3, .su-lightbox-content h4, .su-lightbox-content h5, .su-lightbox-content h6 { color: inherit; } /* Common margin resets for box elements ---------------------------------------------------------------*/ .su-column-inner > *:first-child, .su-accordion > *:first-child, .su-spoiler-content > *:first-child, .su-service-content > *:first-child, .su-box-content > *:first-child, .su-note-inner > *:first-child, .su-expand-content > *:first-child, .su-lightbox-content > *:first-child { margin-top: 0; } .su-column-inner > *:last-child, .su-tabs-pane > *:last-child, .su-accordion > *:last-child, .su-spoiler-content > *:last-child, .su-service-content > *:last-child, .su-box-content > *:last-child, .su-note-inner > *:last-child, .su-expand-content > *:last-child, .su-lightbox-content > *:last-child { margin-bottom: 0; } </style> <script> (function(){ var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/assets/style2.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,''); } ); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } } ); } } )(); </script> </body> </html>