๐Ÿ‘ป Social media url ๋งํฌ ๊ณต์œ  ๋ฏธ๋ฆฌ๋ณด๊ธฐ, Open graph, Twitter card

bbio3oยท2021๋…„ 8์›” 20์ผ
0

๐Ÿ‘ฉโ€๐Ÿ’ป ๋…ธํŠธ

๋ชฉ๋ก ๋ณด๊ธฐ
6/10
post-thumbnail

๐Ÿ“Œ Open graph๋ž€?

์˜ค๋Š˜๋‚  ํŽ˜์ด์Šค๋ถ์ด๋‚˜, ๋„ค์ด๋ฒ„ ๋ธ”๋กœ๊ทธ, ์นด์นด์˜คํ†ก ๋“ฑ์—์„œ ์–ด๋–ค ๋งํฌ์— ๋Œ€ํ•œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ œ๋ชฉ, ์„ค๋ช…, ์ด๋ฏธ์ง€๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
์ด๋Š” SEO์™€ ๊ด€๋ จ์ด ์žˆ๊ธฐ๋„ ํ•˜๋ฉฐ ๋งˆ์ผ€ํŒ…์—์„œ ์ค‘์š”ํ•œ ์š”์†Œ์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค.
์ด ๊ธฐ๋Šฅ์ด ๊ฐ€๋Šฅํ•œ ์ด์œ ๋Š” html์•ˆ head์˜ meta tag์— ์ด๋ฅผ ์œ„ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.
์•„๋ž˜ ๋งํฌ ์ฐธ์กฐ
์ฐธ์กฐ ๋งํฌ
์˜คํ”ˆ๊ทธ๋ž˜ํ”„ ์›นํŽ˜์ด์ง€


๐Ÿ“Œ social media url ๊ณต์œ  meta tag ์ž‘์„ฑ

ํŽ˜์ด์Šค๋ถ, ๋งํฌ๋“œ์ธ์€ Open Graph ์‚ฌ์šฉ
ํŠธ์œ„ํ„ฐ๋Š” twitter card ์‚ฌ์šฉ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" value="{{ description }}">
    <meta property="og:title" content="{{ OG_TITLE }}" />
    <meta property="og:description" content="{{ OG_DESCRIPTION }}" />
    <meta property="og:type" content="{{ OG_TYPE }}">
    <meta property="og:url" content="{{ OG_URL }}">
    <meta property="og:image" content="{{ metaImage }}" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="1200" />

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@SamsungMobile">
    <meta name="twitter:creator" content="@SamsungMobile">
    <meta name="twitter:image" content="{{ metaImage }}">
    <meta name="twitter:title" content="{{ OG_TITLE }}">
    <meta name="twitter:description" content="{{ OG_DESCRIPTION }}">
    <title>Example App</title>

    <link href="/css/app.css" rel="preload" as="style">
    <link href="/css/app.css" rel="stylesheet">
  </head>
  <body>
    {{{body}}}
  </body>
</html>

๐Ÿ“Œ ๊ณต์œ  ๋ฒ„ํŠผ ๋งŒ๋“ค๊ธฐ

// Facebook share button
<a class="facebook-share-button"
  href="http://www.facebook.com/sharer/sharer.php?u=๊ณต์œ ํ•  url >
Facebook</a>

// Twiiter share button
<a class="twitter-share-button"
  href="https://twitter.com/intent/tweet?text=exampleTxt&url=https://google.com&hashtags=hello,world">
Tweet</a>

// Linkedin share button
<a class="twitter-share-button"
  href="https://www.linkedin.com/sharing/share-offsite/?url=๊ณต์œ ํ•  url">
Linkedin</a>

๐Ÿ“Œ ํ”Œ๋žซํผ๋ณ„ ๊ณต์œ  ํ…Œ์Šคํ„ฐ, ๋””๋ฒ„๊ฑฐ

Facebook debugger ํŽ˜์ด์Šค๋ถ
Twitter card validator ํŠธ์œ„ํ„ฐ
Linkedin post inspector ๋งํฌ๋“œ์ธ

โ— locahost url๋กœ๋Š” ํ…Œ์ŠคํŠธ ๋ถˆ๊ฐ€
localtunnel๋‚˜ ngrok ๋“ฑ์„ ์ด์šฉํ•ด ํ…Œ์ŠคํŠธ ๊ฐ€๋Šฅ
localtunnel ํŽ˜์ด์ง€

localtunnel ์‚ฌ์šฉ๋ฒ•

โ— ํ•˜์ง€๋งŒ ํŽ˜์ด์Šค๋ถ์€ ์•„๋ž˜์™€ ๊ฐ™์ด localtunnel๋กœ๋„ ํ…Œ์ŠคํŠธ ๋ถˆ๊ฐ€.. ์ง์ ‘ ํ—ค๋กœ์ฟ ๋กœ ๋ฐฐํฌํ•˜๊ณ  ํ…Œ์ŠคํŠธ ์ง„ํ–‰ํ•จ๐Ÿ˜ข


๐Ÿ“Œ ๊ณต์œ  ์ด๋ฏธ์ง€ ์‚ฌ์ด์ฆˆ

[ํŽ˜์ด์Šค๋ถ]
https://developers.facebook.com/docs/sharing/webmasters/images
1.91:1 ๋น„์œจ ์ง€์›, ์ด๋ฏธ์ง€ ํŒŒ์ผ ํฌ๊ธฐ ์ตœ๋Œ€ 8MB, ๊ณ ํ•ด์ƒ๋„ ๊ธฐ๊ธฐ์—์„œ ์ตœ์ƒ์˜ ํ™”์งˆ๋กœ ํ‘œ์‹œ๋˜๋ ค๋ฉด ์ตœ์†Œ 1200 x 630ํ”ฝ์…€ ์ด์ƒ์˜ ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ํฌ๊ธฐ๊ฐ€ ํฐ ์ด๋ฏธ์ง€๋ฅผ ํฌํ•จํ•œ ๋งํฌ ํŽ˜์ด์ง€ ๊ฒŒ์‹œ๋ฌผ์„ ํ‘œ์‹œํ•˜๋ ค๋ฉด ์ตœ์†Œ 600 x 315ํ”ฝ์…€ ์ด์ƒ์˜ ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

[ํŠธ์œ„ํ„ฐ]
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image
Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.

[ํ”Œ๋žซํผ ๋ณ„ ์ด๋ฏธ์ง€ ์‚ฌ์ด์ฆˆ ์ •๋ณด]
์†Œ์…œ ๋ฏธ๋””์–ด ์ด๋ฏธ์ง€ ์‚ฌ์ด์ฆˆ ๊ฐ€์ด๋“œ๋ผ์ธ 2021
Social Media Image Sizes in 2021: Guidelines for Posts on 5 Major Networks


๐Ÿ“Œ ์ œํ•œ์‚ฌํ•ญ

ํ•ด์‹œํƒœ๊ทธ, ๊ณ ์ •๋ฌธ๊ตฌ๋ฅผ prefillํ•˜๊ณ  ์‹ถ์€๋ฐ ํ”Œ๋žซํผ ๋ณ„๋กœ ์ง€์›์ด ๋‹ค๋ฆ„
์ •์ฑ…์ด ๋ช‡ ๋…„ ๋‹จ์œ„๋กœ ์ž์ฃผ ๋ฐ”๋€Œ๋Š” ๋“ฏํ•จ
ํ˜„์žฌ ๊ธฐ์ค€์œผ๋กœ ์•„๋ž˜ ์ œํ•œ์‚ฌํ•ญ์ด ์žˆ์Œ


[ํŽ˜์ด์Šค๋ถ]
stackoverflow ์ฐธ์กฐ

  • ํ•ด์‹œํƒœ๊ทธ (facebook SDK ์‚ฌ์šฉ์‹œ 1๊ฐœ ๊ฐ€๋Šฅ)
  • ์ •์ฑ…์ƒ ๊ณ ์ • ๋ฌธ๊ตฌ(์œ ์ €๊ฐ€ ์ž‘์„ฑํ•˜๋Š” ๋ถ€๋ถ„) ๋ถˆ๊ฐ€
    -> quote์˜ pre-fill์€ ๊ฐ€๋Šฅ ํ•˜๋‚˜ ์•„๋ž˜์™€ ๊ฐ™์ด ํฐ ์ด๋ฏธ์ง€ ์‚ฌ์ด์ฆˆ์ž„์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ด๋ฏธ์ง€ ์‚ฌ์ด์ฆˆ๊ฐ€ ์ž‘๊ฒŒ ๋ณด์ž„
  • ์ƒˆ ์ด๋ฏธ์ง€์— ์ƒˆ URL์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด ์ด๋ฏธ์ง€๊ฐ€ ์—…๋ฐ์ดํŠธ๋˜์ง€ ์•Š์Œ
    -> ๋‚ด๊ฐ€ ํ…Œ์ŠคํŠธํ•œ ๊ฒฝ์šฐ๋Š” meta image tag๋ฅผ ๋™์ ์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ๋Š” ์ƒํ™ฉ์ด๋ผ localhost/?id=imageId ์ฒ˜๋Ÿผ ์ฟผ๋ฆฌ๊ฐ€ ๋ณ€ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฏธ์ง€ ์—…๋ฐ์ดํŠธ์— ๋ฌธ์ œ๊ฐ€ ์—†์—ˆ๋‹ค. ๊ฐ•์ œ๋กœ ํŽ˜์ด์Šค๋ถ์ด recrawl ํ•  ์ˆ˜ ์žˆ๊ฒŒ ์š”์ฒญํ•˜๋Š” ๋ฐฉ์‹๋„ ์žˆ๋‹ค.

[ํŠธ์œ„ํ„ฐ]

  • ํ•ด์‹œํƒœ๊ทธ ์‚ฌ์šฉ๊ฐ€๋Šฅ
  • ๊ณ ์ •๋ฌธ๊ตฌ ์‚ฌ์šฉ๊ฐ€๋Šฅ

[๋งํฌ๋“œ์ธ]

  • ํ•ด์‹œํƒœ๊ทธ ์‚ฌ์šฉ๋ถˆ๊ฐ€ ์˜ˆ์ƒ
  • ๊ณ ์ •๋ฌธ๊ตฌ ์‚ฌ์šฉ๋ถˆ๊ฐ€ ์˜ˆ์ƒ
    stackoverflow ์ฐธ์กฐ

profile
๊ทธ๋ฆผ๋„ ๊ทธ๋ฆฌ๋Š” ๊ฐœ๋ฐœ์ž ๐ŸŽจ๐Ÿ‘ฉโ€๐Ÿ’ป

0๊ฐœ์˜ ๋Œ“๊ธ€