Add Metatag Link submodule (metatag_link) with support for preload attribute

So that means the following attributes need to be editable:

• href (main value, required)
• as
• on
• media
• crossorigin
• type

Looking at the schema for field_metatags_value it looks a bit like this:

{
"image_src": "[node:field_picture:entity:field_media_image]",
"og_image": "[node:field_picture:entity:field_media_image]",
"og_image_secure_url": "[node:field_picture:entity:field_media_image]",
"og_image_url": "[node:field_picture:entity:field_media_image]",
"twitter_cards_image": "[node:field_picture]",
}

Notice the relationship here is one to one i.e. each key has a single value. In this case each item is a token.

What I think might be required here is to be able to pass an associative array of items.

e.g. for <link rel="preload" href="style.css" as="style" />

"link_preload": [ 
  "href" : "[site:css-path]",
  "as" : "style",
  "on" : "null",
  "media" : "null",
  "crossorigin" : "null",
  "type": "null",
]

Notice in this example we may also need a token for [site:css-path], (if this doesn't exist already).

for <link rel="preload" href="main.js" as="script" />

We may need a similar [site:js-path] token

Whats interesting about <link rel="stylesheet" href="style.css" /> is that the rel attribute is different. Of course this is handled by drupal front end theme already, but it begs the question, do we need to make the relative attribute configurable as well?

Possible relationship values listed here. Certainly there are a number of them that can be applied to the link tag:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel

for example 2 <link rel="preload" href="flower.avif" as="image" type="image/avif" /> we could have something like:

"link": [ 
  "rel" : "preload",
  "href" : "[node:field_picture:entity:field_media_image]",
  "as" : "image",
  "on" : "null",
  "media" : "null",
  "crossorigin" : "null",
  "type": "image/avif",
]

In this example it would also be good to have a token for the image type e.g. [node:field_picture:entity:field_media_image:type]

we do have [node:field_image:entity:extension]

for example 3 - cors enabled fetches

e.g.

<link
    rel="preload"
    href="fonts/cicle_fina-webfont.woff2"
    as="font"
    type="font/woff2"
    crossorigin />

something like:

"link": [ 
  "rel" : "preload",
  "href" : "fonts/cicle_fina-webfont.woff2",
  "as" : "font",
  "on" : "null",
  "media" : "null",
  "crossorigin" : "true",
  "type": "font/woff2",
]

Finally for media e.g.

<link
    rel="preload"
    href="bg-image-narrow.png"
    as="image"
    media="(max-width: 600px)" />
  <link
    rel="preload"
    href="bg-image-wide.png"
    as="image"
    media="(min-width: 601px)" />

something like:

"link": [ 
  "rel" : "preload",
  "href" : [node:field_image:large],
  "as" : "image",
  "on" : "null",
  "media" : ""(max-width: 600px)",
  "crossorigin" : "null",
  "type": "null",
]

So here we have the challenge of multiple attributes all with the same name.

So perhaps this might be a better schema.

"link": [
  0 => [ 
    "rel" : "preload",
    "href" : [node:field_image:small],
    "as" : "image",
    "on" : "null",
    "media" : ""(max-width: 600px)",
    "crossorigin" : "null",
    "type": "null",
  1 => [
    "rel" : "preload",
    "href" : [node:field_image:large],
    "as" : "image",
    "on" : "null",
    "media" : "(min-width: 601px)",
    "crossorigin" : "null",
    "type": "null",
  ]
]

So in this example we end up with something like:

{
  "image_src": "[node:field_picture:entity:field_media_image]",
  "og_image": "[node:field_picture:entity:field_media_image]",
  "og_image_secure_url": "[node:field_picture:entity:field_media_image]",
  "og_image_url": "[node:field_picture:entity:field_media_image]",
  "twitter_cards_image": "[node:field_picture]",
  "link": [
    [ 
      "rel" : "preload",
      "href" : [node:field_image:small],
      "as" : "image",
      "on" : "null",
      "media" : "(max-width: 600px)",
      "crossorigin" : "null",
      "type": "null",
    ],
    [
      "rel" : "preload",
      "href" : [node:field_image:large],
      "as" : "image",
      "on" : "null",
      "media" : "(min-width: 601px)",
      "crossorigin" : "null",
      "type": "null",
    ]
  ]
}

Looks like we have support for Link tag in /metatag/src/Plugin/metatag/Tag/LinkRelBase.php

This is being used by metatag/metatag_favicons/src/Plugin/metatag/Tag/LinkSizesBase.php

The pattern is different though. It looks like we have support for predefined fields that are not repeatable.

In that sense this requirement is a bit like a custom meta tag in that we can define new attributes on the fly, rather than filling in one of several pre defined fields that are also relevant.

The main difference with custom metatags is:

1. that we assume the link tag is always the same.
2. we support more than 2 attributes

e.g of use of use of link tag uisng an attribute other than rel="preload"

<link rel="icon" href="favicon.ico" />

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

list of all attributes supported:

1. as
2. blocking (experimental)
3. crossorigin
4. disabled
5. fetchpriority
6. href
7. hreflang
8. imagesizes
9. imagesrcset
10. integrity
11. media
12. referrerpolicy
13. rel
14. sizes
15. title
16. type

Non standard

1. methods
2. target

Obsolete

1. charset
2. rev

Also link attribute supports use of global attributes:

These are:

1. accesskey
2. autocapitalize
3. autofocus
4. class
5. contenteditable
6. data-*
7. dir
8. draggable
9. enterkeyhint
10. exportparts
11. hidden
12. id
13. inert
14. inputmode
15. is
16. itemid
17. itemprop
18. itemref
19. itemscope
20. itemtype
21. lang
22. nonce
23. part
24. popover
25. role
26. slot
27. spellcheck
28. style
29. tabindex
30. title (same as above )
31. translate
32. virtualkeyboardpolicy (experimental)

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attributes

I should mention that the recommended use of some of these attributes is quite complicated.

e.g.

as
This attribute is required when rel="preload" has been set on the
element, optional when rel="modulepreload" has been set, and otherwise should not be used. It specifies the type of content being loaded by the
, which is necessary for request matching, application of correct content security policy, and setting of correct Accept request header.

Furthermore, rel="preload" uses this as a signal for request prioritization. The table below lists the valid values for this attribute and the elements or resources they apply to.

Value Applies To
audio elements
document

and elements embed elements fetch fetch, XHR Note: This value also requires to contain the crossorigin attribute, see CORS-enabled fetches. font CSS @font-face Note: This value also requires to contain the crossorigin attribute, see CORS-enabled fetches. image and elements with srcset or imageset attributes, SVG elements, CSS *-image rules object elements script elements, Worker importScripts style elements, CSS @import track elements video elements worker Worker, SharedWorker