Webpage properties

X Widgets Webpage Properties

Set widget preferences across an entire website by including <meta> and <link> elements in your pages page.

Widget settings specified in a <meta> may be overridden at the individual widget level. Order of precedence:

  1. web intent link query parameter
  2. widget attribute
  3. meta or link element
     

Turn off DOM scan for widgets and buttons

The X for Websites JavaScript scans document.body after initialization to locate buttons, widgets, and web intents for enhancement. Turn off this scan if X content is only loaded via JavaScript factory functions or if you prefer to directly call load on a smaller fragment of the page.

      <meta
  name="twitter:widgets:autoload"
  content="off">

Canonical link

The Tweet button uses the canonical link relation of the page expressed in a <link> as the shared URL if the URL property is not set in the button markup.

Add a canonical link in the <head> section of your webpage.

      <link
  rel="canonical"
  href="/">

Identify the X profile of the page

Populate the via property of a Tweet button by linking to your X profile page with a me link relationship token.

Set a me link relationship in the <head> section of your webpage.

      <link
  rel="me"
  href="https://twitter.com/TwitterDev">

You may also set a me relationship from an anchor element on your page, such as a Follow button.

      <a
  class="twitter-follow-button"
  rel="me"
  href="https://twitter.com/TwitterDev">
Follow @TwitterDev
</a>

Theme

Override the default light theme preference for an embedded Tweet or an embedded Timeline.

      <meta
  name="twitter:widgets:theme"
  content="dark">

Default view

theme = dark

Do not track parameter

You may choose whether X widgets on your site help to personalize content and suggestions for X users, including ads. You can opt out of having information from your website used for personalization by following the instructions below. Include the following snippet within the <meta> and <link> elements on your pages that include X for Websites widgets:

      <meta name="twitter:dnt" content="on">

You may also opt-out of this data use for a specific widget, and can do so by setting the optional data-dnt parameter to be true, as shown in the example below:

      <a
  class="twitter-share-button"
  href="https://twitter.com/share"
  data-dnt="true">
Tweet</a>
<script async defer
  src="//platform.twitter.com/widgets.js"
  charset="utf-8">
</script>

Turn off functionality which may trigger Content Security Policy warnings

An embedded Tweet or embedded Timeline may display with restricted capabilities when a Content Security Policy restricts inline loading of X. Set csp=on to turn off functionality which could display Content Security Policy warnings on your site.

      <meta
  name="twitter:widgets:csp"
  content="on">