A framework for building Open Graph images
EngineeringProductA framework for building Open Graph imagesWe recently set about creating a framework and service for automatically generating social sharing images for repositories and other resources on GitHub. You know that feeling when you make your latest hack project public, and you’re ready to share it with the world? And when you go to Twitter to post a link to your repository, you just s
OGPç”»åƒã‚’ç°¡å˜ã«ä½œã‚Œã‚‹vercelã®Runtimeを作りã¾ã—ãŸï¼
ã©ã†ã‚‚〠@uzimaru0000 ã§ã™ã€‚ タイトルã«ã‚‚ã‚るよã†ã« OGP ç”»åƒã‚’ç°¡å˜ã«ä½œã‚Œã‚‹ vercel ã® Runtime を作りã¾ã—ãŸã€‚ 作ã£ãŸã‚‚㮠使ã„æ–¹ã¨ã—ã¦ã¯ vercel.json ã«ä»¥ä¸‹ã®ã‚ˆã†ã«è¨˜è¿°ã—ã¾ã™ã€‚ { "version": 2, "functions": { "api/**/*.(html|tsx)": { "runtime": "@uzimaru0000/vercel[email protected]", "memory": 1024 } } } functions ã® api/**/*.(html|tsx) ã«å¯¾å¿œã™ã‚‹ãƒ•ã‚¡ã‚¤ãƒ«ãŒã“ã® Runtime ã§å‡¦ç†ã•ã‚Œã¾ã™ã€‚ html 㨠tsx ã«å¯¾å¿œã—ã¦ã„ã¾ã™ã€‚ tsx ã¯ã€React ã® Component ã‚’ default 㧠export ã™ã‚‹ã“ã¨ã§ãã® Component ã‚’å…ƒã«ã—㟠OGP ç”»åƒãŒç”Ÿæˆã•ã‚Œ
ホルモン記事を書ã„ãŸã‚‰ã€OGPãŒã·ã‚Šã£ã·ã‚Šã¨è¤’ã‚られ（？）ã¾ã—㟠- ayanologã¯ã¦ãªé¤¨
ãªã‚“ã¨ï¼ ã¯ã¦ãªã®ä¸ã®äººã«ãŠå‘¼ã°ã‚Œã—ã¦ã€ã“ã‚“ãªè¨˜äº‹ã‚’書ã‹ã›ã¦ã„ãŸã ã„ãŸã®ã§ã™ã€‚ãˆã£ã¸ã£ã¸ã€‚ãã®è¨˜äº‹ãŒå…¬é–‹ã•ã‚ŒãŸã®ã§ã€æº€ã‚’æŒã—ã¦å®£ä¼ãŠçŸ¥ã‚‰ã›ã—ã¾ã™ï¼ →　ã€ãã‚‹ãªã³Ã—ã¯ã¦ãªãƒ–ãƒã‚°ä¼ç”»ã€‘第4週 æ±äº¬ã®æ±å´ã§ã´ã£ã‹ã´ã‹ã®ãƒ›ãƒ«ãƒ¢ãƒ³ã‚’焼ã - ã¿ã‚“ãªã®ã”ã¯ã‚“ グルメ系サイトã®è€èˆ—ã«ã—ã¦å¤§æ‰‹ã€Œãã‚‹ãªã³ã€ã¨ã€ã¯ã¦ãªãƒ–ãƒã‚°ãŒã‚¿ãƒƒã‚°ã‚’組ã¿ã€ã¯ã¦ãªãƒ–ãƒã‚¬ãƒ¼ã®ä¸ã‹ã‚‰4人ãŒäº¤ä»£ã§ã‚°ãƒ«ãƒ¡è¨˜äº‹ã‚’連載ã™ã‚‹ã€ã¨ã„ã†ä¼ç”»ã€‚4週連続ã®ä¼ç”»ã§ãƒˆãƒªã‚’勤ã‚ã•ã›ã¦ã„ãŸã ãã¾ã—ãŸã€‚ã©ã‚Œã‚‚ã™ã”ãé¢ç™½ã„ã§ã™ã€‚ ã€ãã‚‹ãªã³Ã—ã¯ã¦ãªãƒ–ãƒã‚°ä¼ç”»ã€‘ 第1週 1人ã ã‘ã©1人ã§ã¯ãªã„地元ã§ã®ã²ã¨ã‚Šé£²ã¿Â （ id:rocketboy_miya ã•ã‚“） 第2週 ç«‹ã¡é£²ã¿ã§ã‚«ã‚¦ãƒ³ã‚¿ãƒ¼ã®å‘ã“ã†å´ã«ã‚る景色を探ã™Â （ id:pinkpeco ã•ã‚“） 第3週 気軽ã«å¤ã良ãæ±äº¬ã‚’æ„Ÿã˜ã‚‰ã‚Œã‚‹ç”˜å‘³å‡¦3è»’Â Â ( id:thyself2005 ã•ã‚“) 第4週 æ±äº¬ã®æ±å´
Facebookã®OGPç”»åƒã«ã€Œé¡”ã€ãŒå…¥ã£ã¦ã„ã‚‹å ´åˆã®ãƒˆãƒªãƒŸãƒ³ã‚°ä½ç½®ã«ã¤ã„ã¦ã¾ã¨ã‚
Facebookã®OGPç”»åƒã®ã‚µã‚¤ã‚ºã¨ã€ãƒ‹ãƒ¥ãƒ¼ã‚¹ãƒ•ã‚£ãƒ¼ãƒ‰ã§ã®è¡¨ç¤ºã‚µã‚¤ã‚ºã«ã¤ã„ã¦ã¯ã€éŽåŽ»ã«ã‚‚数回ã«æ¸¡ã£ã¦ã¾ã¨ã‚ã¦ã„ã¾ã™ãŒã€ä»Šå›žã¯ç”»åƒã®ä¸ã«äººé–“ã®é¡”ãŒå…¥ã£ã¦ã„ã‚‹å ´åˆã®å‹•ãã«ã¤ã„ã¦æ¤œè¨¼ã—ã¦ã¿ã¾ã™ã€‚ ã©ã†ã‚„らã€ç”»åƒå†…ã«äººé–“ã®é¡”ãŒå…¥ã£ã¦ã„ã‚‹å ´åˆã€ãƒˆãƒªãƒŸãƒ³ã‚°ã®ä»•æ§˜ãŒé€šå¸¸ã¨ã¯ç•°ãªã‚Šã€é¡”ã®ä½ç½®ã‚’自動検出ã—ã¦ãã“を起点ã«ãƒˆãƒªãƒŸãƒ³ã‚°ã‚’è¡Œã†ã‚ˆã†ã§ã™ã€‚ ãªã‚“ã¨è¨€ã†ä½™è¨ˆãªãŠä¸–話ãƒã‚¤ãƒ†ã‚¯ã‚·ã‚¹ãƒ†ãƒ ï¼ â€»éŽåŽ»ã®Facebook OGPç”»åƒé–¢é€£ã®ã¾ã¨ã‚ Facebookã®OGPç”»åƒã®ä»•æ§˜ãŒã¾ãŸå¤‰æ›´ã€‚ニュースフィードã§ã‚‚タイムラインã§ã‚‚æ¬ ã‘ãªã„よã†ã«ã™ã‚‹æ–¹æ³•ã€‚（スマホ対応ï¼æœ€æ–°ç‰ˆã€€â€»9.21追記） Facebookã®OGPç”»åƒã€æœ€æ–°ã‚µã‚¤ã‚ºã§ã®ä½œæˆä¾‹ã‚’ã”紹介 本題ã«å…¥ã‚‹å‰ã«ã€ç°¡å˜ã«ãŠã•ã‚‰ã„ã§ã™ã€‚ Facebookã®OGPç”»åƒã®ãƒ‹ãƒ¥ãƒ¼ã‚¹ãƒ•ã‚£ãƒ¼ãƒ‰ä¸Šã®ã‚µã‚¤ã‚ºã¯ã€w1.91：h1 w468px以上ã§ãªã„ã¨å¤§ãã表示ã•ã‚Œãªã„（※Face
OGPやメタè¦ç´ をサイト全体一括ãƒã‚§ãƒƒã‚¯ã§ãるツール | ブãƒã‚° | SINAP - æ ªå¼ä¼šç¤¾ã‚·ãƒŠãƒƒãƒ—
開発者å‘ã‘ã«OGPè¨å®šç‰ã‚’ã¾ã¨ã‚ã¦ãƒã‚§ãƒƒã‚¯ã™ã‚‹ãƒ–ックマークレットを作æˆã—ã¾ã—ãŸã€‚先輩ã®æŸ¿å†…ãŒä»¥å‰ã«ã‚‚「OGPタグ確èªã«ä¾¿åˆ©ï¼ãƒ–ックマークレットã§æ‰‹æ—©ããƒã‚§ãƒƒã‚¯ã€ã¨ã„ã†è¨˜äº‹ã§ãƒ–ックマークレットを公開ã—ã¦ã„ã¾ã™ãŒã‚ã‚Œã®ãƒ‘クr・・・もã¨ã„ã€ãƒªã‚¹ãƒšã‚¯ãƒˆã—ãŸæ‹¡å¼µç‰ˆã¿ãŸã„ãªç‰©ã§ã™ã€‚ ソースã¯ä¸€ã‹ã‚‰å…¨ã¦æ›¸ãã¾ã—ãŸã®ã§ã€å¾Œç¶™ç‰ˆã¨ã‹ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã‚¢ãƒƒãƒ—ã§ã¯ãªãã€å…¨ã別もã®ã¨ãªã£ã¦ãŠã‚Šã¾ã™ã€‚ ãªãœã“れを作ã£ãŸã‹ã¨ã„ã†ã¨ã€ä»¥å‰ã®ç‰©ã‚‚機能ã¯å分ã ã£ãŸã®ã§ã™ãŒã€Œãƒšãƒ¼ã‚¸æ•°ãŒå¤šããªã‚‹ã¨ç¢ºèªãŒé¢å€’ãã•ã„ã€ã¨ã„ã†ã„ã‹ã«ã‚‚ダメãªã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢æ€è€ƒ(ディレクターã•ã‚“ã«ã‚‚åŒæ„ã‚’å¾—ã¾ã—ãŸãŒ)ã«ä¾ã‚Šã¾ã™ã€‚一回ã§å…¨éƒ¨ãƒã‚§ãƒƒã‚¯ã§ããŸã‚‰ã‚ˆãã？ã£ã¦ã„ã†äº‹ã§ä½œã‚Šã¾ã—ãŸã€‚ ã“ã®OGPãƒã‚§ãƒƒã‚¯/サイトマップãƒãƒ¼ãƒ€ãƒ¼ã¯å‹•ä½œã—ãŸã‚¦ã‚§ãƒ–ページã®sitemap.xmlã‚’å–å¾—ã—解æžã€è¨˜è¼‰ã•ã‚Œã‚‹å…¨ã¦ã®URLã‚’èªã¿è¾¼ã‚“ã§OGPã‚¿ã‚°ç‰ã®è¨å®šã‚’ãƒã‚§ãƒƒã‚¯ã—ã¾ã™ã€‚特性上大é‡
Google+ 㯠OGP より Microdata を優先ã™ã‚‹ã¿ãŸã„
Google+ ã«ãƒªãƒ³ã‚¯ã‚’投稿ã™ã‚‹éš›ã€ãƒšãƒ¼ã‚¸ã«æŒ‡å®šã•ã‚ŒãŸ OGP よりも Microdata ã®æ–¹ãŒå„ªå…ˆã•ã‚Œã‚‹ã“ã¨ã§èµ·ã“ã£ãŸå•é¡Œã¨ã€ãã®è§£æ±ºæ–¹æ³•ã«ã¤ã„ã¦è§£èª¬ã—ã¾ã™ã€‚ ã“ã® Blog ã§ã¯ã€Google+ ページもé‹ç”¨ã—ã¦ã„ã¦ã€è¨˜äº‹ã‚’æ›´æ–°ã—ãŸéš›ã«ãã£ã¡ã«ã‚‚投稿ã—ã¦ã„ã¾ã™ã€‚ ã¨ã“ã‚ãŒã€ã¡ã‚‡ã£ã¨å‰ã‹ã‚‰ãƒªãƒ³ã‚¯ã‚’投稿ã—ãŸã¨ãã«ã€OGP （Open Graph Protocol） ã«æŒ‡å®šã—ãŸæ¦‚è¦æ–‡ （og:description ã®å€¤ã«å…¥ã‚Œã¦ã‚‹ãƒ†ã‚スト） ã¨ã‹ãŒç„¡è¦–ã•ã‚Œã¦ã€Blog 自体ã®æ¦‚è¦ãŒå‡ºã¡ã‚ƒã£ã¦ã€ãªã‚“ã§ã‹ãªãã£ã¦æ€ã„ãªãŒã‚‰ã‚‚今度調ã¹ã‚ˆã£ã¦ã“ã¨ã§æ”¾ç½®ã—ã¦ã„ãŸã‚ã‘ã§ã™ãŒã€ã•ã£ãã¡ã‚‡ã£ã¨æ™‚間を見ã¤ã‘ã¦ãƒ†ã‚¹ãƒˆã—ã¦ã¿ãŸã‚‰ã€ã©ã†ã‚‚ Microdata ã®æŒ‡å®šã®ä»•æ–¹ã§ã“ã†ã„ã†ç¾è±¡ãŒèµ·ã“るらã—ã„ã“ã¨ãŒã‚ã‹ã£ãŸã®ã§ã€å…±æœ‰ã—ã¾ã™ã€‚ 具体的ã«ã©ã†ã„ã†ç¾è±¡ãŒèµ·ã“ã‚‹ã‹ OGP ã«æŒ‡å®šã—ãŸæ¦‚è¦æ–‡ãŒç„¡è¦–ã•ã‚Œã‚‹ä»¶ã§ã™ãŒã€ä¾‹
Chrome ã®æ‹¡å¼µæ©Ÿèƒ½ã§ogpã¨ã‹ã‚’確èªã™ã‚‹ã®ã‚’作ã£ã¦ã¿ãŸ - ã‚も帖
Chrome ã®æ‹¡å¼µæ©Ÿèƒ½ã§ogpã¨ã‹ã‚’確èªã™ã‚‹ã®ã‚’作ã£ã¦ã¿ã¾ã—ãŸã€‚ 確èªã§ãã‚‹é …ç›®ã¯ã€ ogp:title ogp:url ogp:description ogp:image canonical title description keywords ogpã®çŠ¶æ…‹ã‚’確èªã™ã‚‹ã®ãŒã€HTMLを見ãŸã‚Šã€facebookã®ãƒ„ールã§ç¢ºèªã—ãŸã‚Šï¼ˆã“ã‚ŒãŒä¸€ç•ªç¢ºå®Ÿãªã‚“ã§ã™ãŒï¼‰ã™ã‚‹ã®ãŒé¢å€’ã«ãªã‚Šã¾ã—ãŸã€‚ãã“ã§ã€Bookmarklet（ブックマークレット）ã§ã‚„ã£ã¦ã¿ã‚ˆã†ã¨ã—ã¦ã„ãŸã‚“ã§ã™ãŒã€Chrome ã®æ‹¡å¼µæ©Ÿèƒ½ã®æ–¹ãŒã€è¦‹ã‚„ã™ã„ã‹ã‚‚？ãªã‚“ã¦æ€ã£ã¦ä½œã£ã¦ã¿ã¾ã—ãŸã€‚ 「WEB+DB PRESS Vol.72ã€ã«ã€ŒBacklog/Cacoo開発ノウãƒã‚¦å¤§å…¬é–‹ã€ã¨ã„ã†ç‰¹é›†ãŒã‚ã‚Šã€ä½•ã‹ã‚ã‚‹ã¨ã€ŒChrome ã®æ‹¡å¼µæ©Ÿèƒ½ã§...ã€ã¨ã„ã†è§£æ±ºæ–¹æ³•ã‚’見るã¨ã€ã“ã‚Œã¯ã“ã‚Œã§ã‚¢ãƒªãªã®ã‹ãªã‚...ã¨æ€ã£ã¦ã„ã¾ã—ãŸã€‚å•é¡Œè§£æ±ºã®ç‚ºã«ã¡ã‚‡ã£ã¨
Facebookã®OGPã‚’ç°¡å˜ã«ç¢ºèªã™ã‚‹ãŸã‚ã®5ã¤ã®ä¾¿åˆ©ãƒ„ール | Creazy!
ã”無沙汰ã—ã¦ãŠã‚Šã¾ã™ã€ãƒ¤ã‚¬ãƒ¼ã§ã™ã€‚ 今ã¾ã§ã®Facebook関連ã®ãƒã‚¿ã‚„ã€OGPã«é–¢ã™ã‚‹è¨˜äº‹ã‚’書ã„ã¦ãã¾ã—ãŸãŒã€ã•ã™ãŒã«ä¼æ¥ã‚µã‚¤ãƒˆã‚„ブãƒã‚°ãªã©ã§ã¯OGPã®è¨å®šãŒæµ¸é€ã—ã¦ãã¦ã„ã‚‹ã¨æ€ã„ã¾ã™ã€‚OGPãŒã‚ã‚‹ã¨ãªã„ã¨ã§ã¯ã‚¦ã‚©ãƒ¼ãƒ«ã«æµã‚ŒãŸéš›ã®åå¿œãŒå…¨ç„¶é•ã„ã¾ã™ã‹ã‚‰ã。ã§ã€ã“ã®OGPãªã‚“ã§ã™ãŒFacebookã¯ãƒ‘フォーマンスã®ãŸã‚ã‹ä¸€åº¦èªã‚“ã ã‚‚ã®ã¯ã‚ャッシュã—ã¦ã—ã¾ã„ã¾ã™ã€‚metaã‚¿ã‚°ã®æ§‹æˆã‚’変ãˆãŸã‚Šã€ãã‚‚ãも記事内容を変更ã—ãŸã¨ã—ã¦ã‚‚ã€1度ã§ã‚‚ã„ã„ãï¼æŠ¼ã•ã‚Œã¦ã„ã‚‹ã¨ãã®çŠ¶æ…‹ã®OGPè¨å®šãŒæ®‹ã£ã¦ã—ã¾ã„ã¾ã™ã€‚ ãã“ã§ã€OGPã®è¨å®šã‚’確èªã™ã‚‹ãŸã‚ã®Facebookå…¬å¼ãƒ„ール「デãƒãƒƒã‚¬ãƒ¼ã€ã‚’使ã†ã®ã§ã™ãŒã€ã“ã®ãƒ‡ãƒãƒƒã‚¬ãƒ¼ã‚’使ã†ã¨ã‚ャッシュもクリアã§ãã‚‹ã®ã§ã€è¡¨ç¤ºãŒåˆ‡ã‚Šæ›¿ã‚らãªã„ã£ã¦å ´åˆã«ã‚‚有効ã§ã™ã€‚ ã“ã®ãƒ‡ãƒãƒƒã‚¬ãƒ¼é–¢é€£ã®ä¾¿åˆ©ãƒ„ールを５ã¤ç´¹ä»‹ã—ã¾ã™ã€‚ １）Facebookå…¬å¼ãƒ‡ãƒãƒƒã‚¬ãƒ¼ デãƒãƒƒã‚¬ãƒ¼ – Face
Six Apart ブãƒã‚°ç·¨é›†ä¼šè° vol.1 〜 OGPãŒé›£ã—ã„ï¼ç·¨-Six Apart ブãƒã‚°ï½œã‚ªã‚¦ãƒ³ãƒ‰ãƒ¡ãƒ‡ã‚£ã‚¢é‹å–¶è€…ã®ãŸã‚ã®å®Ÿè·µçš„æƒ…å ±ã¨ã‚³ãƒŸãƒ¥ãƒ‹ãƒ†ã‚£
ã“ã‚“ã«ã¡ã¯ã€‚マーケティング担当ã®ä¼Šè—¤å¤§åœ°ã§ã™ã€‚ 今回ã¯ã€ã‚ªãƒ¼ãƒ—ン＆シェアã¨ã„ã†ã“ã¨ã§ã€å…ˆæ—¥è¡Œã‚ã‚ŒãŸSix Apart ブãƒã‚°ã®ç·¨é›†ä¼šè°ã®æ¨¡æ§˜ã‚’ãŠä¼ãˆã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ã“ã®ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã¯ã€ä¼ç”»æ®µéšŽã‹ã‚‰ãƒ¯ã‚¤ãƒ¯ã‚¤ã‚¬ãƒ¤ã‚¬ãƒ¤ã€ã¿ã‚“ãªã§å†—談を交ãˆã¦è«‡ç¬‘ã—ãªãŒã‚‰æº–å‚™ã—ã¦ãã¾ã—ãŸã€‚ãã‚“ãªç¾å ´ã®ç©ºæ°—æ„ŸãŒå°‘ã—ã§ã‚‚ä¼ã‚ã‚‹ã¨ã„ã„ãªã¨æ€ã„ã¾ã™ã€‚ã§ã¯ã€ã©ã†ãžã€‚ ã¾ãšã¯ã‚¢ã‚¯ã‚»ã‚¹çŠ¶æ³ 無事ã€27æ—¥ã«Six Apart ブãƒã‚°ãŒã‚ªãƒ¼ãƒ—ンã—ã¾ã—ãŸã€‚今日ã€å¤§è¶Šã•ã‚“ã®Facebookã«ã¤ã„ã¦ã®å¤§ä½œãŒå…¬é–‹ã•ã‚Œã¾ã—ã¦ã€ã¾ãšã¯ã‚¢ã‚¯ã‚»ã‚¹çŠ¶æ³ã‚’見ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚ ã ã„ãŸã„ã€ï¼ˆã‚ªãƒ¼ãƒ—ンã—ã¦1æ—¥åŠã§ï¼‰2,000を超ãˆã‚‹ãらã„ã§ã™ã。æµå…¥çµŒè·¯ã¯Facebookã¨TwitterãŒåœ§å€’çš„ã§ã™ã€‚当ãŸã‚Šå‰ã§ã™ã‘ã©ã€æœ€åˆã®è¨˜äº‹ãŒã€Œã¯ã˜ã‚ã¾ã™ã€ã¨ã„ã†å†…容ã ã‘ãªã®ã§ã€æ¤œç´¢ã‹ã‚‰ã®æµå…¥ã¯ãªã„ã§ã™ã。 ãŠæ˜¼ä¼‘ã¿å‰ã®æ™‚間帯ã«å…¬é–‹ã—ã¦ã€ä¸€æ™‚é–“ãらã„ã§ä¸€æ°—ã«ã‚¢ã‚¯ã‚»ã‚¹
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
GitHub - vercel/og-image: Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc
{{#tags}}- {{label}}
{{/tags}}