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

Никита Дубко, HR Tech @ Yandex

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

Никита Дубко, HR Tech @ Yandex

Кто я?

Веб-стандарты

Сделай мне красиво!

Create Your Own Automated Social Images With Resoc
Recycling Open Graph images for display on my web site
Respecting Users’ Motion Preferences

The
Open Graph
protocol

The Open Graph protocol 
<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

video.movie

Open Graph Types

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

Facebook

Руководство по публикации для веб-мастеров

fb:app_id

og:asset
↓
3D asset URL

How to Specify 3D Assets for Link Sharing

> 200 x 200

Изображения в публикациях ссылок

< 8 МБ

HD: 1200 х 630

> 600 х 315

Twitter

Twitter Cards 
<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

VK

Публикации ВКонтакте

og:title, mrc__share_title или twitter:title

vk:image

> 510 x 228

> 160 x 160

Pinterest

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

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

Crawlers 🕷

Twitter
↓
Twitterbot/1.0

Facebook
↓
facebookexternalhit/1.1

Краулер Facebook

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

Telegram
↓
TelegramBot (like TwitterBot)

robots.txt

User-agent: Twitterbot
Disallow:
monperrus/crawler-user-agents

Как проверить?

Twitter Card validator
Facebook: отладчик репостов
LinkedIn Post Inspector
@webpagebot
VK: pages.clearCache
metatags.io
OG Spy

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

По урлу

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

Прикручиваем og:image

A framework for building Open Graph images
Vercel
11ty/api-opengraph-image

Пишем велосипед
на электродвигателе

Puppeteer 
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 💻

Больше кода!

Be lazy!

mefody.dev/talks/lazy-og/yamal.html
@dark_mefody
n.a.dubko@gmail.com QR-код со ссылкой на доклад