DEV Community: Prakriti Anand

OG Tags: Everything You Need to Know

Prakriti Anand — Thu, 05 Oct 2023 04:16:29 +0000

Social media is key to sharing and promoting web content.
OG Tags help you control how your content appears when shared on social media.
In this blog post, we'll dive into OG Tags and how to use them to enhance your website's social presence.

What Are Open Graph Meta Tags?

OG Tags are HTML meta tags that provide structured information about web pages for social media.
They allow you to control how your shared links appear on social platforms like Facebook, Twitter, and LinkedIn.

OG Tags include metadata such as the title, description, image, and type of content.

How to use Open Graph Meta Tags?

To use Open Graph Meta Tags, you need to add them to the <head> section of your HTML code.

Basic Open Graph Meta Tags

og:title - The title of your web page.
og:type - The type of content on your web page, such as "article", "blog post", or "website".
og:image - The URL of an image that you want to represent your web page on social media.
og:description - A brief description of your web page.
og:site_name - The name of your website.
og:url - The canonical URL of your web page.
og:locale - The language code of your web page.

Twitter meta tags

twitter:title - The title of the page.
twitter:description - A short description of the page.
twitter:image - The image to be displayed when the page is shared.
twitter:card - The type of Twitter Card to use. The most common value is "summary", but there are other types of Twitter Cards available.
twitter:site - The Twitter handle for your website.
twitter:creator - The Twitter handle for the author of the page (username).

Example of Open Graph and Twitter meta tags in HTML:

<head>
  <meta property="og:title" content="My Awesome Blog Post" />
  <meta property="og:description" content="This is a really great blog post about all sorts of awesome things." />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <meta property="og:url" content="https://example.com/my-awesome-blog-post" />
  <meta property="og:type" content="article" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:site_name" content="My Awesome Blog" />

  <meta property="twitter:title" content="My Awesome Blog Post" />
  <meta property="twitter:description" content="This is a really great blog post about all sorts of awesome things." />
  <meta property="twitter:image" content="https://example.com/image.jpg" />
  <meta property="twitter:card" content="summary" />
  <meta property="twitter:site" content="@myawesomeblog" />
  <meta property="twitter:creator" content="@janedoe" />
</head>

Reference: Visit more og meta tags

Conclusion

Open Graph Meta Tags (OG Tags) are snippets of code that you can add to your website to control how your content appears when it is shared on social media. OG Tags provide social media platforms with information such as the title, description, and image of your content. This information is then used to generate a preview of your content when it is shared on social media.

"Hello, World!" in Different Programming Languages: From Easy to Hard

Prakriti Anand — Mon, 25 Sep 2023 12:23:08 +0000

Programming is a fascinating journey and it all starts with printing "Hello, World!" on the screen. This simple program is the first step for many into the world of coding. Let's explore how to write this program in various programming languages, starting from the easiest to the more complex ones.

The Easy Ones

Ruby

Ruby is known for its simplicity and readability. Here's how you can print "Hello, World!" in Ruby:

puts "Hello World!"

Python

Python is another language famous for its simplicity. Here's the Python version:

print("Hello World!")

JavaScript

JavaScript, the language of the web, also makes it easy:

console.log("Hello World!");

Intermediate Languages

Swift

Swift, Apple's language for iOS development, has a straightforward syntax:

import Swift

print("Hello, World!")

PHP

PHP, a popular language for web development, requires a bit more code:

<?php
    echo "Hello World!";
?>

Kotlin

Kotlin, a statically typed language from JetBrains, is gaining popularity for Android development:

fun main(args : Array<String>) {
    println("Hello, World!")
}

The Hard Ones

C

C is a powerful language that provides low-level access to memory and is widely used in system programming:

#include<stdio.h>

int main()
{
  printf("Hello World!");
}

C++

C++, an extension of C with additional features like classes and objects, is used in game development and system software:

#include <iostream>

int main()
{
    std::cout << "Hello World!";
    return 0;
}

LISP

LISP (LISt Processing) is one of the oldest high-level programming languages and has a unique syntax:

(defun hello-world ()
  (format t "Hello World"))

(hello-world)

Java

Java, a class-based object-oriented language, is widely used in enterprise environments:

class HelloWorld{
  public static void main(String[] args){
    System.out.println("Hello World!");
  }
}

C

C#, a language developed by Microsoft, is primarily used in Windows desktop applications and game development with Unity:

using System;
namespace HelloWorldApp {
    class Program {
        static void Main(string[] args) {
            Console.WriteLine("Hello World!");
        }
    }
}

No matter which language you choose, writing your first "Hello, World!" program is an exciting milestone. Happy coding!

4 CSS tricks, You should try!

Prakriti Anand — Thu, 21 Sep 2023 15:15:21 +0000

1. Balancing Text

With CSS's new text-wrap feature, centering headers is now simpler across all devices.

h1 {
  text-wrap: balance;
}

text-wrap is a new property in CSS, so I recommend checking browser compatibility before using it in production.

2. Text Indent

The CSS text-indent property indents the first line of a paragraph to improve readability.

p {
  text-indent: 0.25rem;
}

3. Truncating Text

Sometimes, to prevent large sentences from making a UI look bad, we can simply truncate the text using CSS.

.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

4. Fixed number of lines (Line Clamp)

Occasionally, it’s necessary to limit the number of lines displayed. Use this simple technique to achieve it.

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Number of Lines */
}

It's over!

Thanks for reading 👋