Article
Describe the page first, then add Open Graph article fields for publication dates, authors, section, and tags. These fields shape compatible link previews; they do not guarantee search visibility.
Get started
<title>Freshwater Fishing Guide | River Notes</title>
<meta name="description" content="Bake 12 vanilla cupcakes in 35 minutes. Includes metric measurements, storage notes, and fixes for cakes that sink.">
<meta property="og:type" content="article">
<meta property="og:title" content="Freshwater Fishing: A Beginner’s Guide">
<meta property="og:description" content="A practical guide to choosing and caring for indoor plants in low-light rooms.">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:site_name" content="ExampleCorp">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="600">
<meta property="og:image:alt" content="Team collaborating on a web development project">
<meta property="article:published_time" content="2026-04-01T12:00:00Z">
<meta property="article:modified_time" content="2026-05-10T14:45:00Z">
<meta property="article:author" content="https://example.com/authors/john-doe">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@contentcreator">
<meta name="twitter:site" content="@exampleUser">
<meta name="twitter:image" content="https://example.com/path/to/image.jpg">
<meta name="twitter:image:alt" content="A scenic lake with a mountain in the background">
<meta name="twitter:title" content="Learn Web Development Basics">
<meta name="twitter:description" content="A practical guide to choosing and caring for indoor plants in low-light rooms.">
<meta name="twitter:label1" content="Author">
<meta name="twitter:data1" content="42K Tweets">
<meta name="twitter:label2" content="Location">
<meta name="twitter:data2" content="30 mins">Explanation
title
Names the document in browser tabs, history, bookmarks, and often search results. The element accepts text only.
<title>Freshwater Fishing Guide | River Notes</title>description
nameSummarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does.
<meta name="description" content="Bake 12 vanilla cupcakes in 35 minutes. Includes metric measurements, storage notes, and fixes for cakes that sink.">og:type
propertySets the Open Graph object type. It is one of the four required basic properties, and some types require extra metadata.
<meta property="og:type" content="article">og:title
propertyProvides the title of the Open Graph object. It is one of the four required basic properties.
<meta property="og:title" content="Freshwater Fishing: A Beginner’s Guide">og:description
propertyProvides a one or two sentence description of the Open Graph object.
<meta property="og:description" content="A practical guide to choosing and caring for indoor plants in low-light rooms.">og:url
propertyProvides the canonical URL used as the object’s permanent identifier. It is one of the four required basic properties.
<meta property="og:url" content="https://example.com/page.html">og:site_name
propertyProvides the name of the larger website that contains this object, such as IMDb.
<meta property="og:site_name" content="ExampleCorp">og:locale
propertySets the locale of the Open Graph metadata in language_TERRITORY form. The default is en_US.
<meta property="og:locale" content="en_US">og:image
propertyProvides the URL of an image that represents the Open Graph object. It is one of the four required basic properties.
<meta property="og:image" content="https://example.com/cover.jpg">og:image:width
propertyProvides the width, in pixels, of the preceding og:image resource.
<meta property="og:image:width" content="1200">og:image:height
propertyProvides the height, in pixels, of the preceding og:image resource.
<meta property="og:image:height" content="600">og:image:alt
propertyDescribes what appears in the preceding og:image. It is a description, not a caption.
<meta property="og:image:alt" content="Team collaborating on a web development project">article:published_time
propertyRecords when an article was first published. Use it with og:type set to article.
<meta property="article:published_time" content="2026-04-01T12:00:00Z">article:modified_time
propertyRecords when an article was last changed. Open Graph defines the value as an ISO 8601 datetime.
<meta property="article:modified_time" content="2026-05-10T14:45:00Z">article:author
propertyLinks an article to one or more author profiles. The value is a URL, and you can repeat the property for multiple authors.
<meta property="article:author" content="https://example.com/authors/john-doe">article:section
propertyNames the high-level section that contains an article, such as Technology or Culture.
<meta property="article:section" content="Technology">article:tag
propertyAdds a tag word or phrase associated with an article. Repeat the property to provide more than one tag.
<meta property="article:tag" content="JavaScript">twitter:card
nameSelects the X Card format for a page. The metadata still uses the twitter: prefix.
<meta name="twitter:card" content="summary_large_image">twitter:creator
nameAttributes the page’s content to an X account using its @handle. The metadata name retains the twitter: prefix.
<meta name="twitter:creator" content="@contentcreator">twitter:site
nameAttributes the website or publication to an X account using its @handle. The metadata name retains the twitter: prefix.
<meta name="twitter:site" content="@exampleUser">twitter:image
nameProvides the image URL used in an X Card link preview. The metadata name retains the twitter: prefix.
<meta name="twitter:image" content="https://example.com/path/to/image.jpg">Describes the image in twitter:image for people who cannot see it. The metadata name retains the twitter: prefix.
<meta name="twitter:image:alt" content="A scenic lake with a mountain in the background">twitter:title
nameProvides the title used in an X Card link preview. The metadata name retains the twitter: prefix.
<meta name="twitter:title" content="Learn Web Development Basics">Provides the description used in an X Card link preview. The metadata name retains the twitter: prefix.
<meta name="twitter:description" content="A practical guide to choosing and caring for indoor plants in low-light rooms.">twitter:label1
nameUnsupported legacy Product Card field for the first custom label. X no longer supports Product Cards or publishes this field in its developer documentation.
<meta name="twitter:label1" content="Author">twitter:data1
nameUnsupported legacy Product Card field for the first custom value. X no longer supports Product Cards or publishes this field in its developer documentation.
<meta name="twitter:data1" content="42K Tweets">twitter:label2
nameUnsupported legacy Product Card field for the second custom label. X no longer supports Product Cards or publishes this field in its developer documentation.
<meta name="twitter:label2" content="Location">twitter:data2
nameUnsupported legacy Product Card field for the second custom value. X no longer supports Product Cards or publishes this field in its developer documentation.
<meta name="twitter:data2" content="30 mins">More collections
Start with the closest collection, then trim it to match your page.