Хлебные крошки с иконками SVG

Создание Microdata Schema.org Хлебные крошки с иконками SVG

Создание микроданных Breadcrumbs Schema.org С иконками SVG с использованием схемы Breadcrumblist. В этой статье я приведу пример установки хлебных крошек с добавлением иконки SVG, которая, безусловно, облегчит загрузку блога.

Если в коде, которые уже установлен в вашем блоге используется значок Font Awesome, вы можете установить и попробовать этот новый тип bradcrumbs schema.org. В дополнение к типу установки, это довольно новое, добавление иконки SVG также является одним из основных факторов при установке этой схемы schema.org. Конечно, его функция заключается в том, чтобы облегчить бремя загрузки блога, который ранее был довольно тяжелым из-за использования Awesome Font Icon.

Установка крошек по умолчанию на предыдущих шаблонах была с использованием разметки data-vocabulary.org. Но теперь последнее новшество от Jebis Breadcrumbs стало более совершенным и более дружественным к SEO, а именно система микроданных Schema.org.

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

важным является список навигации, что существует в схеме хлебных крошек. Но мы должны реализовать то, что было рекомендовано поисковыми системами, такими как Google, Bing, Yandex и т. Д. Одним из них является создание крошек с использованием разметки schema.org.

Для процесса установки, пожалуйста, следуйте следующему руководству.

Как установить Schema.org Формат хлебных крошек

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

В этом уроке я расскажу о 2 типах schema.org, каждый из которых использует иконку SVG. Поэтому позже, пожалуйста, выберите по своему вкусу.

Как установить хлебные крошки на Schema.org

1. Пожалуйста, войдите в свою учетную запись Blogger ➤ Нажмите тему ➤ Изменить HTML

2. Скопируйте код ниже и поместите его перед кодом <b:includable id='comment-form' var='post'> в новых темах <b:includable id='commentForm' var='post'> или после кода <b:includable id='backlinks' var='post'>↔</b:includable>.
Но если код «хлебной крошки» уже существует в шаблоне вашего блога, удалите его и замените все на код ниже.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' title='Home' itemprop='item'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + "?&max-results=16"' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != "true"'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if>
</b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

3. Добавьте следующий стиль CSS перед кодом ]]></b:skin>, чтобы ваши хлебные крошки выглядели аккуратно.

/* Breadcrumb */
.breadcrumbs {
background: #fff;
line-height: 1.2em;
width: auto;
overflow: hidden;
margin: 0;
padding: 10px 0;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
font-size: 80%;
color: #888;
font-weight: 400;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
white-space: nowrap
}
.breadcrumbs a {
display: inline-block;
text-decoration: none;
transition: all .3s ease-in-out;
color: #666;
font-weight: 400
}
.breadcrumbs a:hover {
color: #11589D
}
.breadcrumbs svg {
width: 16px;
height: 16px;
vertical-align: -4px
}
.breadcrumbs svg path {
fill: #666
}

4. Наконец, сохраните следующий код, где вы хотите отобразить хлебные крошки или после <b:includable id='postTitle' var='post'>

<b:include data='posts' name='breadcrumb'/>

Также, вы можете сохранить его под кодом, <b:includable id='main' var='top'> и хлебные крошки появятся в верхней части сообщения.

Как установить SEO дружественные хлебные крошки только с одним ярлыком

Для второго способа есть небольшая разница во внешнем виде, если использовать SVG Icon с schema.org Breadcrumblist. В дополнение к тому, как это выглядит, эти хлебные крошки также отображают только 1 ярлык, так что это очень оптимально для SEO. Это очень полезно, если в постах, которые мы делаем, много ярлыков или тегов. Если вы хотите попробовать его, пожалуйста, следуйте следующему руководству по установке хлебных крошек в вашем блоге.

1. Пожалуйста, замените свои предыдущие хлебные крошки на этот код

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg class='homesvg' viewBox='0 0 24 24'><path d='M12,3L20,9V21H15V14H9V21H4V9L12,3Z'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<b:if cond='data:num == (data:post.labels.size - 1)'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + "?&max-results=10"' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta content='2' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
</b:if>
</b:loop>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

2. Затем, чтобы иконка SVG выглядела круто, замените ваши хлебные крошки следующим CSS-кодом.

.breadcrumbs{line-height:1.2em;width:auto;overflow:hidden;padding:0;margin:0 auto 20px;font-size:90%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:inherit;font-weight:400}
.breadcrumbs a:hover{color:inherit}
.breadcrumbs svg{width:20px;height:20px;vertical-align:-5px;margin:0 -4px}
.breadcrumbs svg.homesvg{width:22px;height:22px;margin-right:0}
.breadcrumbs svg path{fill:#c8c8c8}
.breadcrumbs svg.homesvg path{fill:#999}

Таким образом, это руководство по ведению блога о том, как сделать хлебные крошки микроданными Schema.org с помощью SVG Icon, что, безусловно, круто и оптимизировано для SEO и подходит для поисковой консоли Google и инструмента для тестирования структуры данных. Надеюсь, это может быть применено на вашем блоге.

Cancel