Webpage Properties

Twitter 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. widget ID stored preference (embedded timelines only)
  4. meta or link element

Disable DOM scan for widgets and buttons

The Twitter for Websites JavaScript scans document.body after initialization to locate buttons, widgets, and web intents for enhancement. Disable this scan if Twitter 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 Twitter profile of the page

Populate the via property of a Tweet button by linking to your Twitter 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

Link color

Specify a hexadecimal color value for Tweet links displayed in an embedded Tweet or an embedded Timeline.

  <meta
  name="twitter:widgets:link-color"
  content="#ff00ff">

Border color

Specify a border color for any embedded Timelines displayed on the page.

  <meta
  name="twitter:widgets:border-color"
  content="#ff00ff">

Do not track parameter

You may choose whether Twitter widgets on your site help to personalize content and suggestions for Twitter 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 Twitter 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>

Disable 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 Twitter. Set csp=on to disable functionality which could display Content Security Policy warnings on your site.

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