krutovgerman2007

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

8 posts in this topic

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

У меня есть сайт с аудиосказками. Так вот структура выглядит упрощенно так:

<body>
	<header><!-- Шапка --></header>
	<nav><!-- Меню --></nav>
	<main>
		<article>
			<!-- Заголовок / Плеер для прослушивания / Немного контента -->
		</article>
	</main>
	<footer><!-- Футер --></footer>
</body>

Вопрос такой: куда и каким элементом лучше всего вставить кнопки "Следующая сказка" / "Предыдущая сказка"?

Это вроде бы и не навигация, но и в article не очень-то подходит...

Share this post


Link to post
Share on other sites
12 минуты назад, krutovgerman2007 сказал:

Начитался я, что гугл любит правильно размеченные страницы.

Вероятно, гугл любит правильно размеченные страницы с помощью микроразметки, а у вас здесь просто щаблон страницы

ToneR and krutovgerman2007 like this

Share this post


Link to post
Share on other sites
3 минуты назад, petroff сказал:

Вероятно, гугл любит правильно размеченные страницы с помощью микроразметки, а у вас здесь просто щаблон страницы

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

<!-- Social tags -->
<meta property="og:title" content="«Калле Блумквист рискует жизнью» - слушать онлайн - Аудиосказка"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="Слушать аудиосказку Калле Блумквист рискует жизнью из серии Калле Блумквист (Астрид Линдгрен) в формате .mp3 без скачивания онлайн. А также у нас Вы можете просто читать или скачать эту сказку бесплатно."/>
<meta property="og:image" content="/preview-files/kalle-blumkvist-riskuet-zhiznyu-medium.jpg"/>

P.S. Ну а вопрос тот же остается: в какой элемент и куда поместить ссылки "Следующая сказка" / "Предыдущая сказка"?

Share this post


Link to post
Share on other sites
3 часа назад, krutovgerman2007 сказал:

@petroff спасибо за наводку. Разметил данные. Гуглу вроде нравится: https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Fweb-skazki.ru%2Fbook%2Fpastushka-i-trubochist :)

Хм, как-то просто и валидацию проходит. У меня обычно сложнее и со слезами код получается. Покажите весь код разметки, а то туго соображаю, когда html сжат

krutovgerman2007 likes this

Share this post


Link to post
Share on other sites
26 минут назад, petroff сказал:

Хм, как-то просто и валидацию проходит. У меня обычно сложнее и со слезами код получается. Покажите весь код разметки, а то туго соображаю, когда html сжат

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

<!DOCTYPE html>
<html lang="ru">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="Слушать аудиосказку Беспризорная кошка из серии Рассказы о животных (Борис Житков) в формате .mp3 без скачивания онлайн. А также у нас Вы можете просто читать или скачать эту сказку бесплатно.">
      <meta name="keywords" content="беспризорная, кошка, сказка, текст, аудиосказка, борис, житков, бесплатно, слушать, серия, рассказы, о, животных, онлайн">
      <link rel="manifest" href="https://web-skazki.ru/site.webmanifest">
      <link rel="shortcut icon" href="https://web-skazki.ru/favicon.ico">
      <link rel="apple-touch-icon" sizes="180x180" href="https://web-skazki.ru/img/favicons/apple-touch-icon.png">
      <link rel="icon" type="image/png" sizes="32x32" href="https://web-skazki.ru/img/favicons/favicon-32x32.png">
      <link rel="icon" type="image/png" sizes="16x16" href="https://web-skazki.ru/img/favicons/favicon-16x16.png">
      <link rel="mask-icon" href="https://web-skazki.ru/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
      <meta name="msapplication-config" content="https://web-skazki.ru/img/favicons/browserconfig.xml">
      <meta name="msapplication-TileColor" content="#17a2b8">
      <meta name="theme-color" content="#17a2b8">
      <!-- Social tags -->
      <meta property="og:title" content="«Беспризорная кошка» - слушать онлайн - Аудиосказка"/>
      <meta property="og:type" content="website"/>
      <meta property="og:description" content="Слушать аудиосказку Беспризорная кошка из серии Рассказы о животных (Борис Житков) в формате .mp3 без скачивания онлайн. А также у нас Вы можете просто читать или скачать эту сказку бесплатно."/>
      <meta property="og:image" content="https://web-skazki.ru/preview-files/besprizornaya-koshka-medium.jpg"/>
      <meta property="og:url" content="https://web-skazki.ru/book/besprizornaya-koshka"/>
      <title>«Беспризорная кошка» - слушать онлайн - Аудиосказка</title>
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <!-- Main css -->
      <link rel="stylesheet" href="https://web-skazki.ru/css/main.min.css?v=1.2.0" crossorigin="anonymous">
      <!-- Add to home screen css -->
      <link rel="stylesheet" type="text/css" href="https://web-skazki.ru/add-to-homescreen/style/addtohomescreen.min.css">
      <!-- Add to home screen js -->
      <script type="text/javascript" src="https://ff.kis.v2.scr.kaspersky-labs.com/B45AF5E9-2A84-664A-9431-1D210226EBFB/main.js" charset="UTF-8"></script><script src="https://web-skazki.ru/add-to-homescreen/src/addtohomescreen.min.js"></script>
      <script>addToHomescreen();</script>
   </head>
   <body class="container ">
      <!-- Шапка -->
      <header>
         <h1>«Беспризорная кошка» - слушать онлайн - Аудиосказка</h1>
      </header>
      <!-- Навигация -->
      <nav class="navbar navbar-expand-lg navbar-light navbar-center row">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Показать меню">
         <span class="navbar-toggler-icon text-white"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
               <li class="nav-item">
                  <a class="nav-link text-white" href="/">Главная</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link text-white" href="/category/do-3-let">до 3 лет</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link text-white" href="/category/ot-3-do-5-let">от 3 до 5 лет</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link text-white" href="/category/ot-5-do-8-let">от 5 до 8 лет</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link text-white" href="/category/ot-8-do-12-let">от 8 до 12 лет</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link text-white" href="/author">Список авторов</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link text-white" href="/book-series">Серии книг</a>
               </li>
            </ul>
         </div>
         <!-- Поиск -->
         <form class="form-inline" id="head-search" method="get" action="/#list-table">
            <input class="form-control mr-2" id="head-search-input" type="search" name="q" placeholder="Что ищем?" value="" aria-label="Поиск">
            <button class="btn btn-success d-flex justify-content-center my-2 my-sm-0" type="submit">
            <i class="material-icons">search</i>
            </button>
         </form>
      </nav>
      <!-- Основное содержимое страницы -->
      <main>
         <!-- Сама книга для прослушивания -->
         <article itemscope itemtype="https://schema.org/AudioObject" class="audio-book">
            <h2>Слушать «Беспризорная кошка»</h2>
            <img itemprop="image" class="audio-book-img img-thumbnail" src="https://web-skazki.ru/preview-files/besprizornaya-koshka-small.jpg" alt="Аудиосказка Беспризорная кошка">
            <p itemprop="description">На сайте WEB-SKAZKI.RU вы можете слушать онлайн аудиосказку <span itemprop="name">«Беспризорная кошка»</span> автора <a href="/author/boris-zhitkov"><span itemprop="author">Борис Житков</span></a> из серии <a href="/book-series/rasskazy-o-zhivotnykh">«Рассказы о животных»</a> в формате <span itemprop="encodingFormat">.mp3</span> длительностью <span itemprop="duration">15:20</span>. А также вы можете просто скачать или <a href="#book-text-start">читать онлайн сказку «Беспризорная кошка»</a> бесплатно.</p>
            <div class="audio-book-navigation row">
               <div class="col-3 col-md-2 col-lg-5 text-left play-next">
                  <a class='btn btn-success d-flex justify-content-start' href='/book/galka'>
                  <i class='material-icons'>fast_rewind</i>
                  <span class="d-none d-lg-block">Галка</span>
                  </a>
               </div>
               <div class="col-6 col-md-8 col-lg-2 text-center">&nbsp;</div>
               <div class="col-3 col-md-2 col-lg-5 text-right play-prew">
                  <a class='btn btn-success d-flex justify-content-end' href='/book/vecher'>
                  <span class="d-none d-lg-block">Вечер</span>
                  <i class='material-icons'>fast_forward</i>
                  </a>
               </div>
            </div>
            <!-- Проигрыватель -->
            <div id="aplayer"></div>
            <!-- Дополнительные кнопки -->
            <div class="audio-book-options row">
               <div class="col-6 col-sm-4 text-center book-navigation">
                  <a class="btn btn-secondary d-flex justify-content-center" href="/book-series/rasskazy-o-zhivotnykh"><i class="material-icons">keyboard_arrow_left</i> Все книги из этой серии</a>
               </div>
               <div class="col-6 col-sm-4 download book-navigation">
                  <a itemprop="url" class="btn btn-success d-flex justify-content-center" href="/audio-files/besprizornaya-koshka.mp3" target="_blank" download title="Скачать книгу Беспризорная кошка бесплатно"><i class="material-icons">get_app</i>
                  <span>Скачать</span>
                  </a>
               </div>
               <div class="col-12 col-sm-4 text-center book-navigation">
                  <a class="btn btn-primary d-flex justify-content-center" href="/author/boris-zhitkov" target="_blank" title="Все книги автора Борис Житков"><i class="material-icons">face</i> Все книги автора</a>
               </div>
            </div>
            <h2>Читать «Беспризорная кошка» из серии книг «Рассказы о животных»</h2>
            <a id="book-text-start"></a>
            <div itemprop="text" class="book-text">
               <p>I</p>
               <p>Я жил на берегу моря и ловил рыбу. У меня была лодка, сетки и разные удочки. Перед домом стояла будка, и на цепи огромный пес. Мохнатый, весь в черных пятнах, — Рябка. Он стерег дом. Кормил я его рыбой. Я работал с мальчиком, и кругом на три версты никого не было. Рябка так привык, что мы с ним разговаривали, и очень простое он понимал. Спросишь его: «Рябка, где Володя?» Рябка хвостом завиляет и повернет морду, куда Володька ушел. Воздух носом тянет, и всегда верно. Бывало, придешь с моря ни с чем, а Рябка ждет рыбы. Вытянется на цепи, подвизгивает.</p>
               <p>Обернешься к нему и скажешь сердито:</p>
               <p>— Плохи наши дела, Рябка! Вот как…</p>
               <p>Он вздохнет, ляжет и положит на лапы голову. Уж и не просит, понимает.</p>
               <p>Когда я надолго уезжал в море, я всегда Рябку трепал по спине и уговаривал, чтобы хорошо стерег. И вот хочу отойти от него, а он встанет на задние лапы, натянет цепь и обхватит меня лапами. Да так крепко — не пускает. Не хочет долго один оставаться: и скучно и голодно.</p>
               <p>Хорошая была собака!</p>
               <p>II</p>
               <p>А вот кошки у меня не было, и мыши одолевали. Сетки развесишь, так они в сетки залезут, запутаются и перегрызут нитки, напортят. Я их находил в сетках — запутается другая и попадется. И дома все крадут, что ни положи.</p>
               <p>Вот я и пошел в город. Достану, думаю, себе веселую кошечку, она мне всех мышей переловит, а вечером на коленях будет сидеть и мурлыкать. Пришел в город. По всем дворам ходил — ни одной кошки. Ну нигде!</p>
               <p>Я стал у людей спрашивать:</p>
               <p>— Нет ли у кого кошечки? Я даже деньги заплачу, дайте только.</p>
               <p>А на меня сердиться стали:</p>
               <p>— До кошек ли теперь? Всюду голод, самим есть нечего, а тут котов корми.</p>
               <p>А один сказал:</p>
               <p>— Я бы сам кота съел, а не то, что его, дармоеда, кормить!</p>
               <p>Вот те и на! Куда же это все коты девались? Кот привык жить на готовеньком: нажрался, накрал и вечером на теплой плите растянулся. И вдруг такая беда! Печи не топлены, хозяева сами черствую корку сосут. И украсть нечего. Да и мышей в голодном доме тоже не сыщешь.</p>
               <p>Перевелись коты в городе… А каких, может быть, и голодные люди приели. Так ни одной кошки и не достал.</p>
               <p>III</p>
               <p>Настала зима, и море замерзло. Ловить рыбу стало нельзя. А у меня было ружье. Вот я зарядил ружье и пошел по берегу. Кого-нибудь подстрелю: на берегу в норах жили дикие кролики.</p>
               <p>Вдруг, смотрю, на месте кроличьей норы большая дырка раскопана, как будто бы ход для большого зверя. Я скорее туда.</p>
               <p>Я присел и заглянул в нору. Темно. А когда пригляделся, вижу: там в глубине два глаза светятся.</p>
               <p>Что, думаю, за зверь такой завелся?</p>
               <p>Я сорвал хворостинку — и в нору. А оттуда как зашипит!</p>
               <p>Я назад попятился. Фу ты! Да это кошка!</p>
               <p>Так вот куда кошки из города переехали!</p>
               <p>Я стал звать:</p>
               <p>— Кис-кис! Кисанька! — и просунул руку в нору.</p>
               <p>А кисанька как заурчит, да таким зверем, что я и руку отдернул.</p>
               <p>Ну тебя, какая ты злая!</p>
               <p>Я пошел дальше и увидел, что много кроличьих нор раскопано. Это кошки пришли из города, раскопали пошире кроличьи норы, кроликов выгнали и стали жить по-дикому.</p>
               <p>IV</p>
               <p>Я стал думать, как бы переманить кошку к себе в дом.</p>
               <p>Вот раз я встретил кошку на берегу. Большая, серая, мордастая. Она, как увидела меня, отскочила в сторону и села. Злыми глазами на меня глядит. Вся напружилась, замерла, только хвост вздрагивает. Ждет, что я буду делать.</p>
               <p>А я достал из кармана корку хлеба и бросил ей. Кошка глянула, куда корка упала, а сама ни с места. Опять на меня уставилась. Я обошел стороной и оглянулся: кошка прыгнула, схватила корку и побежала к себе домой, в нору.</p>
               <p>Так мы с ней часто встречались, но кошка никогда меня к себе не подпускала. Раз в сумерки я ее принял за кролика и хотел уже стрелять.</p>
               <p>V</p>
               <p>Весной я начал рыбачить, и около моего дома запахло рыбой. Вдруг слышу — лает мой Рябчик. И смешно как-то лает: бестолково, на разные голоса, и подвизгивает. Я вышел и вижу: по весенней траве не торопясь шагает к моему дому большая серая кошка. Я сразу ее узнал. Она нисколько не боялась Рябчика, даже не глядела на него, а выбирала только, где бы ей посуше ступить. Кошка увидала меня, уселась и стала глядеть и облизываться. Я скорее побежал в дом, достал рыбешку и бросил.</p>
               <p>Она схватила рыбу и прыгнула в траву. Мне с крыльца было видно, как она стала жадно жрать. Ага, думаю, давно рыбы не ела.</p>
               <p>И стала с тех пор кошка ходить ко мне в гости.</p>
               <p>Я все ее задабривал и уговаривал, чтобы перешла ко мне жить. А кошка все дичилась и близко к себе не подпускала. Сожрет рыбу и убежит. Как зверь.</p>
               <p>Наконец мне удалось ее погладить, и зверь замурлыкал. Рябчик на нее не лаял, а только тянулся на цепи, скулил: ему очень хотелось познакомиться с кошкой.</p>
               <p>Теперь кошка целыми днями вертелась около дома, но жить в дом не хотела идти.</p>
               <p>Один раз она не пошла ночевать к себе в нору, а осталась на ночь у Рябчика в будке. Рябчик совсем сжался в комок, чтобы дать место.</p>
               <p>VI</p>
               <p>Рябчик так скучал, что рад был кошке.</p>
               <p>Раз шел дождь. Я смотрю из окна — лежит Рябка в луже около будки, весь мокрый, а в будку не лезет.</p>
               <p>Я вышел и крикнул:</p>
               <p>— Рябка! В будку!</p>
               <p>Он встал, конфузливо помотал хвостом. Вертит мордой, топчется, а в будку не лезет.</p>
            </div>
            <!-- Постраничная навигация -->
            <nav class="book-navigation row">
               <div class="col-4 col-md-3 col-lg-2 text-left play-next">
                  &nbsp;
               </div>
               <div class="col-4 col-md-6 col-lg-8 text-center">
                  стр. 1 из 3
               </div>
               <div class="col-4 col-md-3 col-lg-2 text-right play-prew">
                  <a class='btn btn-success d-flex justify-content-end' href='/book/besprizornaya-koshka/2#book-text-start'>c.&nbsp;2&nbsp;<i class='material-icons'>fast_forward</i></a>
               </div>
            </nav>
         </article>
      </main>
      <!-- Футер -->
      <footer class="row">
         <div class="col-8 col-md-10 text-center text-white">Сделано с ❤ к детям</div>
         <div class="col-4 col-md-2 text-center"><a href="/about" class="text-white">О сайте</a></div>
      </footer>
      <!-- Go up button -->
      <button onclick="topFunction()" id="goUp" class="btn btn-info" title="Наверх"><i class='material-icons'>keyboard_arrow_up</i></button>
      <link rel="stylesheet" href="https://web-skazki.ru/src-player/APlayer.min.css">
      <script src="https://web-skazki.ru/src-player/APlayer.min.js"></script>
      <script>
         (function () {
             const ap = new APlayer({
                 container: document.getElementById('aplayer'),
                 mini: false,
                 loop: 'none',
                 theme: '#007bff',
                 volume: 1,
                 audio: [
                                                                     {
                         name: 'Беспризорная кошка',
                         artist: 'Борис Житков',
                         url: '/audio-files/besprizornaya-koshka.mp3'
                     }
                                 ]
             });
         
             /* If we have #play (it means autoplay) */
             if (window.location.hash === '#play') {
                 ap.play();
             }
         
             /* Activate auto play of next book */
                     ap.on('ended', function () {
                 /*if (getCookie('autoPlayNextBook') !== undefined) {*/
                 setTimeout(function () {
                     window.location.href = '/book/vecher#play';
                 }, 5000);
                 /*}*/
             });
             
             /* Switch to last audio */
             if (getCookie('lastAudioIndex') !== undefined) {
                 ap.list.switch(parseInt(getCookie('lastAudioIndex')));
             }
         
             /* Switch to last time */
             if (getCookie('lastAudioTime') !== undefined) {
                 /* We need some time after the prev step */
                 setTimeout(function () {
                     var lastAudioTime = parseInt(getCookie('lastAudioTime'));
         
                     /* Go 15 sec back (for memory: wat is happend) */
                     if (lastAudioTime > 15) {
                         lastAudioTime = lastAudioTime - 15;
                     } else {
                         lastAudioTime = 0;
                     }
                     ap.seek(lastAudioTime);
                 }, 500);
             }
         
             /* Save current audio (for next time playing: tomorrow / in 2 days) */
             ap.on('listswitch', function (audio) {
                 var path = window.location.pathname;
                 setCookie('lastAudioIndex', audio.index, false, path);
             });
         
             /* Save current time (for next time playing: tomorrow / in 2 days) */
             setInterval(function () {
                 var path = window.location.pathname;
                 setCookie('lastAudioTime', Math.ceil(ap.audio.currentTime), false, path);
             }, 5000);
         })();
         
         /**
          * Get cookie value by name
          *
          * @param cookieName
          * @returns string|bool
          */
         function getCookie(cookieName) {
             var name = cookieName + "=";
             var allCookieArray = document.cookie.split(';');
             for (var i = 0; i < allCookieArray.length; i++) {
                 var temp = allCookieArray[i].trim();
                 if (temp.indexOf(name) == 0)
                     return temp.substring(name.length, temp.length);
             }
             return undefined;
         }
         
         /**
          * Set cookie
          *
          * @param name
          * @param value
          * @param days
          * @param path
          */
         function setCookie(name, value, days, path) {
             var date, expires;
             if (days) {
                 date = new Date();
                 date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                 expires = "; expires=" + date.toGMTString();
             } else {
                 expires = "";
             }
         
             if (path === undefined) {
                 path = '/';
             }
         
             document.cookie = name + "=" + value + expires + "; path=" + path;
         }
      </script><!--LiveInternet counter-->
      <script>
         new Image().src = "//counter.yadro.ru/hit?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();
      </script>
      <!--/LiveInternet-->
      <!-- Global site tag (gtag.js) - Google Analytics -->
      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-44498610-4"></script>
      <script>
         window.dataLayer = window.dataLayer || [];
         function gtag() {
             dataLayer.push(arguments);
         }
         gtag('js', new Date());
         
         gtag('config', 'UA-44498610-4');
      </script>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      <script src="https://web-skazki.ru/js/main.min.js?v=1.2.0" crossorigin="anonymous"></script>
   </body>
</html>

 

Share this post


Link to post
Share on other sites
В 08.05.2019 в 8:34 PM, krutovgerman2007 сказал:

Так что буду благодарен даже за самые тривиальные замечания и советы

Уместен ли тег article, когда там же обозначен аудио-объект?

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

krutovgerman2007 likes this

Share this post


Link to post
Share on other sites
3 часа назад, petroff сказал:

Уместен ли тег article, когда там же обозначен аудио-объект?

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

1. По поводу <article>: вот что я вычитал (https://noteskeeper.ru/54/).

Цитата

  article -  «независимая часть документа или сайта». Эта часть должна иметь смысл вне зависимости от остального содержания. Например, это может быть статья в блоге или форуме, комментарий. Так же как и section внутри этого тега могут размещать верхний и нижний колонтитулы.

2. Еще раз спасибо за добрый совет. Разметил все элементы, какие смог найти на Schema.org. Если ты сможешь подсказать, какие я еще не учел, то буду премного благодарен. Вот валидация: https://search.google.com/structured-data/testing-tool?hl=ru#url=https%3A%2F%2Fweb-skazki.ru%2Fbook%2Fkhrabryy-utyenok. Вот код:

<!DOCTYPE html>
<html lang="ru">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="Слушать аудиосказку Храбрый утёнок из серии Рассказы о животных (Борис Житков) в формате .mp3 без скачивания онлайн. А также у нас Вы можете просто читать или скачать эту сказку бесплатно.">
      <meta name="keywords" content="храбрый, утёнок, сказка, текст, аудиосказка, борис, житков, бесплатно, слушать, серия, рассказы, о, животных, онлайн">
      <link rel="manifest" href="https://web-skazki.ru/site.webmanifest">
      <link rel="shortcut icon" href="https://web-skazki.ru/favicon.ico">
      <link rel="apple-touch-icon" sizes="180x180" href="https://web-skazki.ru/img/favicons/apple-touch-icon.png">
      <link rel="icon" type="image/png" sizes="32x32" href="https://web-skazki.ru/img/favicons/favicon-32x32.png">
      <link rel="icon" type="image/png" sizes="16x16" href="https://web-skazki.ru/img/favicons/favicon-16x16.png">
      <link rel="mask-icon" href="https://web-skazki.ru/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
      <meta name="msapplication-config" content="https://web-skazki.ru/img/favicons/browserconfig.xml">
      <meta name="msapplication-TileColor" content="#17a2b8">
      <meta name="theme-color" content="#17a2b8">
      <!-- Social tags -->
      <meta property="og:title" content="«Храбрый утёнок» - слушать онлайн - Аудиосказка"/>
      <meta property="og:type" content="website"/>
      <meta property="og:description" content="Слушать аудиосказку Храбрый утёнок из серии Рассказы о животных (Борис Житков) в формате .mp3 без скачивания онлайн. А также у нас Вы можете просто читать или скачать эту сказку бесплатно."/>
      <meta property="og:image" content="https://web-skazki.ru/preview-files/khrabryy-utyenok-medium.jpg"/>
      <meta property="og:url" content="https://web-skazki.ru/book/khrabryy-utyenok"/>
      <title>«Храбрый утёнок» - слушать онлайн - Аудиосказка</title>
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <!-- Main css -->
      <link rel="stylesheet" href="https://web-skazki.ru/css/main.min.css?v=1.2.0" crossorigin="anonymous">
      <!-- Add to home screen css -->
      <link rel="stylesheet" type="text/css" href="https://web-skazki.ru/add-to-homescreen/style/addtohomescreen.min.css">
      <!-- Add to home screen js -->
      <script src="https://web-skazki.ru/add-to-homescreen/src/addtohomescreen.min.js"></script>
      <script>addToHomescreen();</script>
   </head>
   <body itemscope itemtype="https://schema.org/WebPage" class="container ">
      <!-- Шапка -->
      <header itemscope itemtype="https://schema.org/WPHeader">
         <h1 itemprop="name">«Храбрый утёнок» - слушать онлайн - Аудиосказка</h1>
      </header>
      <!-- Навигация -->
      <nav class="navbar navbar-expand-lg navbar-light navbar-center row">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Показать меню">
         <span class="navbar-toggler-icon text-white"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNav">
            <ul itemscope itemtype="https://schema.org/SiteNavigationElement" class="navbar-nav">
               <li itemprop="name" class="nav-item">
                  <a itemprop="url" class="nav-link text-white" href="/">Главная</a>
               </li>
               <li itemprop="name" class="nav-item">
                  <a itemprop="url" class="nav-link text-white" href="/category/do-3-let">до 3 лет</a>
               </li>
               <li itemprop="name" class="nav-item">
                  <a itemprop="url" class="nav-link text-white" href="/category/ot-3-do-5-let">от 3 до 5 лет</a>
               </li>
               <li itemprop="name" class="nav-item">
                  <a itemprop="url" class="nav-link text-white" href="/category/ot-5-do-8-let">от 5 до 8 лет</a>
               </li>
               <li itemprop="name" class="nav-item">
                  <a itemprop="url" class="nav-link text-white" href="/category/ot-8-do-12-let">от 8 до 12 лет</a>
               </li>
               <li itemprop="name" class="nav-item">
                  <a itemprop="url" class="nav-link text-white" href="/author">Список авторов</a>
               </li>
               <li itemprop="name" class="nav-item">
                  <a itemprop="url" class="nav-link text-white" href="/book-series">Серии книг</a>
               </li>
            </ul>
         </div>
         <!-- Поиск -->
         <form itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction" class="form-inline" id="head-search" method="get" action="/#list-table">
            <meta itemprop="target" content="https://web-skazki.ru/?q={query}"/>
            <input itemprop="query" class="form-control mr-2" id="head-search-input" type="search" name="q" placeholder="Что ищем?" value="" aria-label="Поиск">
            <button class="btn btn-success d-flex justify-content-center my-2 my-sm-0" type="submit">
            <i class="material-icons">search</i>
            </button>
         </form>
      </nav>
      <!-- Основное содержимое страницы -->
      <main>
         <!-- Сама книга для прослушивания -->
         <article itemprop="mainEntity" itemscope itemtype="https://schema.org/AudioObject" class="audio-book">
            <h2>Слушать «Храбрый утёнок»</h2>
            <img itemprop="image" class="audio-book-img img-thumbnail" src="https://web-skazki.ru/preview-files/khrabryy-utyenok-small.jpg" alt="Аудиосказка Храбрый утёнок">
            <p itemprop="description">На сайте WEB-SKAZKI.RU вы можете слушать онлайн аудиосказку <span itemprop="name">«Храбрый утёнок»</span> автора <a href="/author/boris-zhitkov"><span itemprop="author">Борис Житков</span></a> из серии <a href="/book-series/rasskazy-o-zhivotnykh">«Рассказы о животных»</a> в формате <span itemprop="encodingFormat">.mp3</span> длительностью <span itemprop="duration">01:57</span>. А также вы можете просто скачать или <a href="#book-text-start">читать онлайн сказку «Храбрый утёнок»</a> бесплатно.</p>
            <div class="audio-book-navigation row">
               <div class="col-3 col-md-2 col-lg-5 text-left play-next">
                  <a class='btn btn-success d-flex justify-content-start' href='/book/pro-slona'>
                  <i class='material-icons'>fast_rewind</i>
                  <span class="d-none d-lg-block">Про слона</span>
                  </a>
               </div>
               <div class="col-6 col-md-8 col-lg-2 text-center">&nbsp;</div>
               <div class="col-3 col-md-2 col-lg-5 text-right play-prew">
                  &nbsp;&nbsp;
               </div>
            </div>
            <!-- Проигрыватель -->
            <div id="aplayer"></div>
            <!-- Дополнительные кнопки -->
            <div class="audio-book-options row">
               <div class="col-6 col-sm-4 text-center book-navigation">
                  <a class="btn btn-secondary d-flex justify-content-center" href="/book-series/rasskazy-o-zhivotnykh"><i class="material-icons">keyboard_arrow_left</i> Все книги из этой серии</a>
               </div>
               <div class="col-6 col-sm-4 download book-navigation">
                  <a itemprop="url" class="btn btn-success d-flex justify-content-center" href="/audio-files/khrabryy-utyenok.mp3" target="_blank" download title="Скачать книгу Храбрый утёнок бесплатно"><i class="material-icons">get_app</i>
                  <span>Скачать</span>
                  </a>
               </div>
               <div class="col-12 col-sm-4 text-center book-navigation">
                  <a class="btn btn-primary d-flex justify-content-center" href="/author/boris-zhitkov" target="_blank" title="Все книги автора Борис Житков"><i class="material-icons">face</i> Все книги автора</a>
               </div>
            </div>
            <h2>Читать «Храбрый утёнок» из серии книг «Рассказы о животных»</h2>
            <a id="book-text-start"></a>
            <div itemprop="text" class="book-text">
               <p>Каждое утро хозяйка выносила утятам полную тарелку рубленых яиц. Она ставила тарелку возле куста, а сама уходила.</p>
               <p>Как только утята подбегали к тарелке, вдруг из сада вылетала большая стрекоза и начинала кружиться над ними.</p>
               <p>Она так страшно стрекотала, что перепуганные утята убегали и прятались в траве. Они боялись, что стрекоза их всех перекусает.</p>
               <p>А злая стрекоза садилась на тарелку, пробовала еду и потом улетала. После этого утята уже целый день не подходили к тарелке. Они боялись, что стрекоза прилетит опять. Вечером хозяйка убирала тарелку и говорила: "Должно быть, наши утята заболели, что-то они ничего не едят". Она и не знала, что утята каждый вечер голодные ложились спать.</p>
               <p>Однажды к утятам пришёл в гости их сосед, маленький утёнок Алёша. Когда утята рассказали ему про стрекозу, он стал смеяться.</p>
               <p>- Ну и храбрецы! - сказал он. - Я один прогоню эту стрекозу. Вот вы увидите завтра.</p>
               <p>- Ты хвастаешь, - сказали утята, - завтра ты первый испугаешься и побежишь.</p>
               <p>На другое утро хозяйка, как всегда, поставила на землю тарелку с рублеными яйцами и ушла.</p>
               <p>- Ну, смотрите, - сказал смелый Алёша, - сейчас я буду драться с вашей стрекозой.</p>
               <p>Только он сказал это, как вдруг зажужжала стрекоза. Прямо сверху она полетела на тарелку.</p>
               <p>Утята хотели убежать, но Алёша не испугался. Не успела стрекоза сесть на тарелку, как Алёша схватил её клювом за крыло. Насилу она вырвалась и с поломанным крылом улетела.</p>
               <p>С тех пор она никогда не прилетала в сад, и утята каждый день наедались досыта. Они не только ели сами, но и угощали храброго Алёшу за то, что он спас их от стрекозы.</p>
            </div>
            <p class="author">Автор: Борис Житков</p>
            <!-- Постраничная навигация -->
            <div class="margin-1em">&nbsp;</div>
            <p class="text-center"><a href="/author/boris-zhitkov">Все сказки этого автора</a></p>
         </article>
      </main>
      <!-- Футер -->
      <footer itemscope itemtype="https://schema.org/WPFooter" class="row">
         <div class="col-8 col-md-10 text-center text-white">Сделано с ❤ к детям</div>
         <div class="col-4 col-md-2 text-center"><a itemprop="about" href="/about" class="text-white">О сайте</a></div>
      </footer>
      <!-- Go up button -->
      <button onclick="topFunction()" id="goUp" class="btn btn-info" title="Наверх"><i class='material-icons'>keyboard_arrow_up</i></button>
      <!--LiveInternet counter-->
      <script>
         new Image().src = "//counter.yadro.ru/hit?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();
      </script>
      <!--/LiveInternet-->
      <!-- Global site tag (gtag.js) - Google Analytics -->
      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-44498610-4"></script>
      <script>
         window.dataLayer = window.dataLayer || [];
         function gtag() {
             dataLayer.push(arguments);
         }
         gtag('js', new Date());
         
         gtag('config', 'UA-44498610-4');
      </script>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      <script src="https://web-skazki.ru/js/main.min.js?v=1.2.0" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="https://web-skazki.ru/src-player/APlayer.min.css">
      <script src="https://web-skazki.ru/src-player/APlayer.min.js"></script>
      <script>
         (function () {
             const ap = new APlayer({
                 container: document.getElementById('aplayer'),
                 mini: false,
                 loop: 'none',
                 theme: '#007bff',
                 volume: 1,
                 audio: [
                                                                     {
                         name: 'Храбрый утёнок',
                         artist: 'Борис Житков',
                         url: '/audio-files/khrabryy-utyenok.mp3'
                     }
                                 ]
             });
         
             /* If we have #play (it means autoplay) */
             if (window.location.hash === '#play') {
                 ap.play();
             }
         
             /* Activate auto play of next book */
                     ap.on('ended', function () {
                 /*if (getCookie('autoPlayNextBook') !== undefined) {*/
                 setTimeout(function () {
                     window.location.href = '/book/#play';
                 }, 5000);
                 /*}*/
             });
             
             /* Switch to last audio */
             if (getCookie('lastAudioIndex') !== undefined) {
                 ap.list.switch(parseInt(getCookie('lastAudioIndex')));
             }
         
             /* Switch to last time */
             if (getCookie('lastAudioTime') !== undefined) {
                 /* We need some time after the prev step */
                 setTimeout(function () {
                     var lastAudioTime = parseInt(getCookie('lastAudioTime'));
         
                     /* Go 15 sec back (for memory: wat is happend) */
                     if (lastAudioTime > 15) {
                         lastAudioTime = lastAudioTime - 15;
                     } else {
                         lastAudioTime = 0;
                     }
                     ap.seek(lastAudioTime);
                 }, 500);
             }
         
             /* Save current audio (for next time playing: tomorrow / in 2 days) */
             ap.on('listswitch', function (audio) {
                 var path = window.location.pathname;
                 setCookie('lastAudioIndex', audio.index, false, path);
             });
         
             /* Save current time (for next time playing: tomorrow / in 2 days) */
             setInterval(function () {
                 var path = window.location.pathname;
                 setCookie('lastAudioTime', Math.ceil(ap.audio.currentTime), false, path);
             }, 5000);
         })();
      </script>
   </body>
</html>

3. Напиши, пожалуйста, куда тебе можно благодарность в качестве денюжки скинуть (Qiwi, Сбер, Тел. или WM может). Ты даешь хорошие советы, и, я думаю, что не только я захочу тебя отблагодарить, но и те, кто будут читать эту тему через год/два/три ;)

4. Если что-то еще посоветуешь, то будет круто!!! ссылка на сайт вот (из кода уже и так понятно, да и не для кого не скрываю): https://web-skazki.ru

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.