11ty / 11ty/docs

Use name attribute instead of property for Twitter meta tags?

Open
#1,155 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Nunjucks
Stars
547
Forks
726
Avg merge
2h 23m
Merged PRs (30d)
3

Description

Open Graph protocol also specifies the use of property and content attributes for markup (<meta property="og:image" content="http://example.com/ogp.jpg"/>) 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.

https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started

While Open graph meta tags use the property and content attributes, the Twitter card docs state they use name and content. Should these Twitter card meta tags use name instead of property? There might be a reason for keeping these twitter meta tags with property attributes (https://stackoverflow.com/questions/22350105/whats-the-difference-between-meta-name-and-meta-property)

for instance in base.njk L35-L43 these property attributes for twitter card metadata could be changed to name (unless they were explicitly defined with property attributes for a reason)

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="@eleven_ty">
<meta property="twitter:creator" content="@zachleat">
<meta property="twitter:url" content="https://www.11ty.dev/">
<meta property="twitter:title" content="{{ subtitleText }}">
<meta property="twitter:description" content="{{ social.description }}">
<meta property="twitter:image" content="{{ social.imgsrc }}">
<meta property="twitter:image:alt" content="{{ social.imgalt }}">

cc @zachleat

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in src/_includes/layouts/base.njk at lines 35–43 and compare the Twitter card markup with the linked Twitter Cards and Open Graph guidance. Confirm whether these tags should use name or property, then update the metadata consistently if needed and verify the rendered HTML.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
documentation, web-dev
Issue type
Bug
Difficulty
1/5
Estimated time
Under an hour
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.