Как задать картинку для сайта при публикации в соцсетях или мессенджерах.
Вывод картинки, текста и описания для сайта, осуществляется благодаря разметке Open Graph. Она как раз и создана для того, чтобы вы видели картинку, название и краткое описание для ссылки, вместо обычного УРЛ. Ведь так же красивее, понятнее и намного эффективнее. Но от куда берется эта разметка Open Graph, если вы ее не добавляли на сайт?
Если вы используете какую-то систему для управления сайтом, в народе «Движок», то скорее всего вы устанавливаете плагины, модули, дополнения и тд. У каждого движка свои названия этих дополнительных опций. Суть в том, что некоторые из них, что рассчитаны на работу в СЕО области и там или автоматически определяются параметры для вывода Open Graph или же вы прописываете, даже не задумываясь для чего. Например, у WordPress, в этом вопросе самый популярный плагин — SEO by Yoast. Так же, часто все формируется автоматически, даже если нет ни плагинов ни разметки.
Чтобы все отображалось корректно, советую на своих системах установить соответствующие плагины, с помощью которых будет произведена настройка разметки Open Graph. Если у вас самописный сайт или лендинг, то можете установить стандартные настройки для главной страницы. Чтобы это сделать, можете добавить некоторые теги в шапку страницы.
<meta property="og:title" content=""> <meta property="og:site_name" content=""> <meta property="og:url" content=""> <meta property="og:description" content=""> <meta property="og:image" content="">
Далее нужно каждому МЕТА-тегу заполнить параметр content=»», чтобы правильно это сделать, распишу подробнее, за что отвечает каждый:
- og:title — Заглавие страницы, он же тайтл.
Можете скопировать из тега <title>…</title>. - og:site_name — Название сайта.
- og:url — Ссылка страницы, где вы добавляете этот код. Если это лендинг и у него одна страница, то это просто ссылка на главную сайта. если сайт самописный и у него много страниц, то вам придется для каждой указать свой тег, со своей ссылкой.
- og:description — Описание страницы. Можете скопировать из тега description для страницы, на которую добавляете теги.
- og:image — Ссылка на картинку, что характеризует страницу. Если это тот же лендинг, то можете указать ссылку на лого сайта, или нарисовать конкретную картинку для этих целей. На сайте, этой картонкой выступает изображение для статей и тд.
Готовый вариант может быть примерно таким:
<meta property="og:title" content="Как задать картинку для сайта при публикации в соцсетях или мессенджерах. "> <meta property="og:site_name" content="Дизайн и разработка сайтов"> <meta property="og:url" content="https://gnatkovsky.com.ua/kak-zadat-kartinku-dlya-sajta-pri-publikacii-v-socsetyax-ili-messendzherax.html"> <meta property="og:description" content="Сегодня речь пойдет о том, как сделать, чтобы при публикации ссылки на сайт в соцсетях, там выводилась нужная картинка, текст и описание."> <meta property="og:image" content="https://gnatkovsky.com.ua/wp-content/uploads/2017/08/01092017001.jpg">
Как видите ничего сложного нет. Теперь вы знаете как и откуда берется картинка ссылки в соц сетях. Все же я бы больше рекомендовал этот метод для лендингов. Там всего одна страница и задать ей разметку Open Graph не сложно, к тому же необходимо, если вы планируете продвигать ее в соц сетях.
Недавно была написана новая статья об Open Graph с инструкцией для WordPress — Как подключить Open Graph к WordPress
На этом все, спасибо за внимание. 🙂
4.2. Картинка-гиперссылка
Принцип ссылки тот же, что и
для текстовой гиперссылки, только между
открывающим и закрывающим тегами <a>
помещают не текст, а тег <img>
вместе со всем его содержимым (см. п. 3).
Пример.
<a href=»http://www2.tcde.ru» target=»blank«><img src= «logo.jpg» width=150 height=50 border=2 alt=»Щелкни, чтобы перейти на сайт ТМЦДО»></a>
Этим самым картинке размером 150×50 пикселей, находящейся в файле с названием logo.jpg, назначена гиперссылка на сайт Томского межвузовского центра дистанционного образования. При наведении на нее стрелка курсора трансформируется в изображение ладони с вытянутым указательным пальцем и появляется надпись «Щелкни, чтобы перейти на сайт ТМЦДО». Страница будет открываться в новом окне браузера.
4.3. Навигационная карта
А можно ли назначить различным частям одного графического изображения различные гиперссылки? А как разбить картинку (например, фотографию) на отдельные участки так, чтобы при подведении к ним курсора появлялись разные подписи?
Для
этого картинку надо превратить в
навигационную
карту.
Прежде чем начинать работу, поместите ту картинку, которую собираетесь превратить в карту, на html-страницу и посмотрите, удовлетворяют ли вас ее размеры. Подгоните размеры под требуемые, но не изменением параметров height и width, а с помощью графического редактора (см. п.1).
Затем вставляем в тег <img> картинки за атрибутом src атрибут usemap=»#имя», где имя – это название, которое вы даете карте. После этого начинается работа по описанию активных областей карты. Для этого используется контейнерный тег <map>.
Описание начинается с тега <map name=»имя»>, а заканчивается тегом
<area shape=»форма» coords=»координаты» href=»адрес» alt=»текст»>.
Атрибут
shape
определяет ту форму, с помощью которой
выделяется отдельный объект на картинке.
Параметр форма
может принимать одно из следующих
значений:
circle – окружность,
rect – прямоугольник,
Атрибут coords определяет координаты выделенного объекта.
Параметр координаты задается списком координат, которые отсчитываются в пикселях от левого верхнего угла картинки.
Для окружности этот список состоит из координат центра окружности (х, у) и ее радиуса.
Для прямоугольника это координаты (x, y) левого верхнего и правого нижнего углов прямоугольника.
Для многоугольника это координаты (x, y) каждого из углов многоугольника.
Все координаты перечисляются через запятую.
Атрибут href определяет адрес
Атрибут alt определяет появляющийся при наведении на объект текст.
И тут возникает вопрос: а как рассчитать точно координаты нужной части изображения? Конечно, это можно сделать вручную, зная размер картинки в пикселях, но уж очень трудоемкий этот процесс.
На помощь приходят специальные программы – WYSIWYG-редакторы навигационных карт, которые значительно упрощают и ускоряют разметку навигационных областей1. Но сразу отметим, что сгенерированный ими HTML-код все равно может потребовать доведения его «до ума» вручную.
Укажем некоторые такие программы.
1. GeoHTML 2.1 (http://www.fegi.ru/geohtml/). Относится к классу freeware. Дистрибутив имеет размер 1,2 Мб.
2. MapEdit
(http://www.boutell.com/mapedit/).
Относится к классу shareware. Без регистрации
и оплаты она работает 30 дней или позволяет
обработать 100 графических файлов.
Возможности
построения навигационных карт заложены
и в визуальных редакторах HTML, например
Macromedia Dreamweaver 8
(
Рассмотрим работу редактора карт на примере программы GeoHTML.
После запуска программы выбираем File | New Map… Окно New Map («Новая карта») служит для создания новой карты. Оно содержит две страницы Open an Image («Открыть изображение») и Look In Document («Найти в документе») (рис. 2.4).
Страница
Open An Image
используется для открытия файла с диска
(поле Source).
Изменяя свойства Width и Height, можно задать
ширину и высоту изображения. После
нажатия кнопки «Ok» изображение появляется
в поле программы и готово к редактированию.
Рис. 2.4. Главное окно программы GeoHTML с выбранным графическим файлом.
Щелкая по изображению формы, выбираем «Прямоугольник», «Окружность» или «Многоугольник». Стрелкой осуществляется переход от одного объекта выделения к другому. При работе с формой «Прямоугольник» ставите курсор в левый верхний угол предполагаемой области выделения и ведете его вправо-вниз. При работе с формой «Окружность» ставите курсор в центр объекта и начинаете двигать его по радиусу, увеличивая обхват. При работе с формой «Многоугольник» курсором обводите объект, щелкая мышью на углах поворота. Необходимо обязательно замкнуть ломаную линию! Объекты выделения покрываются синей сеткой (рис. 2.5).
Рис.
2.5. Окно редактора GeoHTML
с выделенными объектами.
В нижнем правом
углу – окно Area
Inspector.
Чтобы отменить выделение, нужно выбрать стрелкой объект, щелкнуть правой кнопкой мыши и в контекстном меню выбрать Delete Area.
К выделенной области привязывается определенная информация. Это делается при помощи окна Area Inspector. Атрибуты разделяются на Свойства (Properties) и События (Events).
Свойство
Shape
– тип области. Свойству автоматически
присваивается одно из трех значений:
RECT (область прямоугольная), CIRCLE (область
круглая) или POLY (область многоугольная).
Coords
– координаты области. Содержит
целочисленные значения координат,
записанные через запятую, и зависит от
геометрического типа (свойства Shape)
области. Единицей измерения этих
координат являются пиксели (точки)
экрана. Href
– гипертекстовая ссылка. Target
– задает окно, в котором откроется
документ, указанный в Href.
ID –
идентификатор области. Используется
для обращения к свойствам области из
кода сценария. Alt
и Title
–определяют выпадающий текст-подсказку
(в зависимости от браузера – следует
проверить!). Language
– описание языка сценария, используемого
в событиях области (например, «javascript»).
Lang
– описание ISO-языка для области (например,
«text/javascript»). Style
– определяет строку таблицы стилей для
области. Class
– определяет класс области, используемый
в таблицах стилей (CSS).
Атрибуты из раздела События содержат операторы языков сценария (JavaScript или VBScript) и предназначены для продвинутых пользователей. Коды сценария выполняются, когда происходит соответствующее атрибуту событие.
После
того, как определены все объекты,
необходимо открыть закладку HTML Source,
скопировать сгенерированный программой
html-код,
начиная с тега <img>
и кончая тегом </map>,
и вставить в нужное место на html-странице
вашего сайта.
При необходимости
подкорректируйте путь к рисунку.
Таким образом, выбранный рисунок превратился в навигационную карту.
Пример.
Для фотографии, изображенной на рис. 2.5, был сгенерирован следующий код:
<IMG SRC=»Мои рисунки/Beatles.jpg» USEMAP=»#Beatles» WIDTH=640 HEIGHT=444 BORDER=»0″ alt=»Abbey Road Street»>
<MAP NAME=»Beatles»>
<AREA SHAPE=»CIRCLE» HREF=»http://www.avto.ru» TARGET=»blank» ALT=»Автомобиль» COORDS=»147,180,41″>
<AREA SHAPE=»RECT» HREF=»http://www.beatles.com» TARGET=»blank» ALT=»Abbey Road Album» COORDS=»484,26, 617,65″>
<AREA SHAPE=»POLY» HREF=»#» ALT=»Джон Леннон» COORDS=»538,157, 514,198, 513,197, 511,240, 489,284, 450,385, 592,392, 552,271, 564,155, 545,150, 532,163, 538,157″>
<AREA SHAPE=»POLY» HREF=»#» ALT=»Ринго Старр» COORDS=»387,160, 374,196, 345,292, 315,369, 350,394, 449,377, 427,284, 401,259, 400,196, 406,180, 400,156, 386,163, 387,160″>
<AREA SHAPE=»POLY» HREF=»#» ALT=»Пол Маккартни » COORDS=»240,152, 218,213, 187,369, 315,376, 275,325, 285,262, 259,194, 266,165, 252,151, 238,157, 240,152″>
<AREA SHAPE=»POLY» HREF=»#» ALT=»Джордж Харрисон» COORDS=»90,148, 89,188, 64,201, 64,201, 34,387, 176,365, 129,316, 110,214, 108,178, 113,152, 88,149, 90,169, 86,171, 90,148″>
</MAP>
Видно,
что были сформированы шесть областей
выделения (автомобиль, надпись в правом
верхнем углу и четыре фигуры), причем
первым двум областям назначены
гипертекстовые ссылки.
Первая область
сформирована окружностью, вторая –
прямоугольником, остальные –
многоугольником.
Представляете, как было бы нелегко это исполнить вручную!
Отметим, тем не менее, что подпись, которая должна появиться при наведении курсора вне зон выделения (Abbey Road Street), была задана в атрибуте alt тега <img> вручную.
Как сделать картинку ссылкой в письме почтового клиента Gmail
Большинству пользователей известен тот факт, что наличие гиперссылки в электронном письме способствует перенаправлению адресата непосредственно на целевую интернет-страницу или на скачивание определенного файла. Но, не многие из них знают ещё и о том, как сделать картинку ссылкой в своём письме.
Именно для таких пользователей мы, в этой инструкции, продемонстрируем пошаговый процесс объединения изображения и гиперссылки. В качестве примера, будем использовать аккаунт в бесплатной почтовой службе Gmail от Google.
По числу уникальных пользователей она стала самой популярной в мире.
Предоставляет для бесплатного использования свой инструментарий в интуитивно-понятном веб-интерфейсе. Работает на всех операционных системах для ПК, а также мобильных ОС при наличии веб-браузера.
Предполагаем, что вы уже имеете учетную запись в Gmail. Если нет, советуем её получить путем простой регистрации.
Когда будете готовы, войдите в свою почту. Вы увидите простой интерфейс управления электронными сообщениями. С ним и будем работать.
КАК СДЕЛАТЬ КАРТИНКУ ССЫЛКОЙ
Нажмите на кнопку «Написать» слева вверху. Автоматически откроется окно создания письма. Необходимый минимум информации для заполнения следующий:
- адрес электронной почты получателя;
- тема сообщения;
- текст.
В нужном вам месте установите курсор и нажмите на иконку «Добавить фото», которая размещена на компактной нижней Панели инструментов. В следующем окне выберите источник получения изображения (Google Фото, Загрузка с диска, Из интернета) и найдите нужное. Перед загрузкой убедитесь в том, что в нижнем правом углу установлена опция «Вставить», а не «Как прикрепленный файл».
Если выберите последнюю, то она не поможет нам достигнуть поставленной цели.
Когда изображение появится в теле письма, отрегулируйте его размер. Не бойтесь ничего испортить, у вас будет возможность выбрать, помимо ручного масштабирования, такие размеры по умолчанию, как:
- маленький;
- оптимальный;
- исходный.
Теперь настало время вставить гиперссылку. Кликните по изображению, чтобы выбрать его. Далее нажмите сочетание клавиш Ctrl+K на клавиатуре или иконку «Вставить ссылку». На первый взгляд, ничего не произойдет, но, если вы повторно нажмете на картинку, то увидите уже другие инструменты для работы. Нажмите на появившуюся ссылку «Изменить».
Откроется окно для изменения параметров. Вам станут доступными поля для ввода отображаемого текста, целевого веб-адреса (URL) или электронной почты. Заполните их. Также сможете проверить ссылку на работоспособность. Нажмите на кнопку «ОК», когда закончите.
Не спешите отправлять сообщение адресату.
Сначала убедитесь в правильности введенных данных. Выберите изображение еще раз и если гиперссылка вставлена правильно, появится возможность перехода по соответствующему url-адресу.
Вот и всё, сегодня будем считать вопрос, как сделать картинку ссылкой, решенным. Спасибо за внимание!
Главная / Офис / Узнайте, как сделать картинку ссылкой в письме Gmail
Как сделать картинку ссылкой Вконтакте
Обновлено — 3 февраля 2020 в 13:33
Многие пользователи интересуются, как сделать картинку ссылкой Вконтакте. Зачем это нужно? Хотя бы для того, чтобы рекламировать свой ресурс (внешний сайт) или сообщество.
Выглядит это так: в группе опубликована запись, в которой прикреплена картинка, при нажатии на которую пользователь попадает на другую страницу.
Некоторые таким образом пытаются раскрутить группу Вконтакте.
Как сделать картинку ссылкой Вконтакте
Встроенные значки как ссылки
HTML5 упрощает добавление изображений в строку.
Мы продемонстрируем это, создав класс изображения.
Базовый код HTML5
CSS
img.inline {
дисплей: встроенный;
граница: нет;
тень коробки: нет;
отступ: 0 2px;
маржа: 0 0
}
Щелкните значок, чтобы узнать больше об использовании изображений на страницах HTML.
Фактический код HTML5 для этой ссылки
Щелкните значок
и узнайте больше об использовании изображений на страницах HTML. < / p>
См. Также: Абзацы-изображения
.