Description and sitelinks below website name in search results - html

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.

Related

Meta Tags in Website

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.

Recommended Syntax for HTML meta title and description?

I've been told that adding a different meta title and description per page is strongly recommended.
What is the correct way to do this? Is there a recommended naming convention for the title? I assume there's a standard for this rather than whatever the developer decides is best.
At first I would recommend to sign in to the Google Webmaster Tools. There you sign in your website and get a lot of information and resources to improve the information structure of your website.
Here you have an article from Google about the topic: Meta tags that Google understands
About the meta name="description" element:
<meta name="description" content="A description of the page" />
This tag provides a short description of the page. In some situations this description is used as a part of the snippet shown in the search results.
About the title element:
<title>The Title of the Page</title>
While technically not a meta tag, this tag is often used together with the "description". The contents of this tag are generally shown as the title in search results (and of course in the user's browser).
Also think about implementing structured data, see schema.org.
I think it is important these days to have a web standards based, clean and semantically rich HTML markup for your whole page.
title
(Note that the title element is not a "meta title".)
HTML5 defines that the title element should identify documents "even when they are used out of context". So for a typical website, you should always include the site name in the title.
For usability reasons, it’s most of the time a good idea to specify the page name before the site name (e.g., page name – site name).
HTML5 doesn’t recommend a delimiter for separating the page name from the title.
meta-description
HTML5 defines that the description metadata name is used to "describe the page". The value must be "appropriate for use in a directory of pages, e.g. in a search engine".
As the homepage typically represents the whole site, it’s appropriate to describe the site (instead of the page) in the homepage’s meta-description.

Proper use of og meta tags on website

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/

Difference between meta tag content and tag content?

What is the difference between meta tag content and the title ?
I know title will be displayed in the title bar and the meta tag will not be displayed and its for w3 stadards we are just adding it in our html code ...but why we should do that ? what are the uses of it ? I wish to know detailed and clear explanation about it ...anyone please clear me up
What is the difference between
<title>Title of the website</title>
AND
<meta name="keywords" content="This website is for online shopping" />
The <meta name="keywords" ...> element has been deprecated (it was never appropriate for what the <meta> tag was designed for anyway). From Wikipedia's article on Meta element:
Search engines began dropping support for metadata provided by the meta element in 1998, and by the early 2000s, most search engines had veered completely away from reliance on meta elements. In July 2002, AltaVista, one of the last major search engines to still offer support, finally stopped considering them.[2]
Meta elements in HTML can be used for a myriad of things, including linking to other files, like stylesheets or scripts, providing additional information about the content of the page, providing additional instructions to the browser, and much, much more.
A good place to start would be the Wikipedia entry on meta elements and branch out from the links and sources provided there.

How Does Facebook Know What Image To Parse Out of An Article?

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.