What's The Difference Between Meta Name and Meta Property

What's the difference between meta name and meta property?

The name attribute is the "usual" way for specifying metadata in HTML. It’s defined in the HTML5 spec.

The property attribute comes from RDFa.

RDFa 1.1 extends HTML5 so that it’s valid to use meta and link elements in the body, as long as they contain a property attribute.

You can use both ways, HTML5’s name and RDFa’s property, together on the same meta element.

Note that you might also see meta elements with an itemprop attribute. That would be from Microdata.

Difference between meta name=title tag and title/title tag

<title> is a required element on any HTML page to be valid markup, and will be what is displayed as the page title in your browser's tab/window title. For instance, try inputting the following markup into the W3C Markup Validator (via "Direct Input"):

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

This will produce an error that there is no instance of <title> in <head>.

The <meta name="title" content="page-title"> element is just that -- metadata about your page, that any client browser or web crawler can use or not use as it wants. Whether it is used or not will depend on the crawler/client in question, as none of them are required to look for or not look for it.

So in short, you should have a <title> element if you want valid markup. The <meta> tag is going to depend on whether you want to provide for crawlers/clients, and you'd probably have to check documentation for if a particular crawler uses it.

What do these meta properties do?

They basically show other sites how to display your website.

Like if you share a YouTube video in Twitter or Facebook is shows all nice with the video title, thumbnail, length and all those great stuff. Its all done using meta tags.

Google use website meta tags to determine what the website is about and if it is appropriate.

Here is a link example:

https://youtu.be/Luo_wCcWAaw

The first two are the exact same that's why they're I'd is the same. They tell you the name of the website to Twitter.

Onto Property's

They tell you how the website should look on different devices and on different websites

iPhone property tells how the meta tag should look on iPhone.

IPad meta says how it should look on ipad.

Fb one says how it should look on Facebook.

Can I combine meta name description and property og:description in same tag?

TL;DR No.

In your code, sure, you can do anything. ;)
But it doesn't grant that it will be working and interpreted well by other systems.

As mentioned in the HTML standard:

description - The value must be a free-form string that describes the page. The value must be appropriate for use in a directory of pages, e.g. in a search engine. There must not be more than one meta element where the name attribute value is an ASCII case-insensitive match for description per document.

As mentioned in One Graph description:

While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement.

optional metadata, og:description - A one to two sentence description of your object

Historically, HTML standards were much earlier and widely used - for search engines (SE - Google, Bing, Yahoo!, ...), than OG protocol (preview cards for URL sharing - chats, messengers, Facebook, ...).

SEs take a look at "description" but I'm not sure about "og:description". From the opposite side, a chatbot crawler for sure checks "og:description" and I'm not sure about "description". Both of these elements could contain the same text. Or different.

Usually, "description" is a rare updateable, its content is mostly "for machines". "og:description" could be changed more often to reflect a page's current state, this one is mostly "for humans". For example, a product page can have its general "description" for SEs and their results, current marketing text is better to be placed in "og:description".

Yes, they have close semantic values but technically they are from different mechanisms and for different purposes.

Use them to achieve your goals.

How do I get the information from a meta tag with JavaScript?

You can use this:

function getMeta(metaName) {
  const metas = document.getElementsByTagName('meta');

  for (let i = 0; i < metas.length; i++) {
    if (metas[i].getAttribute('name') === metaName) {
      return metas[i].getAttribute('content');
    }
  }

  return '';
}

console.log(getMeta('video'));

Is it possible to use the same meta tag for opengraph and schema.org

HTML+RDFa 1.1 and Microdata extend HTML5’s meta element.

HTML+RDFa 1.1 (W3C Recommendation) defines:

If the RDFa @property attribute is present on the meta element, neither the @name, @http-equiv, nor @charset attributes are required and the @content attribute MUST be specified.

Microdata (W3C Note) defines:

If a meta element has an itemprop attribute, the name, http-equiv, and charset attributes must be omitted, and the content attribute must be present.

That means:

It’s not allowed to use Microdata’s itemprop attribute together with HTML5’s name attribute.
It’s allowed to use RDFa’s property attribute together with HTML5’s name attribute:
```
<meta name="description" property="og:description" content="great description" />
```
(possibly an issue with having this in the body instead of the head)
It seems to be allowed to use Microdata’s itemprop attribute together with RDFa’s property attribute if HTML5’s name attribute is not provided:
```
<meta itemprop="description" property="og:description" content="great description" />
```
(but the W3C Nu Html Checker reports an error)

What's The Difference Between Meta Name and Meta Property