TwitterカードやOGPãªã©ã€head内ã®metaã«è¨˜è¿°ã™ã‚‹ã‚³ãƒ¼ãƒ‰ã‚’ç°¡å˜ã«ç”Ÿæˆã§ãるオンラインサービス -Hey Metahead内ã®metaã«è¨˜è¿°ã™ã‚‹TwitterカードやFacebookã®OGPã®ã‚³ãƒ¼ãƒ‰ã€Googleãªã©ã®æ¤œç´¢ã‚¨ãƒ³ã‚¸ãƒ³ç”¨ã®ã‚³ãƒ¼ãƒ‰ã‚’確èªãƒ»ç”Ÿæˆã§ãるオンラインサービスを紹介ã—ã¾ã™ã€‚
Facebookã®OGPç”»åƒã®ä»•æ§˜å¤‰æ›´ ã‚ーワードã¯ã€Œ1200px × 630pxã€ã¨ã€ŒPNG〠- OPTPiX Labs Blog
ã“ã‚“ã«ã¡ã¯ã€ã‚¦ã‚§ãƒ–担当ã®å¶‹ã§ã™ã€‚2015å¹´ã‚‚ã©ã†ãžã‚ˆã‚ã—ããŠé¡˜ã„ã„ãŸã—ã¾ã™ã€‚ ã•ã¦ã€ä»¥å‰ã€ŒOGPã‚’è¨å®šã—ã¦ã€Facebookã§ã‚·ã‚§ã‚¢ã—ãŸæ™‚ã®ç”»åƒã‚’大ãã表示ã•ã›ã‚‹æ–¹æ³•ã€ã¨ã„ã†ã‚¨ãƒ³ãƒˆãƒªãƒ¼ã§Facebookã§ã‚·ã‚§ã‚¢ã—ãŸæ™‚ã«è¡¨ç¤ºã•ã‚Œã‚‹ç”»åƒã®ä»¶ã‚’å–り上ã’ã¾ã—ãŸã€‚ãã®å¾ŒFacebookã®ä»•æ§˜ãŒå¤‰æ›´ã•ã‚Œã€ç”»åƒã®å–り扱ã„ãŒå¤‰ã‚ã‚Šã¾ã—ãŸã®ã§æ”¹ã‚ã¦æ•´ç†ã—ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚ã‚ーワードã¯ã€Œ1200px × 630pxã€ã€ãã—ã¦ã€ŒPNGã€ã§ã™ã€‚ 以å‰ã”紹介ã—ãŸå†…容ã®ãŠã•ã‚‰ã„ 以å‰ã®ã‚¨ãƒ³ãƒˆãƒªãƒ¼ã§ã”紹介ã—ãŸç‰©ã‚’ç°¡å˜ã«ãŠã•ã‚‰ã„ã™ã‚‹ã¨ã€ä¸‹è¨˜ã®ã‚ˆã†ã«ãªã‚Šã¾ã™ã€‚ 推奨ã¯ã€Œ1200px × 630pxã€ï¼ˆç¸¦æ¨ªæ¯” 1.91:1） 最低ã§ã‚‚「600px × 315px〠特定ã®æ¡ä»¶ã§ç”»åƒã®ä¸å¿ƒéƒ¨åˆ†ãŒæ£æ–¹å½¢ã«ãƒˆãƒªãƒŸãƒ³ã‚°ã•ã‚Œã‚‹ 特ã«æœ€å¾Œã®ã€Œæ£æ–¹å½¢ã«ãƒˆãƒªãƒŸãƒ³ã‚°ã€ã¯PC用ページã®ã‚¿ã‚¤ãƒ ラインã®ã¿é©ç”¨ã•ã‚Œã‚‹ã¨ã„ã†æ›²è€…ã§ã€å¯¾ç–ã¨ã—ã¦ä¸‹è¨˜ã®ã‚ˆ
記事ã”ã¨ã«OGPã‚’ç°¡å˜è¨å®š for WordPress | Webエンジニアブãƒã‚°
プラグインを使ã‚ãšã«è¨å®š OGPãƒ¡ã‚¿ã‚¿ã‚°ã‚’è¿½åŠ ã™ã‚‹å°‚用ã®ãƒ—ラグインを利用ã›ãšã«ã€HTMLã®headé ˜åŸŸã«ãƒ¡ã‚¿ã‚¿ã‚°ã‚’出力ã™ã‚‹ã‚³ãƒ¼ãƒ‰ã‚’functions.phpã«è¿½åŠ ã™ã‚‹æ–¹æ³•ã§OGPã«å¯¾å¿œã—ã¾ã™ã€‚ ã‚„ã‚Šæ–¹ functions.phpã®å ´æ‰€ WordPressã§è¨å®šä¸ã®ãƒ†ãƒ¼ãƒžå†…ã«functions.phpãŒé…ç½®ã•ã‚Œã¦ã„ã¾ã™ã€‚å…¬å¼ãƒ†ãƒ¼ãƒžtwentythirteenã®å ´åˆã¯ã€ wp-content/themes/twentythirteen/functions.php ã«é…ç½®ã•ã‚Œã¦ã„ã¾ã™ã€‚ コピペã™ã‚‹ã‚³ãƒ¼ãƒ‰ functions.phpã®æœ€å¾Œã«ä¸‹ã®PHPコードをコピーã—ã¦è¿½åŠ ã—ã¾ã™ã€‚ function add_ogp() { // 変数ã®è¨å®š $site_name = get_bloginfo('name'); $permalink = esc_url((empty($_SERVER["HTTPS"]
WordPressã§Facebookã¨Twitterã®OGPã‚¿ã‚°ã‚’è¨ç½®ã™ã‚‹æ–¹æ³•2016Â
ブãƒã‚°ã¸ã®Facebook&Twitterã®OGPã‚¿ã‚°è¨ç½®ã¯ã€ã„ã¾ã‚„å¿…é ˆã¨ãªã£ã¦ã„ã¾ã™ã€‚ã¨ã“ã‚ãŒèª¿ã¹ã¦ã¿ã‚‹ã¨ã€ãªãœã‹ã€OGP専用プラグインè¨ç½®ã§ã‚µã‚¯ãƒƒã¨å®Œäº†ã¨ã¯ã„ã‹ãªã„よã†ã§ã™ã€‚ 利用ã—ã¦ã„るテーマãŒOGPã‚¿ã‚°è¨ç½®ã«å¯¾å¿œã—ã¦ã„ãªã‘ã‚Œã°ã€è‡ªåŠ›ã§ãƒ†ãƒ¼ãƒžã‚’編集ã—ã¦ã—ã¾ã†ã®ãŒã€ä¸€ç•ªç¢ºå®Ÿã§ã™ã€‚ 作æ¥å†…容ã¯ã€ã“ã®é€šã‚Šã§ã™ã€‚ OGPã‚¿ã‚°ã‚’è¨ç½®ã™ã‚‹ç†ç”±ã‚’ç†è§£ã™ã‚‹ header.phpを編集ã™ã‚‹ Facebookã®app_idã‚’å–å¾—ã™ã‚‹ functions.phpã«ã‚³ãƒ¼ãƒ‰ã‚’追記ã™ã‚‹ twittercardを申請ã™ã‚‹ Facebook Debugerã§ç¢ºèªã™ã‚‹ ã§ã¯ã€é †ç•ªã«èª¬æ˜Žã—ã¾ã™ã€‚ 0.ãªãœã€OGPã‚¿ã‚°ã‚’è¨ç½®ã™ã‚‹å¿…è¦ãŒã‚ã‚‹ã®ã‹ï¼Ÿ ズãƒãƒªã€Facebookã¨Twitterã‹ã‚‰ãƒ–ãƒã‚°ã¸ã®ã‚¢ã‚¯ã‚»ã‚¹æµå…¥ãŒå¢—ãˆã‚‹ã‹ã‚‰ã§ã™ã€‚ OGPã‚¿ã‚°ã‚’è¨ç½®ã™ã‚‹ã¨ã€è¨˜äº‹ãŒã‚·ã‚§ã‚¢ã•ã‚ŒãŸæ™‚ã«ã€ã‚ャッãƒç”»åƒã¨æ¦‚è¦æ–‡ä»˜ãã§è¡¨ç¤ºã•ã‚Œã€äººã®ç›®ã‚’
OGPç”»åƒã‚·ãƒŸãƒ¥ãƒ¬ãƒ¼ã‚¿ | og:image Simulator
OGPç”»åƒã‚·ãƒŸãƒ¥ãƒ¬ãƒ¼ã‚¿ã¨ã¯ï¼Ÿ Facebookã®OGPç”»åƒã¯æ£æ–¹å½¢ã§è¡¨ç¤ºã•ã‚ŒãŸã‚Šæ¨ªé•·ã§è¡¨ç¤ºã•ã‚ŒãŸã‚Šã™ã‚‹ãŸã‚ã€ãƒ‡ã‚¶ã‚¤ãƒ³ãŒã¨ã¦ã‚‚大変。 ãã‚“ãªæ™‚ã«ä¾¿åˆ©ãªã®ãŒã“ã®OGPç”»åƒã‚·ãƒŸãƒ¥ãƒ¬ãƒ¼ã‚¿ã€‚ デザインã—ãŸOGPç”»åƒã‚’ドラッグ&ドãƒãƒƒãƒ—ã—ã€ã‚¿ã‚¤ãƒ ライン上ã§ã©ã†è¦‹ãˆã‚‹ã‹ã‚·ãƒŸãƒ¥ãƒ¬ãƒ¼ãƒˆã—ã¦ã¿ã¾ã—ょã†ã€‚ https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低ã§ã‚‚ 600 x 315 pxã€ã¾ãŸå¤§ãã‘ã‚Œã°å¤§ãã„ã»ã©è‰¯ã„ãŸã‚ 1200 x 630 px 以上ã®ç”»åƒã‚µã‚¤ã‚ºãŒæŽ¨å¥¨ã•ã‚Œã¦ã„ã¾ã™ã€‚ç”»åƒãŒã‚¯ãƒªãƒƒãƒ”ングã•ã‚Œã‚‹ã®ã‚’防ããŸã‚ã€ç¸¦æ¨ªæ¯”ã‚’ãªã‚‹ã¹ã1.91:1ã«è¿‘ã¥ã‘るよã†ã«ã—ã¾ã—ょã†ã€‚ （2014å¹´01月
ã€æœ€æ–°ã€‘facebook ã„ã„ãボタンè¨ç½®æ™‚ã®OGP対応方法♪
webmobileã¯ã€ã¿ã‚“ãªãŒçŸ¥ã‚ŠãŸã„スマホ・通信ガジェットã®ä½¿ã„方を発信ã—ã¦ã„るレビューサイトã よ♪ webmobile（ウェブモãƒã‚¤ãƒ«ï¼‰ã¯ã€å¤§å¥½ããªPixel/iPhone/MVNO/amazonã«ã¤ã„ã¦ã€æ°—ã¥ã„ãŸã“ã¨ãƒ»å›°ã£ãŸäº‹ã®è§£æ±ºãªã©çµŒé¨“ã—ãŸã“ã¨ã‚’発信ã—ã¦ã„ã¾ã™ã€‚ é‹å–¶æ´ã¯ã‹ã‚Œã“ã‚Œ10年以上ã§ã™ã€‚ ç§ãŒåˆã‚ã¦è²·ã£ãŸã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã¯ã€auã‹ã‚‰ç™ºå£²ã•ã‚ŒãŸSHARP製IS03。今ã§ã‚‚デザインã®è‰¯ã•ã«æ„ŸéŠ˜ã‚’å—ã‘ã¾ã™ã€‚ 今ã®ãƒ¡ã‚¤ãƒ³æ©Ÿã¯GooglePixelã¨iPhone15ProMAXã§ã™ã€‚ 昔ã¯ASUS製ZenFoneã«ã¯ã¾ã‚Šã€æ–°è£½å“ãŒç™ºå£²ã•ã‚Œã‚‹ã”ã¨ã«è²·ã£ã¦ã„ã¾ã—ãŸã€‚ MVNOã®ãŠåº—ã«æˆ‘ãŒåã¨è¨ªãã‚‹æ—…ã€æ¥½ã—ã‹ã£ãŸãªã♪ ã”ç¸ã‚ã£ã¦ã€UQコミュニケーションズ本社ã«è¡Œãã“ã¨ã‚‚ã‚ã‚Šã¾ã—ãŸã€‚ UQモãƒã‚¤ãƒ«å…¬å¼ã‚°ãƒƒã‚ºã‚’ãŸãã•ã‚“手ã«å…¥ã‚Œã‚‹æ©Ÿä¼šãŒã‚ã‚Šã¾ã—ãŸã€‚ æ±äº¬æ–°å®¿ã«ã‚ã‚‹LINEæ ªå¼ä¼šç¤¾ã«æ‹›å¾…ã—ã¦è²°ã£
ã¦ãŒã‚ãスã‚ンデモサイトリニュ＆新スã‚ンé…布開始 | 10press
ホームブãƒã‚° サイト制作 ã¦ãŒã‚ãスã‚ンデモサイトリニュ＆新スã‚ンé…布開始 「CMSkin for ã¦ãŒã‚ãã€ãƒ‡ãƒ¢ã¨ã—ã¦ç¨¼åƒã—ã¦ã„ãŸã‚µã‚¤ãƒˆã‚’リニューアルã—ã¦è‡ªä½œã‚¹ã‚ン全般を見られるよã†ã«ã—ã¦ã¿ã¾ã—ãŸã€‚å‘ã“ã†ã§ã¯å…ˆèµ°ã£ã¦7月ã®é–“ã«ãƒªãƒ‹ãƒ¥ãƒ¼ã‚¢ãƒ«ã®ãŠçŸ¥ã‚‰ã›ã‚’ã—ã¦ã„ãŸã‚“ã§ã™ãŒã„ã‚ã„ã‚ä¿®æ£ã—ãŸã‚Šã—ã¦ã„ã¦ä¸€æ®µè½ã¤ã„ãŸã‹ãªã¨ã„ã†ã“ã¨ã§ã“ã¡ã‚‰ã§ã‚‚ãŠçŸ¥ã‚‰ã›ã§ã™ã€‚æ–°ã—ããªã£ãŸãƒ‡ãƒ¢ã‚µã‚¤ãƒˆã¦ã‚“ã·ã‚ãをよã‚ã—ããŠé¡˜ã„ã„ãŸã—ã¾ã™ã€‚ CMSkinã¨ã—ã¦ã¯CSSã‚„JSã®ã‚³ãƒ¼ãƒ‰ã‚’ブラッシュアップ（当社比）ã—ãŸã‚Šæ–°ã—ã„独自装飾デザインや機能を盛り込んã ã¤ã‚‚ã‚Šã§ã™ã€‚今後ã¯ã“れらをもã¨ã«æ–°ã‚¹ã‚ンを作ã£ã¦ã„ã予定ã§ã™ã€‚ã¾ãŸã€ãã‚Œãžã‚Œã‚’パーツ・å°æŠ€ã¨ã—ã¦è§£èª¬è¨˜äº‹ã‚‚作ã£ã¦ã„ãã¤ã‚‚ã‚Šã§ã™ã€‚ ã¨ã„ã†ã‚ã‘ã§ã¦ãŒã‚ãスã‚ン「ãƒã‚¹ãƒˆã‚¤ãƒƒãƒˆã€ã®é…布を開始ã—ã¾ã—ãŸã€‚動作確èªã¯å…¥å¿µã«ã—ãŸã¤ã‚‚ã‚Šã§ã™ãŒã„ã‹ã‚“ã›ã‚“一人作æ¥ãªã®ã§è¦‹è½ã¨ã—ã‚ã‚‹ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“
フェイスブックã€ãƒŸã‚¯ã‚·ã‚£ã€ã‚°ãƒªãƒ¼ã§ä½¿ã‚ã‚Œã¦ã„ã‚‹ OGP (Open Graph Protocol) ã¨ã¯ä½•ã‹ - IT戦記
ã¿ãªã•ã‚“ã€ã“ã‚“ã«ã¡ã¯ ãŠå…ƒæ°—ã§ã™ã‹ï¼Ÿåƒ•ã¯å…ƒæ°—ã§ã™ã€‚ ã•ã¦ 最近よãã€ã€Œã„ã„ãï¼ã€ãƒœã‚¿ãƒ³ã‚„「ミクシィãƒã‚§ãƒƒã‚¯ã€ãƒœã‚¿ãƒ³ã«ã‚ˆã£ã¦ã€ã‚¦ã‚§ãƒ–ページを紹介ã—åˆã†æ–‡åŒ–ãŒå°‘ã—ãšã¤å®šç€ã—ã¦ããŸãªãƒ¼ã¨æ€ã„ã¾ã™ã€‚ ãã‚“ãªä¸ã§ã€ä»Šå¾Œé‡è¦ã«ãªã£ã¦ãã‚‹ã‚“ã˜ã‚ƒãªã„ã‹ã¨æ€ã‚れる OGP （Open Graph Protocol）ã¨è¨€ã‚れる仕様ãŒã‚ã‚Šã¾ã™ã€‚今日ã¯ãã®ã“ã¨ã«ã¤ã„ã¦æ›¸ã„ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚ OGP? ãŠãƒ¼ã˜ãƒ¼ã´ãƒ¼ï¼Ÿï¼Ÿã¨ã¯ãªã‚“ã§ã—ょã†ã‹ã€‚ OGP ã¨ã¯ ç°¡å˜ã«è¨€ã†ã¨ã€Œã“ã®ã‚¦ã‚§ãƒ–ページã¯ä½•ã®ã“ã¨ã‚’書ã„ã¦ã„ã‚‹ã‹ã€ã¨ã„ã†æƒ…å ±ã‚’ã€ãƒ—ãƒã‚°ãƒ©ãƒ ã‹ã‚‰èªã‚る形㧠HTML ã«ä»˜åŠ ã™ã‚‹è¨˜è¿°æ–¹æ³•ã®ã“ã¨ã§ã™ã€‚ ã¾ã‚ã€æ™®é€šã®ã‚¦ã‚§ãƒ–ページã¯äººé–“ãŒèªã‚ã°ã ã„ãŸã„何ã®ã“ã¨ãŒæ›¸ã„ã¦ã‚ã‚‹ã‹åˆ†ã‹ã‚Šã¾ã™ã‚ˆã。 ã§ã™ãŒã€ãƒ—ãƒã‚°ãƒ©ãƒ ã¯äººé–“ã»ã©é ãŒè‰¯ããªã„ã®ã§ã€ãã®ã‚¦ã‚§ãƒ–ページ内ã®æ–‡ç« ã ã‘ã§ã¯ãã®ãƒšãƒ¼ã‚¸ãŒä½•ã®ã“ã¨ã«ã¤ã„ã¦æ›¸ã‹ã‚Œã¦ã„るページãªã®ã‹æ£ç¢ºã«è˜åˆ¥ã™
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}