Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to put a thumbnail?
New Posts  All Forums:Forum Nav:

How to put a thumbnail? - Page 2

post #11 of 13
Thread Starter 
Quote:
Originally Posted by DeviateDefiant View Post

Facebook caches your site for a fair while, just to clarify:
Code:
<link rel="image_src" href="path/filename.jpg">
Will work just fine.
Facebook uses 'OpenGraph' metadata natively, so it would be:
Code:
<meta property="og:image" content="path/filename.jpg">
However, if you want the most universal implementation use the Schema.org variant, (it's supported by all major Search Engines and Social Networks):
Code:
<meta itemprop="image" content="path/filename.jpg">
General rules, don't go further than about 1:2 aspect ratio, and keep thumbnail below around 150px.
Hope that helps, read up on Schema/OpenGraph microdata for more info smile.gif

Is it possible to put all of those variants in?

Would they conflict with each other?
Sunkissed Beauty
(26 items)
 
Quirky
(12 items)
 
CPUMotherboardGraphicsRAM
Intel Core i7 3770K [ 4.5Ghz | 1.370V ] AsRock Z77 OC Formula ASUS GTX 760 DC2OC-2GD5 [ 1202/3506 ] Crucial Ballistix Elite 16GB 1866Mhz CL9 1.5V [... 
Hard DriveHard DriveHard DriveHard Drive
Crucial MX100 256GB Western Digital Caviar Blue 500GB [ WD5000AAKX ] Western Digital Caviar Blue 1TB [ WD10EZEX ] Western Digital Caviar Green 1TB [ WD10EARS ] 
Hard DriveCoolingCoolingCooling
Western Digital Caviar Green 1TB [ WD10EARS ] Corsair H100i Push&Pull Corsair SP120L PWM [ 2X] [ H100i ] Corsair SP120 PWM High Peformance [ 2X ][ H100 i] 
CoolingCoolingOSMonitor
NZXT FN 140RB [4X][Case] Cooler Master Sickleflow 120 Red [ 2X ][ Case ] Windows 10 Pro x64 Samsung B2230 
KeyboardPowerCaseMouse
Corsair Vengeance K95 RGB [ MX Brown ] Seasonic X760 NZXT Swtich 810 Black Logitech G402 
Mouse PadAudioAudioAudio
Razer Goliathus Alpha Control / Steelseries Qck... Sennheiser HD 429 Creative Inspire T7900 ASUS Xonar DGX 
OtherOther
NZXT Sentry LX NZXT Sleeved LED Kit | Orange 2M 
CPUMotherboardGraphicsOptical Drive
Intel Pentium Dual-Core E2200 MSI 945GCM5-F V2 (FSB 1333) Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff) Benq DVD-R,CD-R,DVD-ROM,CD-ROM 
CoolingMonitorKeyboardPower
Intel Stock Fan MAG InnoVision 770FS Logitech Internet Pro AcBel R8 PowerII 650W 80+ 
CaseMouseMouse PadAudio
Vertu Santa Fe "Blue" Logitech Internet Pro CM Storm Pad Sound Blaster Audigy 2 ZS 
  hide details  
Reply
Sunkissed Beauty
(26 items)
 
Quirky
(12 items)
 
CPUMotherboardGraphicsRAM
Intel Core i7 3770K [ 4.5Ghz | 1.370V ] AsRock Z77 OC Formula ASUS GTX 760 DC2OC-2GD5 [ 1202/3506 ] Crucial Ballistix Elite 16GB 1866Mhz CL9 1.5V [... 
Hard DriveHard DriveHard DriveHard Drive
Crucial MX100 256GB Western Digital Caviar Blue 500GB [ WD5000AAKX ] Western Digital Caviar Blue 1TB [ WD10EZEX ] Western Digital Caviar Green 1TB [ WD10EARS ] 
Hard DriveCoolingCoolingCooling
Western Digital Caviar Green 1TB [ WD10EARS ] Corsair H100i Push&Pull Corsair SP120L PWM [ 2X] [ H100i ] Corsair SP120 PWM High Peformance [ 2X ][ H100 i] 
CoolingCoolingOSMonitor
NZXT FN 140RB [4X][Case] Cooler Master Sickleflow 120 Red [ 2X ][ Case ] Windows 10 Pro x64 Samsung B2230 
KeyboardPowerCaseMouse
Corsair Vengeance K95 RGB [ MX Brown ] Seasonic X760 NZXT Swtich 810 Black Logitech G402 
Mouse PadAudioAudioAudio
Razer Goliathus Alpha Control / Steelseries Qck... Sennheiser HD 429 Creative Inspire T7900 ASUS Xonar DGX 
OtherOther
NZXT Sentry LX NZXT Sleeved LED Kit | Orange 2M 
CPUMotherboardGraphicsOptical Drive
Intel Pentium Dual-Core E2200 MSI 945GCM5-F V2 (FSB 1333) Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff) Benq DVD-R,CD-R,DVD-ROM,CD-ROM 
CoolingMonitorKeyboardPower
Intel Stock Fan MAG InnoVision 770FS Logitech Internet Pro AcBel R8 PowerII 650W 80+ 
CaseMouseMouse PadAudio
Vertu Santa Fe "Blue" Logitech Internet Pro CM Storm Pad Sound Blaster Audigy 2 ZS 
  hide details  
Reply
post #12 of 13
No not at all, personally in all my projects I cover OpenGraph, Schema and standard LINK elements. My template for Search/Social/Device data looks something like this:
Code:
<!-- SEO Microdata (Schema.org Variant) - Google, Bing, Yahoo -->
    <meta itemprop="name" content="">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="meta_thumbnail.png"> 
    <meta itemprop="url" content="">

    <!-- OpenGraph - Facebook, Social -->
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:site_name" content="">
    <meta property="og:image" content="meta_thumbnail.png">
    <meta property="og:type" content="website">
    <meta property="og:url" content="">

    <!-- Standard Favourite Icons, META Thumbnail for Facebook and Smartphone Icons, case study - tinyurl.com/4gv5zse --> 
    <link rel="icon" type="image/png" href="favicon.png">
    <!-- META Thumbnail -->
    <link rel="image_src" href="meta_thumbnail.png" itemprop="thumbnail">
    <!-- iPhone 5, iPad 3 (w/ Retina Display) -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
    <!-- iPhone 4, 4S, iPad 2 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
    <!-- First Generation iPad -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
    <!-- non-Retina iPhone, iPod Touch, BlackBerry and Android 2.1+ -->
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

    <!-- General SEO, Canonical and Permalinking -->
    <meta name="robots" content="index,follow">
    <link rel="canonical" href="<!-- PERMALINK PLACEHOLDER -->">

    <!-- Client Details - Statistical, Demographics, Ownership Verification etc. -->
    <meta name="alexaVerifyID" content="<!-- ALEXA - PLACEHOLDER -->">
    <meta property="fb:admins" content="<!-- FACEBOOK ID - PLACEHOLDER -->">
    <meta property="fb:page_id" content="<!-- FACEBOOK PAGE ID - PLACEHOLDER -->">
    <link rel="publisher" href="<!-- GOOGLE+ PAGE -->"> <!-- For Google Result Authors -->

    <!-- Browser and Device Specific Variables -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.6;"> <!-- Adaptive Restrictions to Overcome iOS Bugs -->
    <meta http-equiv="imagetoolbar" content="false"> <!-- Kill IE Toolbar -->
Along with other bits and bobs... I fill in all the details through Placeholders which I use in my CMS system.
    
CPUMotherboardGraphicsRAM
Intel i7-3770K Asus P8Z77-V Deluxe Asus GTX 760 (2GB) [x4] Corsair Vengeance Pro (4GB, 2133MHz) 
Hard DriveHard DriveHard DriveHard Drive
Samsung 840 Pro (512GB) [x2] WD Green (2TB, RAID1) [x7] WD Red (3TB. RAID6) Synology DS1813+ (WD Reds) 
CoolingCoolingCoolingOS
Corsair H80 (w/ SP120s) [x2] Corsair SP120 [x2] Corsair 200mm  Windows 8.1 (x64) 
MonitorMonitorKeyboardPower
Dell U3011 (Rev. A09) [x2] Dell 2007FPb (Portrait) Das Keyboard Ultimate (Cherry Blues) Corsair HX750 (v2) 
CaseMouseMouse PadAudio
Corsair 600T (White SE) Razer Deathadder (4G) SteelSeries QcK Heavy + Mini ASUS Xonar D2X (Soundcard) 
AudioAudioAudioAudio
[x2] KRK RP6 G2 (Studio Monitors) Audio Technica M50 (Graphite SE) Audio Technica AT4040 (Condenser Mic) Behringer UMC22 (Audio Interface) 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
Intel i7-3770K Asus P8Z77-V Deluxe Asus GTX 760 (2GB) [x4] Corsair Vengeance Pro (4GB, 2133MHz) 
Hard DriveHard DriveHard DriveHard Drive
Samsung 840 Pro (512GB) [x2] WD Green (2TB, RAID1) [x7] WD Red (3TB. RAID6) Synology DS1813+ (WD Reds) 
CoolingCoolingCoolingOS
Corsair H80 (w/ SP120s) [x2] Corsair SP120 [x2] Corsair 200mm  Windows 8.1 (x64) 
MonitorMonitorKeyboardPower
Dell U3011 (Rev. A09) [x2] Dell 2007FPb (Portrait) Das Keyboard Ultimate (Cherry Blues) Corsair HX750 (v2) 
CaseMouseMouse PadAudio
Corsair 600T (White SE) Razer Deathadder (4G) SteelSeries QcK Heavy + Mini ASUS Xonar D2X (Soundcard) 
AudioAudioAudioAudio
[x2] KRK RP6 G2 (Studio Monitors) Audio Technica M50 (Graphite SE) Audio Technica AT4040 (Condenser Mic) Behringer UMC22 (Audio Interface) 
  hide details  
Reply
post #13 of 13
Thread Starter 
Instead of making a new thread i will just revive this.

I'm still not sure how to do this.. Hehe. -.-"
Sunkissed Beauty
(26 items)
 
Quirky
(12 items)
 
CPUMotherboardGraphicsRAM
Intel Core i7 3770K [ 4.5Ghz | 1.370V ] AsRock Z77 OC Formula ASUS GTX 760 DC2OC-2GD5 [ 1202/3506 ] Crucial Ballistix Elite 16GB 1866Mhz CL9 1.5V [... 
Hard DriveHard DriveHard DriveHard Drive
Crucial MX100 256GB Western Digital Caviar Blue 500GB [ WD5000AAKX ] Western Digital Caviar Blue 1TB [ WD10EZEX ] Western Digital Caviar Green 1TB [ WD10EARS ] 
Hard DriveCoolingCoolingCooling
Western Digital Caviar Green 1TB [ WD10EARS ] Corsair H100i Push&Pull Corsair SP120L PWM [ 2X] [ H100i ] Corsair SP120 PWM High Peformance [ 2X ][ H100 i] 
CoolingCoolingOSMonitor
NZXT FN 140RB [4X][Case] Cooler Master Sickleflow 120 Red [ 2X ][ Case ] Windows 10 Pro x64 Samsung B2230 
KeyboardPowerCaseMouse
Corsair Vengeance K95 RGB [ MX Brown ] Seasonic X760 NZXT Swtich 810 Black Logitech G402 
Mouse PadAudioAudioAudio
Razer Goliathus Alpha Control / Steelseries Qck... Sennheiser HD 429 Creative Inspire T7900 ASUS Xonar DGX 
OtherOther
NZXT Sentry LX NZXT Sleeved LED Kit | Orange 2M 
CPUMotherboardGraphicsOptical Drive
Intel Pentium Dual-Core E2200 MSI 945GCM5-F V2 (FSB 1333) Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff) Benq DVD-R,CD-R,DVD-ROM,CD-ROM 
CoolingMonitorKeyboardPower
Intel Stock Fan MAG InnoVision 770FS Logitech Internet Pro AcBel R8 PowerII 650W 80+ 
CaseMouseMouse PadAudio
Vertu Santa Fe "Blue" Logitech Internet Pro CM Storm Pad Sound Blaster Audigy 2 ZS 
  hide details  
Reply
Sunkissed Beauty
(26 items)
 
Quirky
(12 items)
 
CPUMotherboardGraphicsRAM
Intel Core i7 3770K [ 4.5Ghz | 1.370V ] AsRock Z77 OC Formula ASUS GTX 760 DC2OC-2GD5 [ 1202/3506 ] Crucial Ballistix Elite 16GB 1866Mhz CL9 1.5V [... 
Hard DriveHard DriveHard DriveHard Drive
Crucial MX100 256GB Western Digital Caviar Blue 500GB [ WD5000AAKX ] Western Digital Caviar Blue 1TB [ WD10EZEX ] Western Digital Caviar Green 1TB [ WD10EARS ] 
Hard DriveCoolingCoolingCooling
Western Digital Caviar Green 1TB [ WD10EARS ] Corsair H100i Push&Pull Corsair SP120L PWM [ 2X] [ H100i ] Corsair SP120 PWM High Peformance [ 2X ][ H100 i] 
CoolingCoolingOSMonitor
NZXT FN 140RB [4X][Case] Cooler Master Sickleflow 120 Red [ 2X ][ Case ] Windows 10 Pro x64 Samsung B2230 
KeyboardPowerCaseMouse
Corsair Vengeance K95 RGB [ MX Brown ] Seasonic X760 NZXT Swtich 810 Black Logitech G402 
Mouse PadAudioAudioAudio
Razer Goliathus Alpha Control / Steelseries Qck... Sennheiser HD 429 Creative Inspire T7900 ASUS Xonar DGX 
OtherOther
NZXT Sentry LX NZXT Sleeved LED Kit | Orange 2M 
CPUMotherboardGraphicsOptical Drive
Intel Pentium Dual-Core E2200 MSI 945GCM5-F V2 (FSB 1333) Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff) Benq DVD-R,CD-R,DVD-ROM,CD-ROM 
CoolingMonitorKeyboardPower
Intel Stock Fan MAG InnoVision 770FS Logitech Internet Pro AcBel R8 PowerII 650W 80+ 
CaseMouseMouse PadAudio
Vertu Santa Fe "Blue" Logitech Internet Pro CM Storm Pad Sound Blaster Audigy 2 ZS 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to put a thumbnail?