Website Social Share Preview Setup

In today’s digital world, making sure your website looks appealing when shared on social media is essential. Setting up the right metadata can boost your site’s visibility and engagement. Here’s a straightforward guide to help you get started.

Meta Tags Checklist

To ensure your website is optimized for social sharing, verify the following meta tags:

• OpenGraph Tags: These are essential for platforms like Facebook.

  • og:image: URL of the preview image.
  • og:title: Title of the page.
  • og:description: Description of the page.

• Twitter Card Tags: These control how your content appears on Twitter.

  • twitter:image: URL of the preview image.
  • twitter:title: Title of the page.
  • twitter:description: Description of the page.

• URL Consistency: Ensure the URLs in your meta tags match the actual page URL.

Example Code

<!-- HTML Meta Tags -->
<title>Semantic Layer</title>
<meta
  name="description"
  content="Semantic Layer is bringing better incentive alignment to dApps, enabling MEV internalization and sequencing sovereignty."
/>

<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://semanticlayer.io/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Semantic Layer" />
<meta
  property="og:description"
  content="Semantic Layer is bringing better incentive alignment to dApps, enabling MEV internalization and sequencing sovereignty."
/>
<meta property="og:image" content="https://i.imgur.com/Zip0gc2.jpg" />

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="semanticlayer.io" />
<meta property="twitter:url" content="https://semanticlayer.io/" />
<meta name="twitter:title" content="Semantic Layer" />
<meta
  name="twitter:description"
  content="Semantic Layer is bringing better incentive alignment to dApps, enabling MEV internalization and sequencing sovereignty."
/>
<meta name="twitter:image" content="https://i.imgur.com/Zip0gc2.jpg" />

Image Requirements

• Correct Dimensions: Optimal size is 1200 x 630 pixels.
• Accessible URL: Ensure the image URL is accessible in incognito mode and directly points to a PNG/JPG file.
• Appropriate File Format: Use JPG, PNG, or GIF.
  • For the best compatibility, use JPG or PNG, but GIF is also supported. For example, GIFs on GIPHY can be shared with a GIF preview on Telegram but not on Twitter or the OpenGraph preview tool. Test this URL (https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExdnJoNXhlNWNrZnVpenp5dXkyZ2FtaWJhaWRrMThneXdreWc3aXMwNiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/BBali2EjIBQ6pzZSrh/giphy.gif) on Telegram to see if it works.
• File Size: Keep the file size within reasonable limits. Here are some common platform guidelines:
  • Facebook: While there’s no strict limit, it’s recommended to keep image files under 8MB for optimal loading and user experience.
  • Twitter: Twitter suggests keeping image files under 5MB.
  • LinkedIn: The file size limit for images is 5MB.
  • General Recommendation: To ensure compatibility and fast loading across platforms, aim to keep image files between 1-2MB.

Testing and Cache Clearing

To ensure your metadata changes are correctly reflected across platforms, follow these steps:

• Testing:

  • Use OpenGraph.xyz to test your Open Graph tags.
  • Try different image URLs to see how they render.
  • Test on multiple platforms to ensure consistency.
  • Check the appearance on both mobile and desktop devices.

• Cache Clearing:

  • Facebook: Use the Sharing Debugger to scrape your URL again, which effectively clears the cache.
  • Telegram: Send the link to @WebpageBot to refresh the preview.
  • Twitter: While the Twitter Card Validator is primarily for testing, it can sometimes help refresh the cache by re-fetching the card data.

By following these steps, you can ensure that your website’s metadata is up-to-date and displays correctly across different platforms.

URL Accessibility

• Ensure the website and images are publicly accessible.
• Verify no security measures are blocking access.

Patience

Allow time for changes to propagate, which can take several hours.

Platform-Specific Checks (Optional)

• Review each platform’s developer guidelines.
• Check for any known issues or updates.

By following these steps, you can ensure your website is well-prepared for social media sharing, enhancing its visibility and engagement.