<
zhead
>

Early Access

Open Graph Meta Tags

og:image:url

Learn how to use the og:image:url meta tag to improve your site.

Defines the URL of the image that appears when someone shares the content on social media platforms. This tag is crucial for improving the visual appeal and click-through rates of shared links.

Code Examples

<meta property="og:image:url" content="https://example.com/path/to/image.jpg" />
Defines a high-resolution, relevant image that quickly loads and looks great across different devices and social media platforms.
<meta property="og:image:url" content="https://example.com/path/to/small-image.jpg" />
Uses an image that is of low resolution, which may appear blurry or pixelated when shared on social media.
<meta property="og:image:url" content="https://example.com/path/to/image-with-text.jpg" />
Specifies an image with embedded text, risking important details being obscured or cut off on social media platforms.

Recommendations

  • Use High-Quality Images
    Select high-resolution images (at least 1200x630 pixels) to ensure they look good on all platforms. Lower resolution images may appear blurry or pixelated.
  • Keep it Relevant
    Ensure the image is representative of the content of the page. Irrelevant images can decrease click-through rates or even negatively impact user trust.
  • Avoid Text on Images
    Text on images can be cut off due to varying display sizes on different platforms. It’s best to keep important text out of these images.
  • Optimize Load Times
    Optimize image file sizes to reduce load times without sacrificing quality. Slow-loading images may not be displayed timely when the link is shared.

Related Documentation

Related Meta Tags

og:description

property

Defines the description of your content as you want it to appear when shared on social platforms like Facebook, LinkedIn, and others that adhere to the Open Graph protocol.

<meta property="og:description" content="Discover the top 10 SEO strategies to boost your website's traffic in 2023. Click to learn more!">
This is concise, actionable, and provides a clear benefit, encouraging users to click through.

og:audio:url

property

Specifies the URL of the audio content to be used as a rich object in a social graph. It is meant for integrating audio content that represents the page or is closely related to the content of the page, enhancing its representation on social media platforms.

<meta property="og:audio:url" content="https://example.com/audio.mp3">
Specifies a direct URL to an MP3 file representing the audio content associated with the page.

og:audio:type

property

Defines the MIME type of the audio content referenced in the og:audio tag, ensuring platforms like Facebook understand how to process the linked audio file.

<meta property="og:audio:type" content="audio/mpeg">
Indicates an MP3 audio file, which is widely supported and commonly used for music files.

og:audio:secure_url

property

A secure URL to an audio file to accompany your object within the Graph. Used when the standard og:audio tag URL does not support SSL.

<meta property="og:audio:secure_url" content="https://example.com/music/song.mp3">
A valid, secure URL to an MP3 file that is optimized for web usage and has broad format support.

og:audio

property

Defines the audio content that will accompany your page when it is shared on social media platforms that support Open Graph.

<meta property="og:audio" content="http://example.com/birdsong.mp3">
Specifies an accessible MP3 audio file on a public server, which can be easily retrieved and played by the implementing social platform.