Я узнал ценность мета-тегов смущающим способом. много лет назад я отправил целевую страницу, которой гордился, разместил ссылку в нескольких местах и смотрел, как она отображается повсюду в виде голого URL-адреса без названия, без описания и сломанного значка изображения. Сама страница была в порядке, но я никогда не добавлял открытый график теги, поэтому каждая социальная платформа вернулась к гаданию, и каждый из них угадал неправильно. контент был хорошим, а представление ссылки было мусором, что на практике означало гораздо меньше кликов, чем заслуживала страница.
Мета-теги - это небольшой блок HTML, который решает, как ваша страница выглядит везде, кроме самой страницы: в Google's результаты, в Slack развернуть, в Facebook или LinkedIn карты, в твит. Они легко получить неправильные, потому что есть три перекрывающихся стандартов - стандартные SEO-теги, Открытый Граф, и Twitter Карты - и каждый хочет немного разные названия свойств для того, что часто является одной и той же информацией. я создаю Toolz.dev и писать много контента вокруг него, поэтому я постоянно настраивал метаданные, и я построил Генератор метатегов чтобы создать правильный, полный, готовый к копированию блок тегов из одного набора входных данных - с предупреждениями о длине, чтобы я никогда не отправлял заголовок, который снова усекается.
TL;DR: Мета-теги управляют вашим поисковым фрагментом и предварительным просмотром социальных ссылок. Вам нужны три перекрывающихся набора - стандартные SEO-теги, открытый график для большинства платформ и карты Twitter - и они делятся большей частью своего контента, но используют разные имена атрибутов.The Генератор метатегов Создает все три из одной формы, предупреждает, что ваш заголовок проходит ~60 символов или описания пройдет ~160, безопасно пробегает ваш текст и может выдавать соответствующий блок JSON-LD в вашем браузере.
Что такое метатеги и почему они важны?
Мета-теги — это элементы, которые находятся внутри страницы. <head> и нести информацию о странице, а не о контенте, показанном на ней. выше <title> метка и <meta name="description"> Тег — два самых старых и наиболее важные: вместе они обычно составляют кликабельный заголовок и серую сводную строку в результатах поиска Google. Получите их правильно, и ваш результат будет хорошо читается и зарабатывает клики; оставьте их, а поисковые системы что-то синтезируют из текста вашей страницы, часто неловко.
Помимо этих основ, находятся два социальных стандарта. Open Graph, родом из Facebook, но теперь почетный LinkedIn, Slack, Discord, Pinterest, WhatsApp и многим другим, использует теги, такие как og:title, og:description, и og:image Чтобы контролировать, как общая ссылка отображается в виде карты. Карты Twitter выполняют ту же работу для Twitter/X с twitter: теги. существует сильное перекрытие - заголовок и описание обычно идентичны для всех трех - но каждая платформа читает свое собственное пространство имен, поэтому вам необходимо предоставить все три, чтобы охватить всюду, где ваша ссылка может быть общей.
Причина, по которой это имеет значение, — рычаг. Тот же контент значительно больше привлекает, когда его ссылка предварительный просмотр завершен и привлекательна по сравнению с обнаженной. Хорошее название и описание поднимают клики из поиска; правильная открытая карта Graph поднимает клики из каждой социальной доли. Мета-теги — это одноразовая установка на страницу, которая продолжает окупаться каждый раз, когда страница найдена или передана, что именно то, что стоит делать тщательно. выше Генератор метатегов существует таким образом, что установка является задачей заполнения в форме, а не копипастной из памяти.
Как генератор метатегов строит теги?
Генератор берет единый структурированный набор входных данных - заголовок, описание, изображение, URL-адрес, имя сайта и несколько опций - и объединяет их в три скоординированных блока HTML. Понимание разветвления объясняет, почему одна форма создает так много тегов.
Из ваших основных полей он сначала записывает Первичные метки: <title>, мета-описание и необязательные ключевые слова, автор, роботы, язык, тематический цвет и каноническая ссылка. Затем он повторно использует одно и то же название, описание и изображение для записи Открыть блок графа с og: Имена свойств, добавление og:type, og:url, и og:site_name, йо- Наконец пишет Блокировка карты Twitter с twitter: Имена, включая стиль карты и ваш ручку, сопоставленные с twitter:site а twitter:creator. Поскольку все трое черпают данные с одних и тех же входов, они автоматически синхронизируются - вы не можете случайно дать Facebook один заголовок, а Twitter - другой.
Две детали делают вывод безопасным для вставки. Во-первых, только поля, которые вы действительно заполняете, производят теги, поэтому вы никогда не отправляете пустые content="" атрибуты. Во-вторых, каждое значение изменяется в формате HTML: цитата, амперсанд или угловая скобка в вашем описании преобразуются в его сущность, поэтому она не может выйти из атрибута и повредить вашу разметку. выше Генератор метатегов Также необязательно испускает соответствующий блок структурированных данных JSON-LD, который является отдельным, но дополнительным способом описания страницы для поисковых систем.
Какой длины должно быть заголовок и метаописание?
Это вопрос, который сбивает большинство людей с толку, и ответ касается ширины дисплея, а не жесткой предела символов. Поисковые системы усекают заголовки и описания, которые превышают пробел, поэтому практическими ограничениями являются точки, за пределами которых ваш текст начинает обрезаться с помощью многоточия.
Для заголовков, цель примерно от 50 до 60 символов. Google отображает заголовки шириной примерно до 600 пикселей, что получается примерно до 60 символов для типичного текста, и после этого он отрезает конец. Для метаописаний, цель примерно от 120 до 160 символов; описания могут работать примерно до 160 до усечения на рабочем столе, а мобильный иногда короче. Ни один из пределов не является точным, потому что оба измеряются в пикселях, а не символах - заголовок, полный широких букв, усекается раньше, чем заголовок, полный узких - но рекомендации по символам достаточно близки, чтобы их можно было спроектировать.
выше Генератор метатегов подсчитывает символы в прямом эфире и предупреждает вас, когда вы пересекаете пороговые значения: заголовок старше 60 или описание старше 160 помечены, чтобы вы могли обрезать его перед отправкой. Это также подталкивает вас, когда заголовок очень короткий, потому что заголовок из 20 символов тратит комнату, которую вы можете использовать для ключевых слов. Это рекомендации, а не правила - немного длинный заголовок не катастрофа - но видеть счет во время написания делает вас честным. Если вы много настраиваете заголовки и описания, то счетчик слов Удобен для более длинной копии, которая должна поражать цель длины.
В чем разница между SEO-тегами, Open Graph и Twitter-картами?
Они обслуживают разных потребителей, и знание того, что мешает вам думать, что вы закончили, когда вы освещали только один. Вот как три множества выстраиваются в ряд полей, которые они разделяют.
| определенный | SEO-тег | открытый график | твиттер-карта |
|---|---|---|---|
| Название страницы | <title> |
og:title |
twitter:title |
| конспект | meta name="description" |
og:description |
twitter:description |
| Предварительный просмотр изображения | -- | og:image |
twitter:image |
| канонический адрес | link rel="canonical" |
og:url |
twitter:url |
| Карточный стиль | -- | og:type |
twitter:card |
| атрибуция | meta name="author" |
og:site_name |
twitter:site |
Столбец SEO - это то, что Google читает для результата поиска Столбец Open Graph - это то, что читает большинство социальных и чат-платформ для своих ссылочных карт Столбец Twitter - это то, что читает Twitter/X. Перекрытие очевидно - заголовок и описание повторяются по всем трем - но потому, что каждая платформа выглядит только в своем собственном пространстве имен, пропуск столбца означает, что платформа возвращается к угадыванию.The Генератор метатегов Заполняет все три столбца из одной формы, чтобы вы никогда не оставляли угадывание платформы.
Нужны ли мне структурированные данные JSON-LD?
Мета-теги и структурированные данные отвечают на разные вопросы, поэтому полезные дополняют, а не заменяют друг друга. Мета-теги сообщают платформам, как отображать вашу страницу; JSON-LD сообщает поисковым системам, о чем ваша страница, в машиночитаемом способе, который может разблокировать богатые результаты.
JSON-LD — это блок JSON, завернутый в <script type="application/ld+json"> тег, который описывает вашу страницу как типизированную сущность - Веб-сайт, Статья, Продукт, Рецепт и так далее - с именованными свойствами. поисковые системы используют его, чтобы понять отношения и, в правильных случаях, чтобы показать улучшенные результаты, такие как подстроки статей, звездные рейтинги или часто задаваемые вопросы по аккордеонам непосредственно в поиске. Он не контролирует ваш фрагмент так, как это происходит с заголовком и описанием; он добавляет слой значения сверху.
выше Генератор метатегов излучает стартовый блок JSON-LD рядом с метатегами, напечатанный как веб-сайт или статья на основе вашего типа Open Graph и заполненный из тех же полей. Это прочная основа, которую вы можете расширить с помощью свойств, специфичных для типа. Структурированные данные стоит добавлять всякий раз, когда вы хотите иметь право на богатые результаты, хотя это не волшебный рычаг ранжирования - он включает функции, а не заставляет их. Для более широкой картины того, как эти части сочетаются друг с другом, Набор инструментов для веб-разработчиков Roundup покрывает окружающие инструменты, которые я использую.
Общие варианты использования генератора метатегов
Запуск новой страницы или сайта
очевидный. Каждой новой странице требуется заголовок, описание и социальная карта, а ввод полного набора SEO, открытого графа и тегов Twitter вручную утомителен и подвержен ошибкам. Заполнение формы один раз и скопирование полного, правильный блок превращает неудобную задачу в тридцать вторую, а предупреждения длины означают, что страница запускается с фрагментом, который отображается полностью, а не усеченно в первый день.
Исправление неверных или отсутствующих ссылок
Когда общая ссылка появляется без изображения или неправильного текста, причина почти всегда отсутствует или искажена Открыть Граф теги. Восстановление тегов с генератором - убедившись og:image, og:title, и og:description все присутствуют и правильны - исправляет предварительный просмотр После обновления, соответствующая платформа's кэш иногда нуждается в обновлении через его инструмент отладки, но сами теги выходят правильно.
Стандартизация метаданных в команде
В проекте с несколькими участниками метатеги дрейфуют: на одной странице есть теги Twitter, на другой нет, третья имеет описание в два раза превышающие рекомендуемую длину. Использование одного генератора в качестве ссылки на то, как выглядит полный набор тегов, заставляет всех создавать одну и ту же форму метаданных. Вывод выступает в качестве документации того, какие именно теги ожидают проект.
Подготовка метаданных для фреймворка
В Next.js, Nuxt, React или что-то подобное вы не вставляете сырое <meta> теги - вы подаете значения в API головы или метаданных. генератор по-прежнему полезен в качестве источника истины, для которого вам нужны теги и значения: заполните форму, прочитайте весь набор и переведите его в свой объект метаданных framework's. Он удаляет догадки о том, какой og: а twitter: поля для включения.
Зачем генерировать метатеги в браузере?
выше Генератор метатегов работает полностью на стороне клиента. заголовки, описания, URL-адреса и ссылки на изображения, которые вы вводите, остаются в вашем браузере и никогда не загружаются, и инструмент работает в автономном режиме после загрузки. Эта конфиденциальность имеет значение, потому что вы часто готовите метаданные для страниц, которые еще не являются общедоступными - неизданный продукт, клиент и #39;s черновик кампании, внутренний инструмент. Вставка этого в генератор на стороне сервера означает передачу ваших необъявленных планов кому-то другому и #39;s журналов; выполнение этого в браузере означает, что он никогда не покидает вашу машину.The Конфиденциальность данных в онлайн-инстру Руководство объясняет, почему я считаю это не подлежащим обсуждению.
Работа метаданных также подключается к нескольким соседним задачам. выше генератор пуль Создает чистый URL-адрес, который ваш канонический и og:url теги указывают на. выше Кодер сущностей HTML Полезен, когда вам нужно сбежать от упрямого персонажа. и тот кодер/декодер URL Дескрипторы кодирования для параметров запроса, которые иногда зависают от канонического URL. Вместе они охватывают небольшие, строгие рабочие места, которые правильно окружают доставку страницы.
часто задаваемые вопросы
Какие метатеги создаёт генератор?
Он создает стандартные теги SEO - заголовок, описание, ключевые слова, автор, роботы, язык, цвет темы и канонический - плюс теги Open Graph, такие как og:title, og:description, og:image и og:url, и соответствующие теги Twitter Card. Он также может излучать блок структурированных данных JSON-LD. Только заполняемые вами поля создают теги, поэтому выходные данные остаются чистыми.
Какой длины должно быть мое название и мета-описание?
Стремитесь к заголовку от 50 до 60 символов и описанию от 120 до 160 символов. Google усекает текст за эти точки, поскольку измеряет ширину в пикселях, а не точные символы. Генератор учитывается, когда вы печатаете, и предупреждает вас, когда заголовок или описание, вероятно, будут обрезаны в результатах поиска.
Что такое теги открытых графов и нужны ли они мне?
Открытые теги Graph управляют тем, как ваша страница выглядит, когда вы публикуете их на Facebook, LinkedIn, Slack, Discord и многих других платформах. Без них общая ссылка может не показывать ни изображение, ни неудобное резервное копирование. Если вам нужны привлекательные, предсказуемые предварительные просмотры ссылок везде, где вы делитесь своим контентом, настоятельно рекомендуется открыть теги графа, и генератор их строит для вас.
В чем разница между двумя типами Twitter Card?
На карте сводки показана небольшая квадратная миниатюра рядом с заголовком и описанием, а summary_large_image показывает большое изображение баннера над ними. Используйте карту с большим изображением, когда у вас есть широкое высокое качество обмена изображениями, в котором вы хотите доминировать в предварительном просмотре, и используйте сводку для более компактной карты. Генератор позволяет переключаться между ними и записывает правильное значение Twitter:Card.
Где поместить сгенерированные метатеги?
Вставьте блок внутри элемента HEAD вашей HTML-страницы, в идеале вверху перед другими скриптами. В такой фреймворке, как Next.js, React или Vue, добавляйте эквивалентные теги через голову фреймворка или API метаданных, используя сгенерированный HTML в качестве ссылки, чтобы именно для каких именно тегов и значений должны включить.
Нужен ли мне по-прежнему канонический URL-адрес, если у меня есть теги открытого графа?
да. Каноническая ссылка сообщает поисковым системам, какой URL является авторитарной версией страницы, чтобы избежать проблем с дубликатами содержания, в то время как og:url устанавливает URL-адрес, используемый в социальных предварительных просмотрах. Они служат разным целям, даже если значения обычно идентичны, поэтому установка обоих является хорошей практикой.
Является ли генератор метатегов бесплатным и частным?
да. Это совершенно бесплатно без ограничений, и каждый тег встроен в JavaScript в вашем браузере. Вводимые вами текст, URL-адреса и изображения никогда не отправляются на сервер, поэтому вы можете безопасно подготовить метаданные для неопубликованных или внутренних страниц.
Улучшает ли добавление метатегов мой рейтинг поиска?
Мета-теги помогают поисковым системам и социальным платформам правильно отображать вашу страницу, но они являются одним из многих факторов. Сильное название и описание могут повысить рейтинг кликов, а структурированные данные могут обеспечить богатые результаты, но качество контента, ссылки и работоспособность сайта по-прежнему повышают рейтинг. Относитесь к хорошим метатегам как к необходимой основе, а не к ярлыку ранжирования.
