This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How does Facebook Sharer select Images?
When I add a Facebook link to my website, it picks up randomly large images from the site, and not quite attached to the story. How can I control what images are picked up by Facebook?
The developer of the website can include specific meta tags in the HTML.
From the Facebook page for "Share Partners"...
In order to make sure that the preview
is always correctly populated, you
should add the tags shown below to
your html. An example news story could
have the following:
<meta name="title" content="Smith hails 'unique' Wable legacy" />
<meta name="description" content="John Smith claims beautiful football is the main legacy of Akhil Wable's decade at the club. " />
<link rel="image_src" href="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />
As shown, title contains the
preview title, description contains
the preview summary and image_src
contains the preview image. Please
make sure that none of the content
fields contain any html markup because
it will be stripped out. For
consistency's sake, please use the
tag to provide text data for
the preview, and the tag for
any source urls.
The title and summary tags are the
minimum requirements for any preview,
so make sure to include these two.
Related
How can I add "metadata" (green and red lines on the picture below) to a website? Probably the name metadata isn't correct, sorry for that.
I already tried modifying the following tag in the index.html page, but am not sure if this is the right way of doing it:
<meta name="description" content="some content...">
Do you have any suggestions on how to do this?
In HTML, there are at least two tags which allow you to control how your website appears in search results.
The first one is the title tag of your page. This title will of course appear in your browser tab, but it will also appear in the search results. Make sure to use an accurate title which reflects the content of your page. The <title> tags should be placed inside de <head> tags of your HTML code.
The second one is the meta description tag, which will show the user a short description of the content. This is the part marked with a green line in your question. The <meta> tag also goes in the head tags of your HTML code, usually just after the <title> tag.
Example of the mentioned tags with correct syntax:
<head>
<title>Stack Overflow - Where Developers Learn, Share, & Build Careers</title>
<meta name="description" content="A public platform building the definitive collection of coding questions & answers..."/>
</head>
The part marked with a red line in your question, is what we call sitelinks. They are generated automatically and depend of your website's navigation, the titles and headers you used, etc. This may sound obvious, but you should use different titles and descriptions for each individual page.
The way sitelinks are generated and how you can improve them is very well explained on Google's page about sitelinks.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I have some questions about meta tags.
At the top of a tab, where the title shows up, there's an image next to it. How do I add an image like that?
The <meta name="keywords" content="HTML, Questions," meta tag, does it still have any purpose?
Why is <meta name="author" content="Firstname Lastname" Used? What purpose does it serve?
How do you use <meta viewport>?
Looks like you didn't do a great research because all these answers can be found easily.
Metatags info: https://github.com/joshbuchea/HEAD#meta
1- It's called favicon.
2- Used to has a purpose but didn't more.
3- Crawlers like Google, Facebook, or even a custom, may identify the Author of the page accordingly to that information.
4- https://stackoverflow.com/a/14775557/2873889
In the past, meta tags were used by search engines to index web pages based on title, description, and even keywords. However, certain websites started overusing them, cramming popular keywords in the hope of getting better search results. Google, recognizing this, announced that they don’t use meta keywords or descriptions in their search algorithms for ranking purposes.
Coming onto one attribute at a time:
1) Description- Search engines generates a description from the content attribute.
When you share URL of your webpage to other websites or platforms, let's say you share a blog on Whatsapp, Whatsapp will show the description along with your URL to the users. You can try it on your own.
2) charset="UTF-8" - sets the encoding of your webpage. Another encoding is UTF-16.
3) Keywords- Keywords help other applications to know more about your website. Although many websites still use the keywords value of the name attribute, Google doesn't consider this in its search ranking algorithm or when displaying search results.
4) Author- You can set the author of a page using author attribute.
5) - Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
Meta tags can be used to perform the task of HTTP headers like redirection and refresh also.
To know more about meta tags you can refer to this link https://www.sitepoint.com/meta-tags-html-basics-best-practices/
Q1). You need to have a favicon . You can get more detail here: https://www.w3.org/2005/10/howto-favicon
Q2). Yes, meta tags are still useful.
Q3). This just states who created the webpage.
Q4). Check out https://www.w3schools.com/css/css_rwd_viewport.asp
Lastly, just look at w3schools.com and codeacademy.
You can add a favicon by using <link rel="icon" href="#" sizes="16*16"> and insert the image you want for your favicon in the href.
The keyword tag is used for search engine indexing.
The author tag is used to identify the creator of the content.Yes,both of them are still useful.
<meta name="viewport> is used to set the size of the visible portion of the document in different browsers:
<meta name="viewport" content="width=device-width, intial-scale=1.0">
I have a website, and I need to figure out a few things:
Where to put the meta tag?
How many meta tags do I need?
Can I put all the webpages in 1 meta tag or do I need multiple?
As for my website, there are over 1000 things you can do, so an example would be "John is looking for a poker player." On my website, if you go under board games and click cards, you could add a classify OR if you do a search, you can look for members who play poker/card games. This is one example of thousands of activities.
My question is: do I need to create 1 meta tag for keywords of poker, friend, activity to show up on an SEO, OR can I create 1 meta tag that will hold 1000+ keywords on 1000+ different topics?
My website was created in C#. I'm confused when I google meta tags on youtube and find them written out in notepad as an html.
You should not use Meta tag for keywords !
The Keywords Meta Tag
A long time ago in a galaxy far, far away, the “keywords” meta tag was
a critical element for early search engines. Much like the dinosaurs,
this tag is a fossil from ancient search engine times.
The only search engine that looks at the keywords anymore is
Microsoft's Bing – and they use it to help detect spam. To avoid
hurting your site, your best option is to never add this tag.
Or, if that's too radical for you to stomach, at least make sure you
haven't stuffed 300 keywords in the hopes of higher search rankings.
It won't work. Sorry.
If you already have keyword meta tags on your website, but they aren't
spammy, there's no reason to spend the next week hurriedly taking them
out. It's OK to leave them for now – just take them out as you're
able, to reduce page weight and load times.
Check this link for crucial parts for your SEO !
This website can give you points in which your SEO is not good !
Also it will be good to see how fast your website is responding. You can check this link
Last 2 links give you detail information how you should fix the problems which you have.
Meta tags should be in <head>, css also in <head>, javascript if it possible at the end of the <body>.
You can check google web speed test
EDIT:
Here is meta description and title. If your website is written on C# this is probably located in Site.Master !
<head>
<title>Not a Meta Tag, but required anyway </title>
<meta name="description" content="Awesome Description Here">
</head>
1) Meta tags are always in <head> element of page.
2) It depends on what metadata you want to add to your page.
3) You will need 1 <meta> tag for each meta type. So 1 tag will be enough for your keywords.
You can find more about meta tag on W3Schools.
I have a website that has deeplinking enabled. When I try to add the image link to facebook, it comes up with one of three images to choose from for the share.
I have the proper meta tags added for opengraph. However, because I want the ability to share any one of the 40 images on the site, is it ok to add an
<meta property="og:image" content="thumbnail_image" />
tag for every image, or is there a wiser to to solve this issue?
Additionally, should I/should I not add individual description tags, too?
You can add multiple og:images, but the share dialog will only show three of them to the user to chose from.
And if you have individual pieces of content those of course should have an individual descriptions as well (where appropriate).
More information on general Open Graph tags can be found here: https://developers.facebook.com/docs/opengraph/creating-custom-stories#objecttypes-properties and here: http://ogp.me/
First off I want to say that I wasn't really sure where to post this but it is very much programming related. If it is in the wrong spot I apologize and please let me know where I should post it instead.
When sharing an article on a friends wall, facebook will grab a thumbnail of the article. How do they always get the right thumbnail from articles?
It doesn't grab the logo img element of of http://www.nytimes.com/2010/06/07/world/asia/07convoys.html?hp for example but rather grabs the correct image element that corresponds with the article.
I'm looking to do something similar and was wondering of a good way to parse the html to find the image given this example. Thanks.
Actually, Facebook's way of finding thumbnails isn't so magical. It searches for a set of <meta> and <link> tags which specify which title, description, and image to use.
If it cannot find any of the <meta> and <link> tags it is looking for, it basically asks the user to choose whichever <img> tag fits.
In the case of the NY Times, it uses the following:
<meta name="thumbnail" content="whatever.jpg" />
Facebook recommends you use a <link> tag instead for the thumbnail.
<meta name="title" content="title" />
<meta name="description" content="description " />
<link rel="image_src" href="thumbnail_image" />
Source: Facebok Share/Specifying Meta Tags
They don't always grab the correct image, even though there's certainly some good logic in place.
In many cases, I've seen a list of thumbnails to choose from, meaning Facebook's parser considered them equally relevant.
I would guess they (probably among other things) look at the dom structure and find images close to content that looks "shareable".
UPDATE:
After some empirical testing, it seems that image dimensions play a big role. Images too small and too wide are not considered thumbnails. If your logo is the right size though, expect it to show up as one of the thumbnails. Try sharing something on http://www.e24.se for example.
These are just guesses as I don't have any knowledge of Facebook's internal operations, but if I were parsing thumbnails from a page I would consider several things:
Size of the image, as previously stated
Relevant keywords in the href or alt attributes
Location of the <img> tag on page, the closer to relevant content the better, but may not always work for complicated layouts
Absence of ad-related keywords in the <img> tag or nearby tags (doubleclick comes to mind)
Also, as far as I know the Facebook meta tags are fairly new, so my guess is that the link page scraper is still grabbing images the hard way ;) However if you're running a site and want Facebook to grab the right information when it scrapes your pages I highly suggest implementing them.