valtterimelkko Social Media Optimization Skill
Guide for implementing social media sharing optimization including Open Graph Protocol, Twitter Cards, image dimensions, and validation tools.
Quick Reference
Essential Meta Tags (Minimum Required)
<!-- Open Graph -->
<meta property="og:title" content="Compelling Headline (60-90 chars)">
<meta property="og:type" content="article">
<meta property="og:image" content="https://yoursite.com/og-image.jpg">
<meta property="og:url" content="https://yoursite.com/page">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Compelling Headline">
<meta name="twitter:description" content="Description under 200 chars">
<meta name="twitter:image" content="https://yoursite.com/og-image.jpg">
Image Dimensions by Platform
| Platform | Size | Aspect Ratio | File Max |
|---|---|---|---|
| Universal | 1200 × 630 px | 1.91:1 | < 1 MB |
| 1200 × 630 px | 1.91:1 | 8 MB | |
| 1200 × 627 px | 1.91:1 | 8 MB | |
| Twitter/X | 1200 × 628 px | 1.91:1 | 5 MB |
| 1000 × 1500 px | 2:3 | 20 MB |
Absolute minimum: 200 × 200 px (below this, no image displays)
Complete Implementation Template
<!-- Essential Meta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<meta name="description" content="SEO description">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://yoursite.com/page">
<meta property="og:title" content="Compelling Social Headline">
<meta property="og:description" content="Enticing description under 200 chars">
<meta property="og:image" content="https://yoursite.com/og-image-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Your Brand">
<meta property="og:locale" content="en_US">
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://yoursite.com/page">
<meta name="twitter:title" content="Compelling Social Headline">
<meta name="twitter:description" content="Enticing description under 200 chars">
<meta name="twitter:image" content="https://yoursite.com/og-image.jpg">
<meta name="twitter:image:alt" content="Descriptive alt text">
<meta name="twitter:site" content="@YourHandle">
<!-- Analytics (optional) -->
<meta property="fb:app_id" content="your_app_id">
Tag Reference
Open Graph Required Tags
| Tag | Purpose | Example |
|---|---|---|
og:title |
Headline in preview | "10 Ways to Improve SEO" |
og:type |
Content type | article, website, video |
og:image |
Preview image URL | Absolute URL required |
og:url |
Canonical URL | https://example.com/page |
Open Graph Recommended Tags
| Tag | Purpose | Best Practice |
|---|---|---|
og:description |
Summary text | Under 200 characters |
og:site_name |
Brand name | Consistent across pages |
og:locale |
Language/region | en_US, de_DE |
og:image:width |
Image width | Include for immediate display |
og:image:height |
Image height | Include for immediate display |
Twitter Card Tags
| Tag | Purpose | Values |
|---|---|---|
twitter:card |
Card type | summary, summary_large_image |
twitter:title |
Card title | Max 70 chars |
twitter:description |
Card description | Max 200 chars |
twitter:image |
Image URL | Min 300×157 px |
twitter:image:alt |
Alt text | Accessibility |
twitter:site |
Site handle | @BrandHandle |
Card Types:
summary— Small square image + textsummary_large_image— Large featured image (best engagement)app— Mobile app promotionplayer— Video/audio embed
Image Best Practices
Design Guidelines
- Use 1.91:1 aspect ratio — Fits most platforms without cropping
- Center important content — Edges may be cropped on mobile
- Minimum 1200 px width — High resolution for Retina displays
- Keep file size under 1 MB — Faster loading
- High contrast — Ensure readability on mobile
- Include branding — Logo visible but not dominant
Common Mistakes to Avoid
| Mistake | Problem | Solution |
|---|---|---|
| Relative image URLs | Image won't display | Use absolute URLs (https://...) |
| Image too small | Tiny/no thumbnail | Minimum 600 × 315 px |
| Wrong aspect ratio | Awkward cropping | Stick to 1.91:1 |
| File too large | Slow/timeout | Compress to < 1 MB |
Missing og:type |
Platform confusion | Always include type |
Character Limits
| Element | Recommended | Maximum | Notes |
|---|---|---|---|
| Title | 55-60 chars | 95 chars | Facebook truncates at ~88 |
| Description | 150-160 chars | 300 chars | Keep under 200 for safety |
| Twitter title | 70 chars | — | Concise works best |
Testing & Validation Tools
Always test implementation before deploying:
| Tool | Platform | URL |
|---|---|---|
| Facebook Sharing Debugger | developers.facebook.com/tools/debug/ |
|
| LinkedIn Post Inspector | linkedin.com/post-inspector/ |
|
| Twitter Card Validator | Twitter/X | cards-dev.twitter.com/validator |
| OpenGraph.xyz | Universal | opengraph.xyz |
| Check Yo Meta | Universal | checkyometa.com |
Important: After updating tags, use these tools to force a fresh scrape. Social platforms cache aggressively.
Platform-Specific Notes
- Supports images up to 8 MB
- Caches images aggressively—use debugger to refresh
- Include
og:image:widthandog:image:heightfor immediate display - First share without these dimensions may not show image immediately
- Caches even more aggressively than Facebook
- Same 1.91:1 ratio preferred
- Minimum width: 200 px
Twitter/X
- Falls back to OG tags if Twitter Cards absent
- Implement both for optimal control
summary_large_imagecards perform best
- Vertical images win: 2:3 aspect ratio
- Uses only
og:imagefrom OG tags - Minimum 600 px width recommended
WhatsApp / Messaging Apps
- Uses OG tags for previews
- Smaller preview cards—test cropping
Dynamic Generation
For CMS-driven sites, generate tags dynamically:
<meta property="og:title" content="{{ post.title }}">
<meta property="og:description" content="{{ post.excerpt|truncate(160) }}">
<meta property="og:image" content="{{ post.featured_image.url }}">
<meta property="og:type" content="article">
<meta property="article:published_time" content="{{ post.published_at }}">
Implementation Checklist
- Add essential OG tags (
title,type,image,url) - Add Twitter Card tags (
card,title,description,image) - Create 1200 × 630 px image
- Use absolute URLs for images
- Test with Facebook Sharing Debugger
- Test with LinkedIn Post Inspector
- Test with Twitter Card Validator
- Clear cache and re-test after changes
- Verify mobile preview appearance
Business Impact
Studies show significant benefits from proper social optimization:
- Posts with images: 150% more engagement
- Facebook posts with images: 100% more engagement, 114% more impressions
- Proper OG implementation: 78-250% increase in social traffic
- Optimized previews: 2-3x higher click-through rates