Making your pages share-ready

When a user shares your site on a social network, the platform can only guess what to display in the preview — often yielding just a bare link or a generic title. By adding targeted metadata to each page, you can control exactly what appears: a meaningful title, a useful description, and a compelling image. This removes the burden from users to describe your content themselves and makes the shared post far more likely to earn clicks.

Three complementary standards cover the major platforms: schema.org microdata for Google+, Open Graph Protocol (OGP) for Facebook, and Twitter Cards for Twitter. Each relies on small snippets of markup placed in your page's code.

Real-world contexts: schema.org microdata

The schema.org vocabulary paired with microdata attributes helps crawlers interpret the semantic structure of a page. Unlike conventional metadata that sits in the document head, microdata lives alongside the content it describes.

The mechanism is built from three attributes:

  • itemscope marks an element as a container for a described item.
  • itemtype sets the item's category using a URL from the schema.org type list.
  • itemprop declares individual properties within that scope; for social sharing, the standard properties are name, description, and image.

After adding this markup, you can test its appearance with Google's Structured Data Testing Tool to catch any errors before publishing.

Facebook and the Open Graph Protocol

Facebook reads the Open Graph Protocol to treat external web pages much like native Facebook objects. The required metadata is composed of meta tags with an og: prefixed property attribute placed in your page's head section. Each property tag maps to a semantic detail of the page, enabling Facebook to produce a rich, informative preview.

The official OGP site documents the full range of available properties, and Facebook's Debugger tool lets you preview the result of your markup before you go live.

Twitter Cards: extending Open Graph for Twitter

Twitter Cards build on the Open Graph Protocol but apply the metadata specifically to tweets. To enable them, your domain must be approved through Twitter's Card Validator, and you must use a twitter:card meta tag where name is used as the attribute for descriptive information, not property.

The markup permits media attachments like images and video. A particularly useful addition is a twitter:site tag: by setting its value to your Twitter handle, anyone interacting with a tweet linking to your page can directly engage with your account.

Combining all three approaches

The most effective strategy is to include schema.org microdata, Open Graph Protocol, and Twitter Cards together on every page. Several elements can be shared across these systems to avoid redundancy:

  • The itemscope attribute can be placed on the page's head tag.
  • Common title and description values satisfy both microdata and OGP.
  • An image URL declared once via itemprop="image" using a link tag with an href attribute can cover OGP's requirement for an image without duplicating the og:image meta tag.

Once the combined metadata is in place, run each platform's dedicated validation tool to confirm that your shared link previews look exactly as you intend.