Question

I was wondering if I can create a custom HTML tag with the same functionality of Facebook’s Open Graph meta tags for my site.

I was thinking of something like this:

<mysite title="My website title" description="Some description" 
    image="http://mysite.com/image.png">

And then use PHP to fetch this data (I can already do this with meta-tags).

Some points:

• I use HTML5, are there any syntax problems using this method?

• Google+ uses something like this: g:plusone

Answer 1

Marat Tanalin is right, in HTML5 you are not allowed to “invent” elements/attributes/values that are not specified. Alohci gives a nice example why that is the reason.

mmmshuddup notes, that you could use XHTML5. However, I think it would be allowed in that case, if you extend the vocabulary formally correct. It’s XML, after all. It couldn’t be a polyglot (X)HTML5 document anymore, though.

I think there may be a (X)HTML5 solution that could work for you (depends on your specific use case, though): the data-* attribute:

<div data-title="My website title" data-description="Some description" data-image="http://mysite.com/image.png">…</div>

You can “invent” attributes that start with data- followed by a string you are free to define.

Another possible (more complex) way might be to use microdata with an existing vocabulary that suits your needs (if you can’t find one, you could create one yourself). I would only go this way if the (meta)data you want to provide is valuable for others.