Ranking higher in search results is very important for any website’s, productivity and reach. These days modern search engines use algorithms and scrape the sites for relevant data points, then these data points are processed to result in a relevance number aka the page ranking. Though these days the algorithms which search engines use are very advanced and are able to generate the context of the page by the page content, but still there are some key points which should be followed by the developers to enable a higher page ranking on search results along with better presentation of search results on the pages. Loklak Search is also a web application thus it is very important to get these crucial points correct.
So the first thing which search engines see on a website is their landing or index page, this page gives information to the search engine what the data is about in this site and then search engines follow links to to crawl the details of the page. So the landing page should be able to provide the exact context for the page. The page can provide the context using the meta tags which store the metadata information about the page, which can be used by the search engines and social sites
- The first and foremost important tag is the charset tag. It specifies the character set being used on the page and declares the page’s character encoding which is used by browsers encoding algorithm.
- It very important to determine a correct and compatible charset for security and presentation reasons.
- Thus the most widely used charset UTF-8 is used in loklak search.
- The mobile browsers often load the page in a representative viewport which is usually larger than the actual screen of the device so that the content of the screen is not crammed into small space.
- This makes the user to pan-zoom around the page to reach the desired content. But this approach often undesirable design for the most of the mobile websites.
- For this at loklak search we use
<meta name="viewport" content="width=device-width, initial-scale=1">
This specifies the relation between CSS pixel and device pixel. Here the relationship is actually computed by the browser itself, but this meta tag says that the width for calculating that ratio should be equal to device width and the initial-scale should be 1 (or zoom should be 0).
- The meta description tag is the most important tad for the SEO as this is the description which is used by search engines and social media sites while showing the description of the page
<meta name="description" content="Search social media on Loklak Search. Our mission is to make the world’s social media information openly accessible and useful generating open knowledge for all">
- This is how this description tag is used by google on the Google Search
Social Media meta tags
- The social media meta tags are important for the presentation of the content of the page when the link is shared in these sites.
- As the link sharing is fairly simple in social media the links should always be able to show some context about the page in a visual form without the need to click the link actually.
- For this purpose Facebook and Twitter read special kinds of meta tags to read and display information regarding the page whenever the link is shared.
- For twitter cards data we have used
<!-- Twitter Card data --> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@fossasia"> <meta name="twitter:title" content="Loklak Search"> <meta name="twitter:description" content="Search social media on Loklak Search. Our mission is to make the world’s social media information openly accessible and useful generating open knowledge for all"> <meta name="twitter:image" content="http://loklak.net/assets/images/cow_400x466.png">
This specifies the card to be of type summary card. There are many types of cards which are provided by twitter and can be found here.
- The facebook also uses the similar approach but with different meta tag names for their graph API.
<!-- Open Graph data --> <meta property="og:title" content="Loklak Search"> <meta property="og:type" content="website"> <meta property="og:url" content="http://loklak.net"> <meta property="og:image" content="http://loklak.net/assets/images/cow_400x466.png"> <meta property="og:description" content="Search social media on Loklak Search. Our mission is to make the world’s social media information openly accessible and useful generating open knowledge for all"> <meta property="og:site_name" content="Loklak Search">
Presentation of the content in the web plays a crucial role in reach and usage of the application. Wider reach and high usage are the core goals of Loklak Search project so that open data reaches the masses. To achieve this we are slowly moving for better sharing experience for the loklak pages using standard techniques. By using these we hope that we will be able to reach a wider audience, thus delivering the open content to masses.
Resources and Links
- Meta tag reference MDN
- Character encodings W3C
- Viewport meta tags MDN reference
- Pixel is not a pixel blog by Peter-Paul Koch
- Twitter card types developer documentation
- Open graph protocol reference
- Loklak search GitHub Repo
You must log in to post a comment.