Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 53 из 70 · 9 мин
Open Graph, favicon, apple-touch-icon и web manifest: как сайт выглядит в мессенджерах, вкладках и на главном экране.
Отправляю другу ссылку на сайт — приходит голое «example.com» без картинки. А у других красивые карточки!
Это Open Graph. Пять строчек — и красивое превью.
og:*property: og:title, og:description, og:image (абсолютный адрес!), og:url.<meta property="og:title" content="Мой сайт">
<meta property="og:image" content="https://example.com/og.jpg"><link rel="icon">apple-touch-icon для iPhone.<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">manifest<link rel="manifest"> — файл с названием, иконками и цветами.colorlink rel="mask-icon": цвет одноцветной иконки в Safari.<link rel="mask-icon" href="/icon.svg" color="#6b3e26">Чтобы ссылка на «Север» приходила с картинкой, добавь Open Graph: og:title, og:description, og:image, а ещё иконку сайта link rel="icon".
og:title — пока нетog:description — пока нетog:image — пока нетlink rel="icon" — пока нетВыберите один ответ.
Какой атрибут используют мета-теги Open Graph для имени свойства?
Выберите один ответ.
Каким должен быть адрес в og:image?
Введите короткий ответ без лишних пробелов.
Какое значение rel у <link> подключает иконку сайта для вкладки браузера?
Проверяем состояние обучения…