craig
6eff12e8ac
SmartCrawl plugin reference (11 docs): - Overview, configuration, titles & meta, schema, sitemaps, social/OG, redirects, breadcrumbs, content analysis, hooks/filters, known issues SEO strategy playbook (6 docs): - Keyword research, per-page-type selection, on-page optimization, local SEO, technical SEO, content strategy Reusable templates (3): - Site audit checklist, keyword research worksheet, page optimization checklist Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
4.9 KiB
4.9 KiB
Social: Open Graph & Twitter Cards
SmartCrawl controls how your pages appear when shared on social media platforms. Open Graph tags handle Facebook, Instagram, LinkedIn, and Pinterest. Twitter Card tags handle X (formerly Twitter).
Open Graph (OG) Tags
What They Control
When someone shares a link on Facebook, Instagram, LinkedIn, or Pinterest, the platform reads these tags to determine:
- Title — The headline shown in the share card
- Description — The preview text
- Image — The thumbnail/preview image
- URL — The canonical URL
- Type — Content type (website, article, product, etc.)
Global Settings
| Setting | Recommendation |
|---|---|
| Enable Open Graph | Yes (all post types) |
| Default OG Image | Set a branded fallback image (1200x630px) |
| Site Name | Your business name |
Per-Post Type Defaults
Configure in SmartCrawl > Social for each post type:
- Posts: OG type =
article, use post title and excerpt - Pages: OG type =
website, use page title and excerpt - Products: Enable WooCommerce Product OG toggle (adds
og:type=product, price, availability automatically)
Per-Post Overrides
For important pages, set custom OG values in the SmartCrawl meta box:
| Field | Guidance |
|---|---|
| OG Title | Can differ from SEO title — make it more engaging/clickable for social |
| OG Description | Can be longer than meta description (up to ~300 characters). Write for social context. |
| OG Image | Must be 1200x630px for optimal rendering. Avoid text-heavy images (Facebook may reject them). |
Key OG Tags Output
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description for social sharing" />
<meta property="og:image" content="https://example.com/image-1200x630.jpg" />
<meta property="og:url" content="https://example.com/page/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Site Name" />
Twitter Cards
Card Types
SmartCrawl supports:
| Type | Appearance |
|---|---|
summary |
Small square thumbnail + title + description |
summary_large_image |
Large image above title + description |
Recommendation: Use summary_large_image for most content — larger images get more engagement.
Configuration
| Setting | Recommendation |
|---|---|
| Enable Twitter Cards | Yes |
| Default Card Type | summary_large_image |
| Twitter Site Handle | @yourbrand (your brand's Twitter handle) |
Per-Post Overrides
Twitter Card title, description, and image can be set separately from OG tags. This allows platform-specific messaging:
- Twitter title: Shorter, punchier (Twitter is fast-scrolling)
- Twitter image: Same 1200x630px works, but can use a different image optimized for Twitter's crop
Pinterest Verification
Add your Pinterest verification meta tag in SmartCrawl > Social > Pinterest:
<meta name="p:domain_verify" content="your-verification-code" />
This verifies your website with Pinterest and enables rich pins.
Image Guidelines
Optimal Dimensions
| Platform | Recommended Size | Minimum |
|---|---|---|
| 1200x630px | 600x315px | |
| 1200x630px | 300x157px | |
| 1200x627px | 1200x627px | |
| 1000x1500px (2:3 ratio) | 600x900px |
Image Best Practices
- Use 1200x630px as the universal default (works well on all platforms)
- Avoid images with more than 20% text overlay (Facebook may throttle reach)
- Use high-contrast images that are recognizable at small sizes
- Set a default/fallback OG image in SmartCrawl's global settings for pages without featured images
- Product pages should use the product image as OG image
Debugging Social Shares
Use the Facebook Sharing Debugger:
- Enter your URL
- Click "Debug"
- Verify title, description, and image are correct
- Click "Scrape Again" to force Facebook to re-fetch after making changes
Use the Twitter Card Validator:
- Enter your URL
- Click "Preview card"
- Verify the card renders correctly
LinkedIn caches aggressively. Use their Post Inspector:
- Enter your URL
- Review the preview
- Click "Refresh" to clear cache
Common Issues
| Issue | Fix |
|---|---|
| Old image showing on Facebook | Use Facebook Debugger > "Scrape Again" |
| OG tags present but not rendering | Check for duplicate OG tags from other plugins/theme |
| No image in share preview | Set a default OG image in SmartCrawl global settings |
| WooCommerce products missing price in share | Enable the "WooCommerce Product Open Graph" toggle |
| OG tags still active after disabling | Known issue — may persist on homepage after wizard deactivation. Clear manually. |