firefox top sites home page icon title - html

does anyone know what meta tags firefox uses to show the "title" name on the topsites homepage?
I currently use:
<meta name="application-name" content="My App" />
<meta property="og:image" content="My Image URL">
<meta property="og:description" content="My site descriptionn">
<meta property="og:title" content="My Title">
<meta property="og:type" content="website">
<meta property="og:site_name" content="My Site Name">
which shows my icon properly but the title is the domain name that is in the url. I would of expected the title to be "My title"
Any idea how i can set the title property properly?
many thanks

Related

Why is this Meta Embed Image not showing?

Why is this Meta Embed Image not showing when sharing the site link? It used to work but suddenly stopped for some reason
<meta property="og:title" content="Site List">
<meta property="og:description" content="Something">
<meta property="og:type" content="website">
<meta name="og:image" itemprop="image" content="https://spiritaxolotl.github.io/images/faces/spax/Smirk.png">

How to insert site preview image for Facebook AND WhatsApp simultaneously?

I know how to use Open Graph meta tags in head of HTML. Example:
<meta property="og:type" content="website">
<meta property="og:url" content="https://sitename.com/">
<meta property="og:title" content="My blog"/>
<meta property="og:description" content="Tutorial..."/>
<meta property="og:image:secure_url" content="https://sitename.com/img/tutorial.png"/>
But if a type of preview image is good for WhatsApp, it's not good for Facebook! So how should you set meta tags for different platforms at the same time? Thanks
You can specify two (or more) Open Graph images, the first, a rectangular image for FB and the second, a square image for WhatsApp.
<meta property="og:type" content="website">
<meta property="og:url" content="https://sitename.com/">
<meta property="og:title" content="My blog"/>
<meta property="og:description" content="Tutorial..."/>
<meta property="og:image" content="https://sitename.com/img/tutorial_1200-600.png"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:image" content="https://sitename.com/img/tutorial_400-400.png"/>
<meta property="og:image:width" content="400"/>
<meta property="og:image:height" content="400"/>
WhatsApp uses the last image.

How to get link card using meta

I have a web site with a few pages and for example if I want to share with somebody one of my link and send it via whatsapp, I need to see logo and some text in my message. [as it on this image]
How can I do that?
I just have found this sample:
<link rel="shortcut icon" href="img/img.svg">
<link rel="apple-touch-icon image_src" href="img/img.svg">
<meta name="twitter:title" property="og:title" itemprop="name" content="Link to source">
<meta name="twitter:description" property="og:description" itemprop="description" content="Mycontent">
You have to add some meta tags.
<meta property="og:site_name" content="Your site name">
<meta property="og:title" content="Page title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" itemprop="image" content="your_page_image.png">
<meta property="og:type" content="website" />
You can try your code with : https://cards-dev.twitter.com/validator
<head>
<meta property="og:type" content="website">
<meta property="og:url" content="https://stackoverflow.com/questions/54984552/how-to-get-link-to-source-using-htm-css">
<meta property="og:site_name" content="Stack Overflow">
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<meta name="twitter:card" content="summary">
<meta name="twitter:domain" content="stackoverflow.com">
<meta name="twitter:title" property="og:title" itemprop="name" content="How to get link to source using htm css">
<meta name="twitter:description" property="og:description" itemprop="description" content="I have a web site with a few pages and for example if I want to share with somebody one of my link and send it via whatsapp, I need to see logo and some text in my message. [as it on this image] H...">

How to customize the Image shown when posting a URL of a website on Social Media sites

I have seen that when we put a url of a website, an image appears for that URL. Examples include social media sites Like Google+, Facebook, Instagram. I need to know how to add such an image to my website. Is there a certain tag Or script that should be applied to show that image?
When I share my website link I don't get such a one. I need to know why and how to do it.
OG tags are used by these social sites as below:
Site info OG tags Start
<meta property="og:site_name" content="$site_name" />
<meta property="og:url" content="$site_url" />
<meta property="og:type" content="website" />
<meta name="title" property="og:title" content="$the_title" />
<meta name="image" property="og:image" content="$site_logo"/>
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
<meta name="description" property="og:description" content="$site_description" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" description="#username" />
<meta name="twitter:title" content="$the_title" />
<meta name="twitter:description" content="$site_description" />
<meta name="twitter:image:src" content="$site_logo">
<meta name="twitter:domain" content="$site_url">
Site info OG tags End
Add the following tags to the <head> section of the HTML code of the page you need to share:
<link rel="image_src" href="{image}" />
<meta name="twitter:image" property="og:image" content="{image}" />
And replace {image} with the URL of the page image.
When you add the tags, Social Media sites can still share the page without an image. It happens because sites cache pages data. You need to wait the cache to be cleaned or clean it manually (some sites, e.g. Facebook, provide this possibility; it is a topic for another question).

How to use correctly the og meta tags for sharing GIFs on facebook

I am trying to share my link page in facebook in order to generate a GIF (with the rounded GIF symbol) using the og meta tags:
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta property="og:url" content="https://i.giphy.com/YuXbch37iz5ao.gif" />
<meta content="video.other" property="og:type" />
<meta property="og:image" content="https://i.giphy.com/YuXbch37iz5ao.gif" />
<meta content="image/gif" property="og:image:type" />
<meta property="og:image:width" content="384" />
<meta property="og:image:height" content="480" />
<meta content="991618354275198" property="fb:app_id" />
<meta content="crazygifs" property="og:site_name" />
And the result is it after sharing the link in facebook:
And the expected result should be the image above with this the GIF symbol:
It happens with some gifs, if I try to do the same thing with this link, it works.
I assume that is a rendering problem from facebook. No solution so far...