Html link rel image src

Что такое

Сегодня я наткнулся на тег . Я не знаю об этом, поэтому я использую google. Google сообщит, что этот тег похож на og:image . Поэтому я пришел к открытому графическому основному сайту, чтобы прочитать об этом http://ogp.me/, но я ничего не нашел о ссылке rel=»image_src» . Таким образом, этот тег заменяет meta property=»og:image» или находится в специальном теге в другой спецификации? Как использовать этот тег или для того, что используется?

На самом деле, я думаю, что это был старый способ определить, какое изображение было взято скребками / сканерами, такими как Facebook.

3 ответа

Атрибут rel указывает тип ссылки, т.е. вид отношений между документом и связанным ресурсом. Обычно используется только несколько ключевых слов, таких как stylesheet и icon . Хотя многие другие ключевые слова были предложены и зарегистрированы, большинство из них написаны только для записи: они предназначены для выражения чего-то, но никто не заботится (ни одно программное обеспечение не использует эту информацию).

Механизмы расширения HTML5 включают в описание типы ссылок, несколько неясный механизм, который позволяет, теоретически, регистрировать своего любимого ключевое слово в существующие значения rel wiki, чтобы сделать документы использующими его как rel значение «соответствовать».

И image_src действительно зарегистрирован там, с информацией о том, что он используется для «указания значка веб-страницы для использования Facebook, Yahoo, Digg и т.д.», спецификация не определена, а статья об этом связана, и она «вероятно избыточна с rel= icon».

«вероятно, избыточно с rel = icon» Другие сайты, такие как, возможно, хотят отображать изображение-тизер в отличие от простого значка.

О последнем абзаце: Facebook использовал это в течение многих лет, чтобы генерировать миниатюры ссылок, когда og: image отсутствует, и все еще делает.

Источник

Картинки для соцсетей

Если ты хочешь, чтобы социальные сети подгружали именно ту картинку, которую нужно в момент добавления пользователем ссылки на страницу твоего сайта, то установи такой вот link.

Это «подхватывает»: mail.ru, ok.ru, vk.com

property html-attribute-value">og:image" content html-attribute-value">https://f.usemind.org/img/7/_inverser.pro_php_mail.jpg">

Что он делает? Многие пользователи создают ссылки на твой сайт в социальных сетях, которые загружают часть страницы твоего сайта для предварительного просмотра. В том числе они загружают и изображения. Это делает специальный бот в соцсетях Вконтакте, Лицокнига, Одноклассники и другие. Иногда на одной странице сайта находятся несколько десятков изображений, которые часто оказываются техническими, например иконка RSS или почты. Поэтому, легко поставить rel=»image_scr» для того, чтобы боты социальных сетей подгружали нужное тебе изображение материала страницы с твоего сайта, которое напрямую связано с ней.

Да, конечно, во время добавления ссылки на твой сайт в социальной сети, пользователь может выбрать любое изображение, нажав на него или пролистав далее, но лучше всего указать роботу какое изображение является каноническим для конкретной статьи. Простой способ сделать это — установить специальный код на каждой странице, где бы ты хотел выводить изображения превью для социалок.

Теперь пользователю не нужно будет выбирать из десятка ненужных изображений то, которое соответствует смыслу статьи, а попадет сразу на нужное, указанное тобой.

Многие оптимизаторы содержимого для социальных сетей (SMM) и поисковых роботов (SEO) уже это сделали.

Источник

What is the purpose of `link rel=”image_src”` in an HTML document?

I have seen this when viewing source on some sites and it’s not clear to me why I need to include it.

8 Replies _↴

@hq author Dec 20.2022 — # Thanks for the post @Sibert, but to claim the bounty, please post a full response here to receive the SATS reward. 👍

@Starry Dec 23.2022 — # The rel means the type of link, the kind of the thing between the document and the resource that’s used. Thats most of the time just a few words like stylesheet is used. Although many other words have been proposed and used.

@Hot_HeadGaming Dec 23.2022 — # The link rel=»image_src» tag lets you control what image (or images, you can have more than one by stacking separate references) is displayed alongside your link.

Dec 24.2022 — # For some reason the example isn’t shown. Here:

Dec 24.2022 — # link rel=»image_src» href=»https://example.com/image.jpg»

@codi Jan 04.2023 — # link rel=»image_src» is an HTML tag that specifies the location of an image that should be used when a webpage is shared on social media or other platforms. It is used to specify the image that will be displayed when the webpage is shared on platforms such as Facebook or Twitter.

This tag is included in the head section of the HTML document and allows web developers to specify the image that will be used as a thumbnail when the webpage is shared. This can be useful for increasing the visibility of a webpage on social media platforms, as a well-chosen image can attract more attention and increase the chances that the webpage will be shared.

@1 Jan 20.2023 — # The rel attribute defines the relationship between a linked resource and the current document.

Источник

Html link rel image src

Атрибут – href

href – Этот атрибут определяет URL, связываемого ресурса. URL может быть абсолютным или относительным.

Атрибут – hreflang

hreflang – Этот атрибут определяет язык, связываемого ресурса. Допустимые значения определяются BCP47. Используйте этот атрибут только если присутствуют атрибуты href .

 href="https://google.com" hreflang="en">Google 

Атрибут – type

type – Атрибут указывает тип MIME, такое как text/html , text/css и т.д. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, text/css ).

Атрибут – media

media – Этот атрибут указывает медиа – ресурс, который применяет связываемый ресурс. Его значение Значение должно быть допустимым списком медиа – запросов.

Атрибут – crossorigin

crossorigin – Атрибут указывает, должен ли CORS использоваться при загрузки ресурса. CORS – поддерживаемые изображения могут быть повторно использованы в элементе не искажая их. Допустимы значения:

anonymous – Cross-origin запрос выполняется, но учётные данные не отправляются .

Недопустимое значение атрибута по умолчанию — это анонимное состояние, а его отсутствующее значение по умолчанию — состояние без CORS.

use-credentials – Cross-origin запрос выполняется вместе с отправкой учётных данных .

 src="https://mysite/script.js" crossorigin="anonymous" >

Запросы CORS не будут передавать учетные данные.

 src="https://mysite/script.js" crossorigin="use-credentials" >

Запросы CORS будут передавать учетные данные.

Атрибут – rel

rel – Этот атрибут связь между документом, содержащим гиперссылку, и целевым ресурсом. Атрибут должен быть разделённым пробелами списком значений типов ссылки.

Атрибут – sizes

sizes – Атрибут определяет размеры иконок для визуальных средств массовой информации, содержащихся в ресурсе. Его значение, если оно есть, носит рекомендательный характер. Атрибут должен быть указан только на элементы – , у которых есть атрибут – rel , определяющий ключевое слово – icon, или ключевое слово – apple-touch-icon. Может иметь следующие значения:

any – Ключевое слово представляет , что ресурс содержит масштабируемую иконку, например , как это предусмотрено в векторном формате image/svg+xml.

Пробелоразделенный список размеров, каждый в формате x или X . Каждый из этих размеров должен содержаться в ресурсе.

Ключевое слово — any означает, что ресурс содержит растровый значок шириной в пиксели устройства по ширине и высотой в пиксели устройства по высоте .

Ключевые слова, указанные в атрибуте – sizes, должны представлять размеры значков, которых фактически находятся в связанном ресурсе.

  lang="en"> lsForums — Inbox rel=icon href=favicon.png sizes="16x16" type="image/png"> rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon"> rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768"> rel=icon href=iphone.png sizes="57x57" type="image/png"> rel=icon href=gnome.svg sizes="any" type="image/svg+xml"> rel=stylesheethref=lsforums.css> src=lsforums.js> name=application-name content="lsForums"> 

Атрибут – as

as – Атрибут используется только для элементов с атрибутом rel = «preload» или rel = «prefetch» . Он указывает тип контента, загружаемого , который необходим для определения приоритетов контента, сравнения запросов, применения корректного content security policy, и установки корректного Accept запрашиваемого заголовка.

Атрибут – color

color – Атрибут используется с типом связи – mask-icon. Атрибут должен быть указан только для элементов – , у которых есть атрибут – rel , содержащий ключевое слово – mask-icon . Значение должно быть строкой, соответствующей произведению CSS , определяя предлагаемый цвет, который пользователи могут использовать для настройки отображения значка, когда он закрепляет ваш сайт.

 rel="mask-icon" href="mask.svg" color="blue">

Атрибут – title

title – Атрибут дает название ссылки. За одним исключением, это чисто рекомендательный характер. Значение — текст. При использовании он определяет предпочтительную или альтернативную таблицу стилей. Исключение составляют ссылки на таблицы стилей в дереве документа , для которых атрибут – title определяет наборы таблиц стилей CSS.

 href="default.css" rel="stylesheet" title="Default Style"> href="fancy.css" rel="alternate stylesheet" title="Fancy"> href="basic.css" rel="alternate stylesheet" title="Basic">

Атрибут – disabled

disabled – Атрибут является логическим атрибутом , который используется с типом связи – stylesheet. Атрибут должен быть указан только для элементов – , у которых есть атрибут – rel , содержащий ключевое слово – stylesheet. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей.

disabled — Динамическое удаление атрибута, например, с помощью document.querySelector(«link»).removeAttribute(«disabled») , вызовет и применит таблицу стилей:

 disabled rel="alternate stylesheet" href="css/pooh">

Атрибут – crossorigin

Атрибут – integrity

integrity – Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64 , который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите Subresource Integrity.

Атрибут – imagesrcset

imagesrcset – Атрибут может применяться и является атрибутом srcset .

Атрибуты imagesrcset и imagesizes должны быть указаны только для элементов – , которые имеют как атрибут – rel , определяющий ключевое слово preload , так и атрибут as в состоянии «image» .

Эти атрибуты позволяют предварительно загрузить соответствующий ресурс, который впоследствии используется элементом img, имеющим соответствующие значения атрибутов srcset и sizes

  rel="preload" as="image" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">  src="wolf.jpg" alt="A rad wolf" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw">

Атрибут imagesrcset можно комбинировать с атрибутом media для предварительной загрузки соответствующего ресурса, выбранного из источников элемента picture , для художественного направления :

  rel="preload" as="image" imagesrcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x" media="(max-width: 800px)">  rel="preload" as="image" imagesrcset="dog-wide-1x.jpg, dog-wide-2x.jpg 2x" media="(min-width: 801px)">   srcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x" media="(max-width: 800px)">  src="dog-wide-1x.jpg" srcset="dog-wide-2x.jpg 2x" alt="An awesome dog"> 

Интерфейс DOM

[Exposed=Window] interface HTMLLinkElement : HTMLElement < [HTMLConstructor] constructor(); [CEReactions] attribute USVString href; [CEReactions] attribute DOMString? crossOrigin; [CEReactions] attribute DOMString rel; [CEReactions] attribute DOMString as; // (default "") [SameObject, PutForwards=value] readonly attribute DOMTokenList relList; [CEReactions] attribute DOMString media; [CEReactions] attribute DOMString integrity; [CEReactions] attribute DOMString hreflang; [CEReactions] attribute DOMString type; [SameObject, PutForwards=value] readonly attribute DOMTokenList sizes; [CEReactions] attribute USVString imageSrcset; [CEReactions] attribute DOMString imageSizes; [CEReactions] attribute DOMString referrerPolicy; [CEReactions] attribute boolean disabled; // also has obsolete members >; HTMLLinkElement includes LinkStyle;

Источник