Какие метатеги HTML добавить на свой сайт и что они делают?

  1. Название и описание
  2. Что делает заголовок?
  3. Для чего используется описание?
  4. Написание заголовка и описания
  5. Длина заголовка и описания
  6. Schema.org, чтобы описать ваш контент
  7. Заворачивать

Так вы не можете дождаться, чтобы выпустить свой новый сайт? Хотите уточнить, какие метатеги вам нужны в разметке HTML? Нужна информация о том, где, почему и как их добавить? Могли бы использовать несколько примеров?

Не ищите больше, вот пост, который вы искали.

Мета-теги помогают компьютерам (например, роботам Google) понимать содержимое страниц вашего сайта.

Бьюсь об заклад, вы уже слышали, что вам нужны мета-теги для SEO. Я думаю, что это определение несколько узкое в 2016 году.

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

Да, это выходит за рамки SEO.

Поисковые системы в основном полагаются на некоторые метатеги, но сегодня существуют специальные метатеги для социальных сайтов, таких как Facebook, Twitter и LinkedIn.

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

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

  • Название и описание
  • Google связанная мета
  • Теги проверки
  • Социальная мета
  • Schema.org, чтобы описать ваш контент

Название и описание

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

Каждая страница на вашем сайте должна иметь метатег заголовка и описания. Поместите эти теги в раздел <head> ваших HTML-страниц. Например:

<! DOCTYPE html> <html> <head> <! - Заголовок страницы входит в тег <title> -> <title> Это заголовок вашей страницы </ title> <! - Описание страницы определено в метаформате -> <meta name = "description" content = "Это описание вашей страницы"> </ head> <body> <! - Здесь находится содержимое страницы ... -> </ тело> </ html>

Как вы можете видеть, <title> технически не содержит формат тега <meta>, но почти всегда обсуждается, когда речь идет о мета-тегах.

Что делает заголовок?

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

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

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

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

Для чего используется описание?

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

Описание также может быть использовано в качестве описания на социальных сайтах.

Написание заголовка и описания

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

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

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

Если вы хотите глубоко погрузиться в темное искусство заголовков, просто ищите оптимизацию заголовков или эмоциональные заголовки.

Длина заголовка и описания

Вот несколько практических советов: Google и другие поисковые системы будут отображать только ограниченное количество символов в результатах поиска. Давайте возьмем этот пример:

Это мой пост, скопированный с 6-й позиции поиска Google.

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

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

Google обычно отображает 50-60 символов из заголовка и около 150-160 из описания. Остальная информация в этих тегах не будет отображаться на странице результатов.

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

Если вы хотите узнать больше о длине, Вот богатое информацией исследование Моз.

Есть несколько метатегов, которые вы должны добавить на все свои веб-страницы в разделе <head>. Это:

  • charset определяет кодировку символов документа HTML. Браузер использует эту информацию для правильного отображения страницы.
  • http-viewport обозначает видимую пользователю область веб-страницы. Он был представлен с отзывчивым веб-дизайном. Вы можете контролировать исходные размеры и масштабирование при загрузке страницы. Вы можете прочитать хорошее объяснение http-viewport с примерами на w3schools.

Давайте расширим наш предыдущий пример:

<! DOCTYPE html> <html> <head> <! - UTF8 - это широкая кодировка символов -> <meta charset = "utf-8"> <! - Установка ширины страницы в соответствии с шириной устройства с масштабированием 1 -> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <! - Заголовок страницы входит в тег <title> -> <title> Это заголовок вашей страницы </ title> <! - Описание страницы определено в метаформате -> <meta name = "description" content = "Это описание вашей страницы"> </ head> <body> < ! - Здесь появляется содержимое страницы ... -> </ body> </ html>

Кроме того, существуют менее частые метатеги, наиболее заметными из которых являются роботы, Google и http-эквивалент.

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

Это единственный способ добиться успеха в поиске изображений, потому что компьютеры еще не понимают изображения, поэтому мы должны сказать им, что на картинке. Поэтому атрибуты alt являются обязательными для всех изображений.

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

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

Позволь мне объяснить.

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

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

Самый простой способ подтвердить право собственности на сайт - это метатег. Код подтверждения предоставляется онлайн-сервисами, такими как Google Search Console, Pinterest и т. Д.

Давайте добавим пример Google в наш пример кода, где значением поля содержимого является код подтверждения, предоставленный Google Search Console:

<! DOCTYPE html> <html> <head> <! - UTF8 - широкая кодировка символов -> <meta charset = "utf-8"> <! - Установка ширины страницы по ширине устройства с масштабированием 1 - -> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <! - Заголовок страницы входит в тег <title> -> <title> Это заголовок Ваша страница </ title> <! - Описание страницы определено в метаформате -> <meta name = "description" content = "Это описание вашей страницы"> <! - Проверка сайта Google - > <meta name = "google-site-validation" content = "59408yhfuhfjskdlhfasdhfuoyHJHLJHK__Random__BLAH_BLAH" /> </ head> <body> <! - сюда приходит содержимое страницы ... -> </ body> </ html>

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

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

Большинство социальных сайтов поддерживают Протокол Open Graph получить полезную информацию о веб-странице.

Twitter использует свою собственную запись, но если ее нет на вашей странице, Twitter будет использовать данные Open Graph.

Давайте определим набор тегов Open Graph, которые будут использоваться Facebook, Google Plus и LinkedIn. Я также добавлю заголовок в Твиттере.

<! DOCTYPE html> <html> <head> <! - UTF8 - широкая кодировка символов -> <meta charset = "utf-8"> <! - Установка ширины страницы по ширине устройства с масштабированием 1 - -> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <! - Заголовок страницы входит в тег <title> -> <title> Это заголовок Ваша страница </ title> <! - Описание страницы определено в метаформате -> <meta name = "description" content = "Это описание вашей страницы"> <! - Проверка сайта Google - > <meta name = "google-site-verify" content = "59408yhfuhfjskdlhfasdhfuoyHJHLJHK__Random__BLAH_BLAH" /> <! - Открыть графические данные -> <meta property = "og: title" content = "Это заголовок вашей страницы <" /> <meta property = "twitter: title" content = "Это заголовок вашей страницы <" /> <meta property = "og: description" content = "Это описание вашей страницы"> <meta property = "og: image" content = "http://yourtsite.com/yourimagedir/yourthumbnail.jpg" /> </ head> <body> <! - Содержание страницы c вот здесь ... -> </ body> </ html>

Если у вас есть проблемы с мета Open Graph, начните отладку с Facebook Open Graph отладчик.

Schema.org, чтобы описать ваш контент

Schema.org предоставляет схемы для структурированных данных в Интернете.

Используйте их для описания статей, постов в блогах, продуктов, списков продуктов, событий, людей и так далее.

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

Давайте посмотрим пример сообщения в блоге:

<article itemscope itemtype = "http://schema.org/BlogPosting"> <meta itemprop = "image" content = "http://yoursite.com/image.jpg"> <img src = "http: // ваш сайт .com / image.jpg "> <h1 itemprop =" name headline "> Заголовок сообщения </ h1> <p> <time datetime =" date_to_xmlschema "itemprop =" datePublished "> 4 апреля 2016 г. </ time> <span itemprop = "author" itemscope itemtype = "http://schema.org/Person"> <span itemprop = "name"> Имя автора сообщения </ span> </ span> </ p> <div itemprop = "articleBody"> <! - Тело сообщения приходит сюда -> </ div> </ article>

Используйте атрибут itemscope для обозначения начала нового объекта schema.org. itemtype указывает тип элемента, запускаемого itemscope. Используйте атрибут itemprop внутри открывающих и закрывающих тегов элемента с атрибутом itemscope.

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

Используйте schema.org, а Google и другие поисковые системы лучше поймут, что находится на ваших страницах. Например, вы можете выделить ваши товары, чтобы они были доступны в Google Покупки для поиска. Больше людей найдут ваши продукты и ваш интернет-магазин. Звучит хорошо, правда?

Заворачивать

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

Не пропустите мета-теги и разметку схемы на своих страницах. Они необходимы для каждого сайта. Если у вас их нет, добавьте их сегодня.

Похожие

Что такое SEO
... иатурой от английского выражения ПОИСКОВАЯ ОПТИМИЗАЦИЯ, или на болгарском языке, поисковая оптимизация"> Слово SEO является аббревиатурой от английского выражения ПОИСКОВАЯ ОПТИМИЗАЦИЯ, или на болгарском языке, поисковая оптимизация. Но что именно оптимизировано для поисковых систем? Речь идет об оптимизации веб-сайта (это может быть любой веб-сайт). Это набор неписаных правил, которые, если они будут выполнены,
Идеальная длина заголовка SEO для веб-страниц
... что заголовок вашей страницы является одним из наиболее важных технических элементов SEO на странице. Ваш заголовок служит двум целям одновременно, но об этом позже в этой статье. Но какова идеальная длина заголовка SEO? Как долго это должно быть, чтобы он мог дать вам наилучшие результаты SEO? Существует ли ограничение на количество символов в вашем мета-заголовке, чтобы оно отображалось? Что такое название SEO? Заголовок SEO, мета-заголовок или заголовок страницы - это заголовок
Отрицательный SEO: 8 способов, которыми рискует ваш сайт
Конкуренция в Интернете жесткая, и ваши конкуренты могут быть более безжалостными с каждым днем. Некоторые веб-мастера прибегают к использованию грязных трюков, известных как Гугл боулинг , чтобы саботировать конкурирующие сайты. Google боулинг - это техника черной шляпы, но, к сожалению, она может быть невероятно эффективной. Вооружитесь знаниями, необходимыми для защиты репутации вашего сайта.
Важность вашего заголовка веб-страницы
... заголовка для увеличения клика. Посмотрите на набор результатов в Google, рейтинг страницы сначала может быть меньше кликов на основе количества ключевых слов, найденных в заголовке. Лучшие практики для написания тега заголовка Попробуйте использовать фразы с длинным хвостом, мне это нравится, потому что вы начнете
7 жестких любовных советов, чтобы увеличить ваш доход фрилансера
Внештатные авторы получают много счастливых советов «как увеличить свой доход». Есть тысячи сообщений в блоге онлайн с изложением таких советов, как: «Заряжай больше денег». «Найдите свою нишу». «Пакет услуг.» Дело не в том, что совет неправильный (черт, Я обсуждал эти советы тоже.) Это то, что совет идет только так далеко. «Зарабатывать
Блог: что такое SEO?
... ичин, по которым вашему бизнесу нужна стратегия SEO» Мы рассмотрели, насколько важна поисковая оптимизация (SEO) для вашего бизнеса с точки зрения привлечения клиентов и сохранения конкурентного преимущества"> В предыдущей статье 360 PSG, «Шесть причин, по которым вашему бизнесу нужна стратегия SEO» Мы рассмотрели, насколько важна поисковая оптимизация (SEO) для вашего бизнеса с точки
Facebook или SEO: что лучше? [Инфографика]
... что вы должны сосредоточить свои усилия на одном или другом. Маркетинг в Facebook является частью общего крупного маркетингового плана. То же самое касается SEO, которое само по себе состоит из локальных факторов, внешнего контент-маркетинга и построения ссылок. Опытные маркетологи знают, что вы можете делать все это вместе. Вы можете делать платные объявления на Facebook и за его пределами, вы можете создавать ссылки, которые включают как социальные сети, так и блоги, вы можете
Метатеги используют в поисковой оптимизации
... описания уже не так уж много. Тем не менее, это все еще полезный инструмент, потому что рейтинг кликов на веб-странице может быть улучшен с помощью мета-описания. Рекомендуется, чтобы мета-описание было длиной 160 символов, поскольку оно использует ключевые слова и увеличивает вероятность того, что пользователь нажмет на страницу из-за выделенных ключевых слов. Мета Роботы - Мета роботы может быть удобно для
Как использовать органическое SEO, чтобы привлечь больше клиентов
Если вы хотите, чтобы люди посещали ваш сайт, важно помочь им найти его в поисковых системах. SEO означает поисковую оптимизацию, и этот термин используется для описания процесса, который улучшает видимость веб-сайта в неоплачиваемых или обычных результатах поиска. В последние годы
Как использовать Meta Box Yoast, чтобы ваш сайт выделялся
... описание . Если вы хотите, чтобы результаты вашего сайта выделялись, эти три вещи должны быть хорошо написаны, чтобы пользователи захотели перейти на ваш сайт. Вот пример результата, который не является убедительным: По сравнению с примером Starbucks, приведенным выше, вы можете увидеть, что Jitters Cafe
Добавление ключевых слов для SEO в ваш магазин Shopify
... ица была напечатана 09 ноября 2019 года. Для получения текущей версии посетите страницу https://help.shopify.com/en/manual/promoting-marketing/seo/adding-keywords. Ключевые слова появляются в поисковых запросах, которые люди вводят в поисковых системах. Например, человек может искать синие туфли в Канаде. Ключевыми словами в этом поиске были бы синие ботинки и Канада. Чтобы ваш магазин показывался выше в результатах поиска, вы должны попытаться выяснить, какие ключевые слова ваши клиенты

Комментарии

Спросите, смотрели ли они на ваш сайт, и если да, что они об этом думают?
Спросите, смотрели ли они на ваш сайт, и если да, что они об этом думают? Получение отзывов от ваших пользователей может дать вам знать, что работает для них, а что нет. Вы все еще можете использовать навигационные ссылки Для многостраничного сайта, используя навигационные ссылки отлично подходят для путешествий между страницами, которые вам нужно найти. Это избавляет
Зачем вам нужно дополнительное время, чтобы добавить весь этот скрытый текст на ваш сайт?
Зачем вам нужно дополнительное время, чтобы добавить весь этот скрытый текст на ваш сайт? Кроме того, это пустая трата времени, потому что добавление скрытого текста только навредит вам в долгосрочной перспективе. Несмотря на вероятность того, что это не сильно повлияет на вашего пользователя, он все еще сомнительный и считается мошенничеством. маскировка
С точки зрения зрителя, что они должны видеть, чтобы быть мотивированным, чтобы кликать?
С точки зрения зрителя, что они должны видеть, чтобы быть мотивированным, чтобы кликать? Это позволяет избежать проблемы с дублированным контентом, создавая при этом хороший пользовательский опыт. 9. Разрешить другим вставлять ваши видео Как вы создаете отличные видео, позволить другим включать ваш контент в их работу. Предоставляя другим пользователям возможность вставлять
Вместо того, чтобы вводить «что такое SEO» или даже «что такое SEO», мы с большей вероятностью скажем «что такое SEO?
Вместо того, чтобы вводить «что такое SEO» или даже «что такое SEO», мы с большей вероятностью скажем «что такое SEO?». Это может показаться семантикой (и технически, это так!), Но привнесение в ваш контент разговорного ощущения - верный способ настроить вас на успех голосового поиска. Вот три простых способа закрепить разговорный контент: Используйте сокращения, такие как что есть, и вот. Это просто больше отражает то, как мы говорим. Например, вам
Если вы не определили ключевые слова и фразы, которые ваш идеальный клиент использует для поиска товаров или услуг в вашей отрасли, как вы можете ожидать, что они найдут вас?
Если вы не определили ключевые слова и фразы, которые ваш идеальный клиент использует для поиска товаров или услуг в вашей отрасли, как вы можете ожидать, что они найдут вас? Если вы не знаете, какие ключевые слова имеют наибольшую конкуренцию, а какие - умеренную или слабую, как вы будете планировать свою стратегию? Исследование ключевых слов, хотя и кажется, что они несексуальны, все еще составляет основную основу поисковой оптимизации. И не заблуждайтесь, это
Сколько раз вы слышали, как «эксперты SEO юридической фирмы» рассказывали, как они могут вывести ваш сайт на вершину Google, но затем не справляются?
Сколько раз вы слышали, как «эксперты SEO юридической фирмы» рассказывали, как они могут вывести ваш сайт на вершину Google, но затем не справляются? Если я описываю вас и вашу фирму, знайте, что вы не одиноки. Но прежде чем я расскажу вам, почему ваш сайт не входит в рейтинг Google и почему большинство «экспертов» не выполняют своих обещаний, я думаю, что вам нужно задать себе более фундаментальный вопрос - «как я узнаю? Разница между настоящим экспертом (который обеспечивает стабильные
Вы хотите, чтобы они заполнили форму, чтобы вы могли получить их адрес электронной почты?
Вы хотите, чтобы они заполнили форму, чтобы вы могли получить их адрес электронной почты? Или вы хотите, чтобы они связались с вами и договорились о встрече, чтобы узнать больше о ваших услугах? Что бы вы ни хотели, чтобы ваши посетители делали, обязательно заканчивайте свои сообщения соответствующим призывом к действию (CTA). Например, им может понадобиться агент, который поможет им раскрыть инвестиционные возможности в Калифорнии. Иди и скажи им, чтобы связаться с вашим бизнесом!
Хотели бы вы, чтобы изображения с соответствием содержанию делали ваш контент (SEO) на вашей странице еще более интересным для Google и целевой группы?
Хотели бы вы, чтобы изображения с соответствием содержанию делали ваш контент (SEO) на вашей странице еще более интересным для Google и целевой группы? Напишите нам для идеального SEO маркетинга.
Чтобы быть успешным, каждый бизнес должен соответствовать определенному рыночному спросу - какие проблемы на самом деле решает ваш бренд?
Чтобы быть успешным, каждый бизнес должен соответствовать определенному рыночному спросу - какие проблемы на самом деле решает ваш бренд? Помните о том, что вы предлагаете своим клиентам, и какие типы потребителей будут действительно необходимы для удовлетворения этих конкретных потребностей. Потратьте время, чтобы выяснить, с какими типами проблем сталкиваются ваши клиенты, и что побуждает их начать поиск решения. Узнайте о вопросах и проблемах, которые у них могли возникнуть
Что если бы вы могли взглянуть на свой длинный список ключевых слов и точно определить, какие из них наиболее вероятно конвертировать?
Что если бы вы могли взглянуть на свой длинный список ключевых слов и точно определить, какие из них наиболее вероятно конвертировать? Это может звучать как сказка, но это абсолютно выполнимо. Ключевые слова с длинным хвостом - ключевые слова из 4 или более слов - часто нацелены на рост органического трафика, но они важны не только для увеличения трафика. Люди, которые ищут длинные ключевые слова хвоста В 2,5 раза больше
Какие курсы веб-маркетинга и мероприятия, чтобы следовать, чтобы получить хорошие результаты?
Какие курсы веб-маркетинга и мероприятия, чтобы следовать, чтобы получить хорошие результаты? Здесь, здесь вы найдете имена, которые вы никогда не сможете пропустить. Рекламодатель, событие для интернет-рекламы Курс, организованный Studio Samo: три дня, посвященные онлайн-рекламе, чтобы узнать больше обо всем, что нужно знать. Говорят о рекламе в Facebook, LinkedIn Ads, ремаркетингу

Для чего используется описание?
Хотите уточнить, какие метатеги вам нужны в разметке HTML?
Нужна информация о том, где, почему и как их добавить?
Что делает заголовок?
Для чего используется описание?
Звучит хорошо, правда?
Но что именно оптимизировано для поисковых систем?
Но какова идеальная длина заголовка SEO?
Как долго это должно быть, чтобы он мог дать вам наилучшие результаты SEO?
Существует ли ограничение на количество символов в вашем мета-заголовке, чтобы оно отображалось?