<zhead>

HTML Tag Collections

Article

Tags to improve the visibility of your articles in search engine results.

Get Started

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The Ultimate Guide to Freshwater Fishing - FishTrawling</title>
  <meta name="description" content="Learn how to bake delicious, moist cupcakes with our easy-to-follow guide. Featuring tips and tricks for beginners.">
  <meta property="og:type" content="article">
  <meta property="og:title" content="The Ultimate Guide to Freshwater Fishing">
  <meta property="og:description" content="Discover the top 10 SEO strategies to boost your website's traffic in 2023. Click to learn more!">
  <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/og-image.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="2023-04-01T12:00:00Z">
  <meta property="article:modified_time" content="2023-05-10T14:45:00Z">
  <meta property="article:author" content="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 property="twitter:title" content="Learn Web Development Basics">
  <meta name="twitter:description" content="Discover the latest in tech with our comprehensive guides and reviews.">
  <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">
</html>
useHead({
  title: 'The Ultimate Guide to Freshwater Fishing - FishTrawling',
  meta: [
    {
      name: 'description',
      content: 'Learn how to bake delicious, moist cupcakes with our easy-to-follow guide. Featuring tips and tricks for beginners.'
    },
    {
      property: 'og:type',
      content: 'article'
    },
    {
      property: 'og:title',
      content: 'The Ultimate Guide to Freshwater Fishing'
    },
    {
      property: 'og:description',
      content: `Discover the top 10 SEO strategies to boost your website's traffic in 2023. Click to learn more!`
    },
    {
      property: 'og:url',
      content: 'https://example.com/page.html'
    },
    {
      property: 'og:site_name',
      content: 'ExampleCorp'
    },
    {
      property: 'og:locale',
      content: 'en_US'
    },
    {
      property: 'og:image',
      content: 'https://example.com/og-image.jpg'
    },
    {
      property: 'og:image:width',
      content: '1200'
    },
    {
      property: 'og:image:height',
      content: '600'
    },
    {
      property: 'og:image:alt',
      content: 'Team collaborating on a web development project'
    },
    {
      property: 'article:published_time',
      content: '2023-04-01T12:00:00Z'
    },
    {
      property: 'article:modified_time',
      content: '2023-05-10T14:45:00Z'
    },
    {
      property: 'article:author',
      content: 'John Doe'
    },
    {
      property: 'article:section',
      content: 'Technology'
    },
    {
      property: 'article:tag',
      content: 'JavaScript'
    },
    {
      name: 'twitter:card',
      content: 'summary_large_image'
    },
    {
      name: 'twitter:creator',
      content: '@contentcreator'
    },
    {
      name: 'twitter:site',
      content: '@exampleUser'
    },
    {
      name: 'twitter:image',
      content: 'https://example.com/path/to/image.jpg'
    },
    {
      name: 'twitter:image:alt',
      content: 'A scenic lake with a mountain in the background'
    },
    {
      property: 'twitter:title',
      content: 'Learn Web Development Basics'
    },
    {
      name: 'twitter:description',
      content: 'Discover the latest in tech with our comprehensive guides and reviews.'
    },
    {
      name: 'twitter:label1',
      content: 'Author'
    },
    {
      name: 'twitter:data1',
      content: '42K Tweets'
    },
    {
      name: 'twitter:label2',
      content: 'Location'
    },
    {
      name: 'twitter:data2',
      content: '30 mins'
    }
  ]
})

Explanation

title

Specifies the title of the document, shown in a browser's title bar or on the page's tab. It can only contain text and any contained tags are not interpreted.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The Ultimate Guide to Freshwater Fishing - FishTrawling</title>
</html>
Setting the page title with the site name.

description

name

Provides a brief and concise summary of a web page’s content. This summary is often used by search engines to display snippet previews in search results, influencing click-through rates.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Learn how to bake delicious, moist cupcakes with our easy-to-follow guide. Featuring tips and tricks for beginners.">
</html>
A well-crafted description for a page about baking cupcakes, incorporating relevant keywords and staying within the recommended character limit.

og:type

property

Defines the type of content being shared on social media platforms, such as articles, videos, or images. This tag helps social platforms understand and display the content in the most appropriate format.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:type" content="article">
</html>
Best for blog posts or news articles, helping social platforms present the content with emphasis on the title and author.

og:title

property

Defines the title of your content as you want it to appear when shared on social platforms. The og:title meta tag is part of the Open Graph protocol and is crucial for social media SEO, as it determines the title text that appears when a page is shared on social platforms like Facebook, LinkedIn, and Twitter.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="The Ultimate Guide to Freshwater Fishing">
</html>
A descriptive and enticing og:title that promises value and fits well within the character limits of most social platforms.

og:description

property

Defines the description of your content as you want it to appear when shared on social platforms like Facebook, LinkedIn, and others that adhere to the Open Graph protocol.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:description" content="Discover the top 10 SEO strategies to boost your website's traffic in 2023. Click to learn more!">
</html>
This is concise, actionable, and provides a clear benefit, encouraging users to click through.

og:url

property

Defines the canonical URL of your page that will be used as its permanent ID in the graph. It's crucial for ensuring content consistency across sharing on social platforms.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:url" content="https://example.com/page.html">
</html>
Specifies the absolute URL of the page, ensuring social platforms can accurately identify and link back to the content.

og:site_name

property

Indicates the name of your website that should be displayed within the context of the shared content on social media platforms. It helps reinforce brand consistency across various social networks.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:site_name" content="ExampleCorp">
</html>
Specifies a clear, consistent site name, enhancing brand recognition in social shares.

og:locale

property

Defines the locale of the page content. This tag helps social media platforms and other services understand the language and regional settings to use when displaying or categorizing the shared content.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:locale" content="en_US">
</html>
Specifies that the content is intended for English speakers in the United States.

og:image

property

Defines the image that appears when a web page is shared on social media platforms. It ensures the shared content is visually appealing and contextually relevant, enhancing click-through rates from social shares.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:image" content="https://example.com/og-image.jpg">
</html>
Specifies a well-optimized, properly sized image with the recommended aspect ratio, ideal for sharing across various social media platforms.

og:image:width

property

Specifies the width of the image used in the Open Graph protocol, helping social media platforms and other services understand the dimensions of the image to properly display it when the page is shared.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:image:width" content="1200">
</html>
Indicates the width of the associated Open Graph image is 1200 pixels, a recommended width for high-resolution displays on most social platforms.

og:image:height

property

Specifies the height of the image in pixels used when sharing the page on social media platforms like Facebook. This helps the platform allocate the correct space for the image before it's fully loaded.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:image:height" content="600">
</html>
Specifies the image’s height as 600 pixels, a typical value that fits within most social platforms’ guidelines.

og:image:alt

property

Provides alternative text for the image specified by og:image, ensuring it is accessible and descriptive of the image content for scenarios where the image cannot be displayed.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:image:alt" content="Team collaborating on a web development project">
</html>
Describes the content of the image in a way that provides context and relevance to the page or article.

article:published_time

property

Defines the original publication date of an article or webpage. This helps search engines and social media platforms understand when the content was first published, which can be crucial for SEO and content freshness.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="article:published_time" content="2023-04-01T12:00:00Z">
</html>
Specifies the UTC time when the article was published. The correct use of ISO 8601 format ensures accurate parsing by platforms and devices.

article:modified_time

property

Indicates the date and time when the article was last modified, helping social media platforms and search engines understand content recency.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="article:modified_time" content="2023-05-10T14:45:00Z">
</html>
Specifies the article was last modified on May 10th, 2023 at 2:45 PM UTC, following the recommended ISO 8601 format.

article:author

property

Defines the author(s) of an article for social media platforms, particularly when shared. It helps in categorizing content by authorship on platforms like Facebook.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="article:author" content="John Doe">
</html>
Specifies "John Doe" as the author, providing clear and direct authorship information.

article:section

property

Defines the section or category that the content belongs to. This tag is part of the Open Graph protocol, which is used to ensure that content is displayed attractively when shared on social platforms.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="article:section" content="Technology">
</html>
Good use of a broad yet specific category that clearly indicates the general subject area of the content.

article:tag

property

Used within the Open Graph protocol to specify a tag (keyword) associated with an article. This helps define the topics or terms that represent the content, making it more discoverable and relevant in social media searches and feeds.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="article:tag" content="JavaScript">
</html>
Indicates that the article is relevant to JavaScript, making it more discoverable to those interested in this programming language.

twitter:card

name

Defines the type of content represented on the page to create a rich media experience when the page is shared on Twitter.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="twitter:card" content="summary_large_image">
</html>
Ideal for blog posts or articles where a large feature image can draw attention.

twitter:creator

name

Defines the Twitter username of the content creator to be displayed as part of Twitter Card metadata.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="twitter:creator" content="@contentcreator">
</html>
Correctly identifies the Twitter handle of the individual content creator.

twitter:site

name

Defines the Twitter username of the website or the content creator. This username is displayed in Twitter cards associated with the website or content to indicate the source. It begins with an @ symbol.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="twitter:site" content="@exampleUser">
</html>
Correctly starts with @ and matches the user’s Twitter username exactly.

twitter:image

name

Defines the image to be used when the webpage is shared on Twitter. It influences the visual representation of shared content, enhancing user engagement.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="twitter:image" content="https://example.com/path/to/image.jpg">
</html>
Using an absolute URL for an optimized, high-quality image encourages users to engage with the shared content.

twitter:image:alt

name

Provides alternative text for the image specified in the twitter:image tag. This text describes the image for users who are unable to see it, improving accessibility and providing context in environments where the image cannot be displayed.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="twitter:image:alt" content="A scenic lake with a mountain in the background">
</html>
Provides a clear, concise description of the image without unnecessary filler words.

twitter:title

property

Defines the title of the content shared on Twitter. It sets the title snippet visible in a tweet when a URL is shared.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="twitter:title" content="Learn Web Development Basics">
</html>
A concise, engaging title clearly indicating what the content is about, encouraging clicks and shares.

twitter:description

name

Defines a concise description of the content of the page. This description is used when the page is shared on Twitter, enhancing the snippet displayed in tweets.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="twitter:description" content="Discover the latest in tech with our comprehensive guides and reviews.">
</html>
This is a concise, engaging description that provides visitors with a clear understanding of what to expect, likely increasing click-through rates.

twitter:label1

name

Used within Twitter card metadata to define the label for data displayed in tweet cards generated from shared URLs. It's typically used in conjunction with `twitter:data1` to showcase specific types of information, enhancing social sharing.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="twitter:label1" content="Author">
</html>
Specifies that the accompanying `twitter:data1` tag will display the article’s author name, providing clear context for the data.

twitter:data1

name

Part of Twitter Cards, used to define extra data that will be visually presented in the card. Often used to provide additional context like statistics, or relevant information that can enhance the user’s understanding at a glance.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="twitter:data1" content="42K Tweets">
</html>
Quantitative data example for "twitter:data1" used with a label like "Engagement", effectively showing the volume of tweets about a topic.

twitter:label2

name

Defines the label for the second data point displayed in a Twitter Card, often used alongside "twitter:data2" to provide additional context or information.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="twitter:label2" content="Location">
</html>
Use "Location" as "twitter:label2" with a corresponding "twitter:data2" value like "San Francisco, CA" to specify the location relevant to the Twitter Card content.

twitter:data2

name

Used in Twitter Cards to provide additional data points or context relevant to the content shared on Twitter, enhancing the information displayed in the card.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="twitter:data2" content="30 mins">
</html>
Provides an additional data point for "twitter:data1" which might contain an article title, indicating the estimated reading time for the content.

HTML Tag Collections

Ready to use <head> code samples to get started, and finished quickly.

Essentials

SEO Starter

Social Share

Icons & Colors

PWA