Jump to content

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


Recommended Posts

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

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

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

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

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

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

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

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

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. Ну а вопрос тот же остается: в какой элемент и куда поместить ссылки "Следующая сказка" / "Предыдущая сказка"?

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 сжат

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>

 

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

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

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

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...