Schema.org

Выводим микроразметку в разных ситуациях

BreadcrumbList - разметка для хлебных крошек

Обращаем внимание, что у последнего элемента нет ссылки и ссылка прописана в meta теге

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/dresses">
            <span itemprop="name">Dresses</span>
        </a>
        <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/dresses/real">
            <span itemprop="name">Real Dresses</span>
        </a>
        <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <meta itemprop="item" content="https://example.com/dresses/real/man" />
        <span itemprop="name">Real Dresses</span>
        <meta itemprop="position" content="3" />
    </li>
</ol>

Источник: https://t.me/drmaxseo/56

Как выбрать категорию бизнеса для микроразметки.

Все компании должны добавлять разметку Organization - Schema.org на свои сайты. С помощью этой разметки вы подтверждаете поисковым системам кто вы и чем занимаетесь.

Если у вас правильная, развернутая страница «О компании» с расписанными видами деятельности, юридическими и физическими реквизитами, с корпоративными изображениями компании/завода/офиса – то рекомендую внедрять структурированные данные Organization и на главную, и на страницу «О компании». Разметка (структурированные данные) должны быть максимально заполнены.

В иных местах и на иных страницах эта разметка не нужна.

Здесь указываем (и это минимум, который вы должны включить в разметку):
• Тип компании
• Название компании
• Официальный сайт
• Адрес
• Официальный логотип
• Описание
• Социальные аккаунты
• Уникальный идентификационный URL

Оффлайн компании должны использовать «Корпорацию», а не более общую «Организацию». Собственно говоря, большинство компаний должны использовать Corporation, как более точный тип, чем просто "Организация" (если нет иных типов первого уровня, более подходящих для вас).

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

В идеале вы должны выбрать ту же категорию, что и в Google My Business (GBP). Однако, поскольку My Business и Schema.org не используют одну и ту же категоризацию, это не всегда возможно. Выберите максимально близкое совпадение. Их более 100 штук, так что можно выбрать подходящее.

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

http://www.productontology.org/doc/

и добавьте «additonalType» к вашей разметке.

Например, если я управляю пивнушкой – разливушкой и хочу достаточно точно описать свой магазинчик, то LiquorStore не совсем подходит.

Ищем описание пивного магазина (Beer Shop) в Википедии:

https://en.wikipedia.org/wiki/Beer_shop

берем Beer_shop - часть URL после /wiki/ и подставляем эту часть к productontology.org. Вот что выходит:

http://www.productontology.org/doc/Beer_shop

Для нас крайне важно описание (реферат), которое продуктонтология подтягивает из вики. Опираясь на это описание Google и будет выстраивать сущности, связанные с этой пивнушкой.

В итоге получаем вот такую конструкцию:

"additionalType" : "http://www.productontology.org/doc/Beer_shop "

Которую и добавляем в свою микроразметку

————————-
цитируется по "SEO Монстр Next"

Разметка формы поиска

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

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "url": "https://wseo.pw/",
        "potentialAction": {
            "@type": "SearchAction",
            "target": {
                "@type": "EntryPoint",
                "urlTemplate": "https://wseo.pw/search/?q={input-name}"
            },
            "query-input": "required name=input-name"
        }
    }
</script>

Search

• Wrap search components in a parent element role="search" to increase their discoverability to assistive technologies.
• Whenever possible, use the label element to explicitly associate text with form elements. The for attribute of the label must exactly match the id of the form control.
• Some form fields do not need explicit label elements, when next to a button with descriptive text. Ex. search field next to a button labeled search. In these cases you should still have a label in the markup, but you can hide it visually.
• Note that placeholders are not recognized by all assistive technologies, and thus are not adequate replacements for appropriate labeling. Additionally, assistive technologies that do announce placeholders will read the placeholder first, then the input's label and then type of input. So be sure not to repeat an input's label as its placeholder, otherwise it will be announced multiple times.

WCAG 2.1 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)

1.3.1 Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

2.4.6 Headings and Labels - Headings and labels describe topic or purpose. (Level AA)

3.3.2 Labels or Instructions - Labels or instructions are provided when content requires user input. (Level A)

4.1.2 Name, Role, Value - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Option #1: Search Input with Visible Label

  <div role="search">
    <label for="search_1" style="display: block;">Search the site:</label>
    <input type="search" name="search" id="search_1" class="search-form__input">
    <button type="submit"><span class="visuallyhidden">Perform </span>Search</button>
  </div>
  

Option #2: Hide the label element

  <div role="search">
    <label for="search_2" class="visuallyhidden">Search the site</label>
    <input type="search" name="search" id="search_2" class="search-form__input" placeholder="search for...">
    <button type="submit"><span class="visuallyhidden">Perform </span>Search</button>
  </div>
  

Option #3: Use aria-label

  <div role="search">
    <input type="search" name="search" aria-label="Search">
    <button type="submit"><span class="visuallyhidden">Perform </span>Search</button>
  </div>

Show Markup Example

<section class="search-section">
  <h3>Option #1: Search Input with Visible Label</h3>
  <div role="search">
    <label for="search_1" style="display: block;">Search the site:</label>
    <input type="search" name="search" id="search_1" class="search-form__input" />
    <button type="submit"><span class="visuallyhidden">Perform</span>Search</button>
  </div>
<div class="break"></div>
<h3>Option #2: Hide the label element</h3>

<div role="search">

<label for="search_2" class="visuallyhidden">Search the site</label>

<input type="search" name="search" id="search_2" class="search-form__input" placeholder="search for..." />

<button type="submit"><span class="visuallyhidden">Perform</span>Search</button>

</div>
<div class="break"></div>
<h3>Option #3: Use aria-label</h3>

<div role="search">

<input type="search" name="search" aria-label="Search">

<button type="submit"><span class="visuallyhidden">Perform</span>Search</button>

</div>

</section>

Copy

 Copied!