X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Правильная верстка - оптимально и ненавязчиво
k0ttee
k0ttee
Topic Starter сообщение 18.8.2016, 3:44; Ответить: k0ttee
Сообщение #1


Есть заголовки оптимальные для поиска, но скучные читателю. Есть красноречивые заглавия, но не дающие поисковых преимуществ. У интернет-магазинов к этому добавляется проблема навязчивости.

Несмотря на широту возможностей CSS и JS, никто не верстает оптимально для роботов и ненавязчиво для людей. И это в постссылочную эпоху? Ай-я-яй.
Прикрепленное изображение


Для людей желательно сделать заголовок поинтересней, да и слово "купить" в заглавии карточки товара будет навязчиво.

Как избавиться от слова "купить" в заголовке


Где этому слову будет самое место? Конечно же - на кнопке покупки.
Ну так давайте сделаем заголовок кнопкой, а подзаголовок поставим в начало статьи.

Если наложить код на результат, представить этот хак можно так:
Прикрепленное изображение

В заголовок нужно вбить регион? Не проблема!
Используя text-overflow: ellipsis можно визуально сократить до "купить iPhone 7S..." когда в коде будет "купить iPhone 7S в Москве".

Как видите, роль кнопки играет заголовок, который абсолютно ненавязчиво включает в себя правильный кейворд.
Как оставить H1 в начале (по ходу кода)? Используя .insertAfter() :D

Я за полчасика налабал скелет магазина с претензией на успех, кусочком которого поделюсь.
Далее - код и скриншот результата.
<html>
<head>
    <meta charset='UTF-8'>
    <title>Купить iPhone 7S</title>
    <style>
        article{border:solid 3px green;padding:5px}
        h1{position:relative;}
        button{padding:5px;border:solid 3px orange;}
        .other{margin:5px}
    </style>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <script>
        window.onload=function(){
            var h1=$('#h1')
            var button=$("#button")
            h1.insertAfter(button)
        }
    </script>
</head>
<body>

    <article>
        <h1 id='h1'><button>Купить iPhone 7S</button></h1><!--заголовок-->
        <h2>Характеристики iPhone 7S</h2><!--подзаголовок-->
        <p>Карточка товара и все такое бла-бла-бла.</p>
    </article>

    <div class="other">Кнопка это заголовок, несущий в себе коммерческий кейворд.</div>

    <div id='button'><!--сюда выведем H1 для ненавязчивости--></div>

</body>
</html>

Прикрепленное изображение


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Cognitive Disson...
Cognitive Disson...
сообщение 18.8.2016, 14:00; Ответить: Cognitive Dissonance
Сообщение #2


Вообще годно сделано.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prolisk
prolisk
сообщение 18.8.2016, 21:06; Ответить: prolisk
Сообщение #3


Идея неплохая. Как вариант - еще размещать картинки с title, alt.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
Topic Starter сообщение 18.8.2016, 21:13; Ответить: k0ttee
Сообщение #4


картинки с title, alt

А это - уже лень копирайтера, менеджера или программиста (кто товары вбивает).

Если уж делать шоп, то заказывать верстку для SEO... ну и своей головой хоть немного подумать. А то заказывают верстку "как на макете из фотошопа", вот и получают посредственное "лишь бы выглядело и работало". :unsure:


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
airman
airman
сообщение 19.9.2016, 23:45; Ответить: airman
Сообщение #5


k0ttee, как всегда хитрее всех)) Хорошо придумал :smile-thumb-up:


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
Topic Starter сообщение 20.9.2016, 13:02; Ответить: k0ttee
Сообщение #6


Хорошо придумал

Это, глядя в простой пример, выглядит хорошо.
Когда дело дойдет до правки реального шаблона магазина - верстальщик перемолится всем святым, помянет черта, да переберет весь плебейский мат.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP
Разработка на профессиональном уровне
144 Gerga 91684 11.3.2024, 19:59
автор: anchous
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКачественный современный дизайн сайтов, логотипов, печатной продукции. Верстка.
26 zaiko 17167 30.1.2024, 18:10
автор: zaiko
Открытая тема (нет новых ответов) Верстка шаблона Битрикс
0 bat 1366 26.9.2023, 6:22
автор: bat
Открытая тема (нет новых ответов) Верстка электронных писем бесплатно
0 Gidemopassan 1499 23.6.2023, 10:12
автор: Gidemopassan
Горячая тема (нет новых ответов) Сайт "под ключ" (дизайн, верстка, CMS)
32 Brans 16446 19.5.2023, 22:01
автор: Brans


 



RSS Текстовая версия Сейчас: 29.3.2024, 14:15
Дизайн