Ryan Malloy
0028738e33
Make your WordPress site irresistible. Natural SEO attraction with: - robots.txt management - sitemap.xml generation - LLMs.txt support - Google integration (Analytics, Search Console, Tag Manager) - Schema.org structured data - Open Graph / Twitter Card meta tags - AMP support - Visual elements gallery - Built-in backup/restore module Includes build.sh and .distignore for WordPress-installable release ZIPs.
183 lines
10 KiB
XML
183 lines
10 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 480" class="opengraph-preview-diagram">
|
||
<defs>
|
||
<pattern id="imagePattern" patternUnits="userSpaceOnUse" width="20" height="20">
|
||
<rect width="20" height="20" fill="#f0f0f0"/>
|
||
<line x1="0" y1="0" x2="20" y2="20" stroke="#ddd" stroke-width="1"/>
|
||
<line x1="20" y1="0" x2="0" y2="20" stroke="#ddd" stroke-width="1"/>
|
||
</pattern>
|
||
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||
<polygon points="0 0, 10 3.5, 0 7" fill="#ff6b35"/>
|
||
</marker>
|
||
</defs>
|
||
|
||
<!-- Title -->
|
||
<text x="350" y="25" text-anchor="middle" fill="#2c3e50" font-size="18" font-weight="bold" font-family="Arial">OpenGraph Social Media Previews</text>
|
||
|
||
<!-- Facebook Preview -->
|
||
<g id="facebook-preview">
|
||
<text x="20" y="55" fill="#1877f2" font-size="14" font-weight="bold" font-family="Arial">Facebook / Meta</text>
|
||
|
||
<!-- Main container -->
|
||
<rect x="20" y="65" width="320" height="140" rx="8" fill="#ffffff" stroke="#e1e5e9" stroke-width="2"/>
|
||
|
||
<!-- Image area -->
|
||
<rect x="30" y="75" width="120" height="75" rx="4" fill="url(#imagePattern)" stroke="#ddd" stroke-width="1"/>
|
||
<text x="90" y="108" text-anchor="middle" fill="#999" font-size="9" font-family="Arial">og:image</text>
|
||
<text x="90" y="118" text-anchor="middle" fill="#999" font-size="7" font-family="Arial">1200×630px</text>
|
||
|
||
<!-- Content area -->
|
||
<g transform="translate(160, 80)">
|
||
<!-- Title -->
|
||
<rect x="0" y="0" width="160" height="16" rx="2" fill="#1877f2" opacity="0.1"/>
|
||
<text x="4" y="12" fill="#1877f2" font-size="11" font-weight="bold" font-family="Arial">og:title - Full article title shown</text>
|
||
|
||
<!-- URL/Site -->
|
||
<rect x="0" y="22" width="120" height="12" rx="2" fill="#65676b" opacity="0.1"/>
|
||
<text x="4" y="30" fill="#65676b" font-size="9" font-family="Arial">og:site_name • domain.com</text>
|
||
|
||
<!-- Description -->
|
||
<rect x="0" y="40" width="160" height="40" rx="2" fill="#65676b" opacity="0.1"/>
|
||
<text x="4" y="52" fill="#65676b" font-size="9" font-family="Arial">og:description - Complete description</text>
|
||
<text x="4" y="62" fill="#999" font-size="8" font-family="Arial">shows multiple lines of text content</text>
|
||
<text x="4" y="72" fill="#999" font-size="8" font-family="Arial">up to about 300 characters...</text>
|
||
</g>
|
||
|
||
<!-- Platform indicator -->
|
||
<circle cx="30" cy="185" r="6" fill="#1877f2"/>
|
||
<text x="30" y="189" text-anchor="middle" fill="white" font-size="8" font-weight="bold" font-family="Arial">f</text>
|
||
<text x="42" y="189" fill="#65676b" font-size="9" font-family="Arial">Rich preview - all meta tags used</text>
|
||
</g>
|
||
|
||
<!-- X/Twitter Preview -->
|
||
<g id="twitter-preview">
|
||
<text x="360" y="55" fill="#000" font-size="14" font-weight="bold" font-family="Arial">X (Twitter)</text>
|
||
|
||
<!-- Main container - simpler layout -->
|
||
<rect x="360" y="65" width="320" height="140" rx="8" fill="#ffffff" stroke="#cfd9de" stroke-width="2"/>
|
||
|
||
<!-- Large image area (Twitter card style) -->
|
||
<rect x="370" y="75" width="300" height="90" rx="4" fill="url(#imagePattern)" stroke="#cfd9de" stroke-width="1"/>
|
||
<text x="520" y="115" text-anchor="middle" fill="#999" font-size="9" font-family="Arial">og:image (large card)</text>
|
||
<text x="520" y="125" text-anchor="middle" fill="#999" font-size="7" font-family="Arial">1200×675px preferred</text>
|
||
|
||
<!-- Minimal text overlay -->
|
||
<rect x="375" y="150" width="120" height="12" rx="2" fill="#0f1419" opacity="0.1"/>
|
||
<text x="378" y="158" fill="#0f1419" font-size="9" font-weight="bold" font-family="Arial">og:site_name</text>
|
||
|
||
<rect x="375" y="168" width="200" height="10" rx="2" fill="#536471" opacity="0.1"/>
|
||
<text x="378" y="175" fill="#536471" font-size="8" font-family="Arial">og:title (truncated if too long)</text>
|
||
|
||
<!-- Platform indicator -->
|
||
<rect x="370" y="185" width="12" height="12" rx="2" fill="#000"/>
|
||
<text x="376" y="194" text-anchor="middle" fill="white" font-size="9" font-weight="bold" font-family="Arial">𝕏</text>
|
||
<text x="388" y="194" fill="#536471" font-size="9" font-family="Arial">Image-focused, minimal text</text>
|
||
</g>
|
||
|
||
<!-- Discord Preview -->
|
||
<g id="discord-preview">
|
||
<text x="20" y="240" fill="#5865f2" font-size="14" font-weight="bold" font-family="Arial">Discord</text>
|
||
|
||
<!-- Main container -->
|
||
<rect x="20" y="250" width="320" height="120" rx="8" fill="#36393f" stroke="#5865f2" stroke-width="2" stroke-dasharray="0,0,0,0" opacity="0.9"/>
|
||
|
||
<!-- Left accent bar -->
|
||
<rect x="20" y="250" width="4" height="120" rx="2" fill="#5865f2"/>
|
||
|
||
<!-- Content area -->
|
||
<g transform="translate(35, 260)">
|
||
<!-- Site name -->
|
||
<rect x="0" y="0" width="80" height="12" rx="2" fill="#5865f2" opacity="0.2"/>
|
||
<text x="4" y="9" fill="#00b0f4" font-size="9" font-weight="bold" font-family="Arial">og:site_name</text>
|
||
|
||
<!-- Title -->
|
||
<rect x="0" y="18" width="160" height="16" rx="2" fill="#ffffff" opacity="0.1"/>
|
||
<text x="4" y="30" fill="#ffffff" font-size="11" font-weight="bold" font-family="Arial">og:title</text>
|
||
|
||
<!-- Description -->
|
||
<rect x="0" y="40" width="180" height="24" rx="2" fill="#b9bbbe" opacity="0.1"/>
|
||
<text x="4" y="52" fill="#b9bbbe" font-size="9" font-family="Arial">og:description (2 lines)</text>
|
||
<text x="4" y="62" fill="#b9bbbe" font-size="8" font-family="Arial">Brief excerpt shown...</text>
|
||
|
||
<!-- Image area - right side -->
|
||
<rect x="200" y="0" width="80" height="60" rx="4" fill="url(#imagePattern)" stroke="#5865f2" stroke-width="1"/>
|
||
<text x="240" y="28" text-anchor="middle" fill="#999" font-size="8" font-family="Arial">og:image</text>
|
||
<text x="240" y="38" text-anchor="middle" fill="#999" font-size="6" font-family="Arial">thumbnail</text>
|
||
</g>
|
||
|
||
<!-- Platform indicator -->
|
||
<rect x="30" y="350" width="12" height="12" rx="2" fill="#5865f2"/>
|
||
<text x="36" y="359" text-anchor="middle" fill="white" font-size="8" font-weight="bold" font-family="Arial">D</text>
|
||
<text x="48" y="359" fill="#b9bbbe" font-size="9" font-family="Arial">Embedded card with accent bar</text>
|
||
</g>
|
||
|
||
<!-- LinkedIn Preview -->
|
||
<g id="linkedin-preview">
|
||
<text x="360" y="240" fill="#0a66c2" font-size="14" font-weight="bold" font-family="Arial">LinkedIn</text>
|
||
|
||
<!-- Main container -->
|
||
<rect x="360" y="250" width="320" height="120" rx="8" fill="#ffffff" stroke="#00000020" stroke-width="2"/>
|
||
|
||
<!-- Image area - left side -->
|
||
<rect x="370" y="260" width="90" height="60" rx="4" fill="url(#imagePattern)" stroke="#ddd" stroke-width="1"/>
|
||
<text x="415" y="287" text-anchor="middle" fill="#999" font-size="8" font-family="Arial">og:image</text>
|
||
|
||
<!-- Content area -->
|
||
<g transform="translate(470, 265)">
|
||
<!-- Title -->
|
||
<rect x="0" y="0" width="180" height="16" rx="2" fill="#0a66c2" opacity="0.1"/>
|
||
<text x="4" y="12" fill="#0a66c2" font-size="11" font-weight="bold" font-family="Arial">og:title</text>
|
||
|
||
<!-- Description -->
|
||
<rect x="0" y="22" width="180" height="28" rx="2" fill="#00000080" opacity="0.1"/>
|
||
<text x="4" y="34" fill="#00000080" font-size="9" font-family="Arial">og:description</text>
|
||
<text x="4" y="44" fill="#999" font-size="8" font-family="Arial">Professional context shown...</text>
|
||
|
||
<!-- Site name -->
|
||
<rect x="0" y="56" width="100" height="10" rx="2" fill="#00000060" opacity="0.1"/>
|
||
<text x="4" y="63" fill="#00000060" font-size="8" font-family="Arial">og:site_name</text>
|
||
</g>
|
||
|
||
<!-- Platform indicator -->
|
||
<rect x="370" y="350" width="12" height="12" rx="1" fill="#0a66c2"/>
|
||
<text x="376" y="359" text-anchor="middle" fill="white" font-size="8" font-weight="bold" font-family="Arial">in</text>
|
||
<text x="388" y="359" fill="#00000080" font-size="9" font-family="Arial">Professional sharing format</text>
|
||
</g>
|
||
|
||
<!-- Essential Meta Tags Reference -->
|
||
<rect x="20" y="390" width="320" height="80" rx="4" fill="#f8f9fa" stroke="#e9ecef" stroke-width="1"/>
|
||
<text x="30" y="408" fill="#495057" font-size="12" font-weight="bold">Essential OpenGraph Meta Tags</text>
|
||
|
||
<text x="30" y="423" fill="#0066cc" font-size="10" font-weight="bold">og:title</text>
|
||
<text x="85" y="423" fill="#666" font-size="9">Page title (60 chars max)</text>
|
||
|
||
<text x="30" y="438" fill="#0066cc" font-size="10" font-weight="bold">og:description</text>
|
||
<text x="105" y="438" fill="#666" font-size="9">SEO description (300 chars)</text>
|
||
|
||
<text x="30" y="453" fill="#0066cc" font-size="10" font-weight="bold">og:image</text>
|
||
<text x="85" y="453" fill="#666" font-size="9">Featured image (1200×630px)</text>
|
||
|
||
<text x="180" y="423" fill="#0066cc" font-size="10" font-weight="bold">og:site_name</text>
|
||
<text x="245" y="423" fill="#666" font-size="9">Website name</text>
|
||
|
||
<text x="180" y="438" fill="#0066cc" font-size="10" font-weight="bold">og:url</text>
|
||
<text x="215" y="438" fill="#666" font-size="9">Canonical page URL</text>
|
||
|
||
<text x="180" y="453" fill="#0066cc" font-size="10" font-weight="bold">og:type</text>
|
||
<text x="220" y="453" fill="#666" font-size="9">Content type (article/website)</text>
|
||
|
||
<!-- Testing Tool Reference -->
|
||
<rect x="360" y="390" width="320" height="80" rx="4" fill="#e8f4fd" stroke="#3498db" stroke-width="1"/>
|
||
<text x="370" y="408" fill="#2980b9" font-size="12" font-weight="bold">🔧 Test Your OpenGraph Tags</text>
|
||
|
||
<text x="370" y="428" fill="#2c3e50" font-size="11" font-weight="bold">opengraph.xyz</text>
|
||
<text x="370" y="442" fill="#34495e" font-size="10">Live preview tool - test how your content</text>
|
||
<text x="370" y="454" fill="#34495e" font-size="10">appears across all social platforms</text>
|
||
|
||
<rect x="570" y="418" width="80" height="20" rx="10" fill="#3498db" opacity="0.1"/>
|
||
<text x="610" y="431" text-anchor="middle" fill="#2980b9" font-size="9" font-weight="bold">Visit Tool →</text>
|
||
|
||
<!-- Key insight callout -->
|
||
<rect x="20" y="480" width="660" height="18" rx="9" fill="#fff3cd" stroke="#ffeaa7" stroke-width="1"/>
|
||
<text x="30" y="492" fill="#856404" font-size="11" font-weight="bold">💡 Pro Tip:</text>
|
||
<text x="90" y="492" fill="#856404" font-size="11">Each platform displays differently - test at opengraph.xyz before publishing!</text>
|
||
</svg> |