The namespace conception in HTML is similar to other web languages; it prevents ambiguity on the data structure. It refers to which semantic vocabularies or syntax should be used when the namespace is present in the document. In our case, the og namespace refers to the Open Graph Protocol, while the fb namespace refers to Facebook-own Open Graph specification.
Alternatively, we can use the prefix attribute to define these namespaces.
Twitter card tags look similar to Open Graph tags, and are based on the same conventions as the Open Graph protocol. When using Open Graph protocol to describe data on a page, it is easy to generate a Twitter card without duplicating tags and data. When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe content and experience.
Note that while Open Graph recommends specifying the “og” RDFa Core 1.1 CURIE prefix mapping via , no such markup is required for Twitter cards and its use of the twitter: prefix in a HTML meta element’s name attribute. Open Graph protocol also specifies the use of property and content attributes for markup () while Twitter cards use name and content. Twitter’s parser will fall back to using property and content, so there is no need to modify existing Open Graph protocol markup if it already exists.
The example below uses a mix of Twitter and Open Graph tags to define a summary card:
Luckily, our favorite social networks also provide tools to help us debug our tags. Once you make sure that your tags are actually showing up in the source code of your website, you’ll be able to preview how your website will look in the feed.
