When taking a look at the html for this site: http://www.3lateral.com/
I saw that all of the images like logos, apple-touch-icons, mstiles etc. were all located “on the site” like so:
<meta name="twitter:image:src" content="http://www.3lateral.com/img/seo-logo.png">
<meta name="msapplication-TileImage" content="http://www.3lateral.com/mstile-144x144.png">
How did they do this and how can I do this myself?
…Also it seems that some are located under a url path like the twitter one (/img/seo-logo.png), how is this connected?
2
Answers
just copy your image in the site directory with specific name that you want , then set the path that started with your site address / image directory / image name
e.g : if you copy your images in image directory of your site path , set the src of image tag >
like : ( src=”http://www.yourdomain.com/image/yourImageName.png” )
http://www.3lateral.com/img/seo-logo.png
is called the absolute path and/img/seo-logo.png
is called the relative path(relative to your current file being called from).You can access the same image using both. Meaning
http://www.3lateral.com/img/seo-logo.png
is the same as/img/seo-logo.png
.Usually it is considered best-practice to use relative URLs, so that your website will not be bound to the base URL of where it is currently deployed. For example, it will be able to work on localhost, as well as on your public domain, without modifications.
In your case, say you have an
img/
folder & acss/
folder in your root directory. Now when refering to an image in theimg/
folder from saymain.css
in yourcss/
folder. You can use:www.yourdomain.com/img/thisimage.png
(finds the path from root ie.www.yourdomain.com
)OR
../img/thisimage.png
(this finds the path of the image from yourmain.css
instead of root directly).../
means “travel one directory up from the current”