Open Graph для тех, кто не хочет думать

<head>
    <title>YAMAL.DEV!</title>

    <meta property="og:title"
          content="YAMAL.DEV!">
    <meta property="og:type"
          content="website">
    <meta property="og:url"
          content="https://yamal.dev/">
    <meta property="og:image"
          content="https://yamal.dev/og_image.jpg" />
</head>
        

<head>
    <title>YAMAL.DEV!</title>

    <meta property="og:title"
          content="YAMAL.DEV!">
    <meta property="og:type"
          content="website">
    <meta property="og:url"
          content="https://yamal.dev/">
    <meta property="og:image"
          content="https://yamal.dev/og_image.jpg" />
</head>
        

og:*

og:title

og:description

og:image

og:site_name

og:type

article

• article:published_time
• article:modified_time
• article:expiration_time
• article:author
• article:tag

video.movie

• video:actor
• video:actor:role
• video:director
• video:writer
• video:duration
• video:release_date
• video:tag

og:image

<meta property="og:image"
      content="https://yamal.dev/ogp.jpg">
<meta property="og:image:secure_url"
      content="https://s.yamal.dev/ogp.jpg">
<meta property="og:image:type"
      content="image/jpeg">
<meta property="og:image:width"
      content="1200">
<meta property="og:image:height"
      content="630">
<meta property="og:image:alt"
      content="Happy people are smiling">

Массивы

<meta property="og:image"
      content="https://mefody.dev/og-s.jpg">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">

<meta property="og:image"
      content="https://mefody.dev/og-l.jpg">
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="1000">

og:locale
↓
ru_RU, en_US

og:determiner
↓
a, an, the, "", auto

fb:app_id

og:asset
↓
3D asset URL

> 200 x 200

< 8 МБ

HD: 1200 х 630

> 600 х 315

<meta name="twitter:card"
      content="summary">

twitter:card
↓
summary
summary_large_image
app
player

twitter:site
↓
@dev_tip

twitter:creator
↓
@dark_mefody

Cards Markup
Tag Reference

og:title, mrc__share_title или twitter:title

vk:image

> 510 x 228

> 160 x 160

<meta name="pinterest-rich-pin"
      content="false">

og:availability
↓
instock, preorder, backorder,
out of stock, discontinued

Twitter
↓
Twitterbot/1.0

Facebook
↓
facebookexternalhit/1.1

VK
↓
Mozilla/5.0 (compatible; vkShare; +http://vk.com/dev/Share)

Telegram
↓
TelegramBot (like TwitterBot)

robots.txt

User-agent: Twitterbot
Disallow:

Картинки кэшируются

По урлу

The Twitter web crawler re-indexes the Card tag information on your page roughly every seven days.

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({
    width: 1200,
    height: 630,
    deviceScaleFactor: 1,
});
await page.goto(url);
const screenshotBuffer = await page.screenshot({
    fullPage: false,
    type: 'png',
});
await page.close();

Live Coding 💻