è¿é ãTwitterã§URLãã€ã¶ãããšãã¯ã©ã€ã¢ã³ãäžã«ãµã ãã€ã«ãã¿ã€ãã«ãæŠèŠãªã©ããŸãšãŸã£ãã«ãŒãã衚瀺ãããããšããããŸãããïŒ
ãã®ã«ãŒãã«ãããTwitterãèŠããŠãŒã¶ãŒã¯ãµã€ããäœåã®æŠèŠãäœãšãªãææ¡ã§ããŸãããæžãæããããŠããã€ã©ã¹ããæåãªã©ãå«ããã¢ããŒã«å¹æããšãŠãé«ãã®ã¯ãã¿ãªãããæ®æ®µããæããããšããšæããŸãã
ãã®ä»çµã¿ã¯ãOGPïŒOpen Graph ProtocolïŒãšåŒã°ããæ å ±ãTwitterãªã©ã®SNSïŒSocial Networking ServiceïŒåŽãèªèããŠãèŠããã衚瀺ããŠãããæ©èœãå©çšããŠå®çŸãããŠããŸãã
ãã®OGPã§ãããå®ã¯ä»çµã¿ã¯çµæ§ç°¡åã§ãHTMLã¿ã°ãå¢ããã ãã§èªç±ã«èšå®ã»ã«ã¹ã¿ãã€ãºããããšãã§ããŠããŸãã®ã§ãã
ä»åã¯ãHTMLã®åæ©çç¥èã¯ãããã®ã®ããã®å ã¯é£ããã®ã§ããåãããªãâŠâŠãšããæ¹åãã«ãOGPã®ä»çµã¿ãšèšå®æ¹æ³ãç¹èšãµã€ãã察象ã«ããŠè§£èª¬ããŠãããŸãã
OGPã®æãç«ã¡ãã¡ã¿ããŒã¿ãšã®éã
OGPã®èª¬æãããåã«ããŸãã¯ãã¡ã¿ããŒã¿ãã«ã€ããŠèª¬æããããšæããŸãã
ã¡ã¿ããŒã¿ïŒmetadataïŒãã¡ã¿æ å ±ãšã¯ãã¡ã¿ãªããŒã¿ãããªãã¡ããŒã¿ã«ã€ããŠã®ããŒã¿ãšããæå³ã§ãããããŒã¿ãä»éããŠæã€ãã®ããŒã¿èªèº«ã«ã€ããŠã®ä»å çãªããŒã¿ãæãã
ãã®ããŒã¿ãšããã®ã¯ãWebäžãªããã¡ããããŒãžå ã®ã³ã³ãã³ãã®ããšãæããŸãã
ãããŠãHTMLã®äžçã§ã¯ã¡ã¿ããŒã¿ã®æå®ã« <meta>
ãšåŒã°ããã¿ã°ãçšããããšãæšå¥šãããŠããŸããã
Googleæ€çŽ¢ã§ãããã® <meta>
ã®æ
å ±ãéåžžã«éèŠèŠãããŠãããæ€çŽ¢ãšã³ãžã³æé©åïŒSEOïŒãšåŒã°ããä»äºãèªçãããããã§ããããã¯10幎以äžåãããã話ã§ããã
ã§ã¯ããªãOGPãšãã仿§ãåŸããã§ããã®ããšãããšãHTMLã§çšæãããã¡ã¿ããŒã¿ã¯ãã©ãŠã¶ãæ€çŽ¢ãããããšåŒã°ããWebãµã€ããé²èЧããæ©æ¢°ãªã©ãè§£éããããã®ä»æ§ã ã£ã ãšããçç±ããããŸãã
ã€ãŸãã人éåãã®ããŒã¿ã§ã¯ãªããŠãæ©æ¢°åãã®ããŒã¿ã ã£ãããšããããšã§ããã
SNSã§ã¯ã人éããµã€ãã蚪åããªããŠããµã€ãã®æŠèŠãããããããªä»çµã¿ãå¿ èŠã§ãã¡ã¿ã¿ã°ã ãã§ã¯ãã®åœ¹ç®ãæãããªãã£ãã®ã§ãã
ããã§ãSNSåŽã§ãã¡ã¿ããŒã¿ãå©çšããããããFacebookãèãããã®ãããOGPãã«ãªããŸããã¡ã¿ã¿ã°ãæ¡åŒµããããšã§æ©æ¢°ã ãã§ã¯ãªã人éåãã®æ å ±ãå«ããããšãã§ããããã«ãªããŸããã
Twitterãããã®OGPã®ä»æ§ã«åã£ãŠTwitterã«ãŒããšãããã®ã衚瀺ããããã«ãªã£ãŠããŸããããããTwitteräžã§ãµã€ãã®ã«ãŒãã衚瀺ãããä»çµã¿ã§ããã
ãã®äºã€ã¯ããšããšFacebookãšTwitterãããããèããèŠæ Œãªã®ã§ãããäž¡ãµã€ããšãã«çŸåšã®ã€ã³ã¿ãŒãããã«å€§ããªåœ±é¿ãåãŒãããšãããæé»ã®äºè§£ã®èŠæ ŒãšããŠæµéããŠããã®ã宿 ã§ãã
OGPã®èšå®æ¹æ³ãTwitterçšã®æå®
ã§ã¯ãHTMLãã¡ã€ã«ã«èšå®ããŠãããŸãããã
ãããéšåã®ã¿æç²ããŸããããœãŒã¹ã®æžãæ¹ã¯ãã®ããã«ãªããŸãã
<head prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#"> ãã<meta property="og:site_name" content="ãµãŒã¯ã«å"> ãã<meta property="og:title" content="ç¹èšãµã€ãã®ã¿ã€ãã«"> ãã<meta property="og:description" content="ç¹èšãµã€ãã®æŠèŠ"> ãã<meta property="og:type" content="website"> ãã<meta property="og:locale" content="ja_JP"> ãã<meta property="og:image" content="ãµã ãã€ã«ç»åã®URLïŒçµ¶å¯Ÿãã¹ïŒ"> ãã<meta name="twitter:card" content="summary_large_image"> </head>
åé ç®ã«ã€ããŠè§£èª¬ããŠãããŸãã
headã¿ã°ã®prefix屿§
ããã¯ããOGPããããŸããããšäŒããããã®èšè¿°ã«ãªããŸãã
ç¡ããŠãåäœããŠããããã®ã§æ¬åœã«å¿ èŠãªã®ãã¯æªããã§ãããOGPã®å ¬åŒãµã€ãã§ã®ãªãã¡ã¬ã³ã¹ã¯ãããªã£ãŠããã®ã§ãèšèŒããæ¹ãåã§ãã
ä»åã¯ç¹èšãµã€ããªã®ã§ãåŸãã website: http://ogp.me/ns/website#
ãšèšèŒããŠããŸãããããã°ãªã©ã®èšäºããŒãžã®å Žå article: http://ogp.me/ns/article#
ãšããã®ãçæ³ã§ãã
og:site_name
ãµã€ãã®ç·ç§°ãæå®ããŸãã
ç¹èšãµã€ãã®å ŽåããµãŒã¯ã«åãªã©ã奜ãŸããã§ãã
og:title
ããŒãžã®ã¿ã€ãã«ãæå®ããŸãã
ç¹èšãµã€ãã®å Žåãé åžç©ã®ååãªã©ãå
¥ããã®ã奜ãŸããã§ãã
æåæ°ã¯30æåãããã«ããã®ãè¯ãã§ãããã
og:description
ããŒãžã®æŠèŠãæå®ããŸãã
ç¹èšãµã€ãã®å Žåãé åžç©ã®æŠèŠã»ãã£ããã³ããŒãªã©ãæå®ããŸãããã
297æåãŸã§èšå
¥ããããšãå¯èœã§ãã
og:type
ããŒãžã®ã¿ã€ããæå®ããŸãã
ç¹èšããŒãžã®å ŽåãåäžããŒãžãªã®ã§websiteãæå®ããŸãã
ããã°ã ã£ãããããšblogã«ãªããŸãã
og:locale
ããŒãžã®èšèªãæå®ããŸãã
æ¥æ¬åããµã€ãã®å Žåã¯ja_JPã§ååã§ãã
og:image
ãµã ãã€ã«ã«äœ¿ãç»åãURLã§æå®ããŸãã
æ°ãã€ããŠæ¬²ããã®ãã絶察ãã¹ïŒhttp://ãããå§ãŸããã«ãã¹ïŒã§æå®ããªããã°ãããªããšããããšã§ãã
ç»åãµã€ãºã¯æšª1200px瞊630pxãæšå¥šãããŠããŸãã
twitter:card
Summaryã«ãŒã | Twitter Developers
ããã¯OGPã§ã¯ãªããTwitteråãã®è¿œå æå®ã§ããã«ãŒãã®åœ¢ã®æå®ã§ããã
ããã©ã«ãã ãšsummaryæå®ã«ãªã£ãŠããããµã ãã€ã«ãå°ããæ£æ¹åœ¢è¡šç€ºã«ãªããŸãã
ã¿ã€ãã«ãæŠèŠãèŠãããã®ã§ãããã°èšäºãªã©ã¯ãã¡ãã䜿ãããåŸåããããŸãã
ç¹èšãµã€ãã®å Žåããµã ãã€ã«ã倧ãã衚瀺ãããå Žåãå€ãããšæããŸãã
summary_large_imageãšæå®ããããšã§ãµã ãã€ã«ã倧ããé·æ¹åœ¢ã§ç®ç«ã€è¡šç€ºã«ããããšãã§ããŸãã
OGPã®ç¢ºèªãèšè¿°ãã¹ãSNSã®ãã£ãã·ã¥ã«æ³šæ
ãããèšå®ãã§ããããæçš¿ã ïŒããšãªããå®éã«ã¡ãããšèšå®ãã§ããŠããã®ãã確èªããããªããšæããŸãã
ãããã¬ãŒ – éçºè
åãFacebook
OGPãšããŠã®ãã§ãã¯ã¯FacebookãæäŸããŠãããã¡ãã®ãµãŒãã¹ãã確èªããããšãã§ããŸãã
Facebookã®å Žåãå®ã¯Facebookã®ãµãŒããŒåŽã§ãã£ãã·ã¥ãæ®ã仿§ããã£ããããŸãã
ãã®å Žåã¯ãäžèšã®URLãããµãŒããŒã®ãã£ãã·ã¥ãæŽæ°ããŠããããŸãããã
Card Validator | Twitter Developers
Twitterã®è¡šç€ºç¢ºèªã®å Žåãå
¬åŒã§ã«ãŒãã®ãã¬ãã¥ãŒã確èªãããµãŒãã¹ãæäŸãããŠããã®ã§ããã¡ããã確èªããããšããªã¹ã¹ã¡ããŸãã
ãã¬ãã¥ãŒã§ãšã©ãŒãåºãå Žåã¯ãšã©ãŒãã°ãåèã«ééããæ£ããŠè¡ããŸãããã
ããã§ãå®å¿ããŠSNSã§æçš¿ããããšãã§ãããšæããŸãã
ç¹èšãµã€ãã®ãããã

åœãµãŒã¯ã«ã®ãèŒç¢§ã®ç¿Œãç¹èšWEBãµã€ãïŒãžã£ã³ãïŒ
å人çéã®ç¹èšãµã€ãã¯æ¯å¹Žç»å ŽããŸãããåã£ãäœãã®ãµã€ããå¢ããŠããŸããããã
ç¹èšãµã€ããäœãçç±ã£ãŠããã£ã±ãé åžç©ã®æ å ±çºä¿¡ãç®çã ãšæããŸãã
SNSã®æ®åã«ãã£ãŠç¹èšãµã€ããæ¡æ£ããŠãããéèŠæ§ãšããã®ãå¢ãã€ã€ããäžãURLã貌ãã ãã§SNSäžããã¿ã€ãã«ãæŠèŠã»ãµã ãã€ã«ãäŒããOGPã®ååšã¯ãã¢ã¯ã»ã¹æ°ã®ã¡ãã£ãšããæ¯ãã«ãªããšæããŸãã
ã¿ãªããããã²ãç¹èšãµã€ãã«OGPãèšå®ããŠã¿ãŠãã ããã