What Are Open Graph Tags And Why It Matters?

[{"selector":"#anim-1fb99309-7ba7-4019-9a11-35f756823fe7","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2697e39c-3cec-4815-8684-ee69cfb6896b","keyframes":{"transform":["translate3d(-100.24272%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a5792396-3ec0-466b-8cdb-f98ff1f8f06f","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5a5fa1fe-d003-4691-9d31-08d4dc5df023","keyframes":{"transform":["translate3d(133.79313%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Today, we are going to learn about open graph tags, it's uses, and tools to generate open graph tags for your website.

[{"selector":"#anim-b59556a4-54f7-4156-a0d9-5a707a745eb1","keyframes":{"opacity":[0,1]},"delay":300,"duration":1600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d5afbf00-c310-47d2-a4eb-8bcf3b1deb6b","keyframes":{"opacity":[0,1]},"delay":600,"duration":1600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2f393968-f97e-4d67-91da-26f02f851702","keyframes":{"opacity":[0,1]},"delay":450,"duration":1600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-91b07d30-c45b-4a1f-834a-1f7e86910e82","keyframes":{"transform":["translate3d(-829.54555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":400,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f95b9f0a-f19d-47cf-bf51-1caff9865a5b","keyframes":{"opacity":[0,1]},"delay":400,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4bb54c73-2ed8-4ee0-b536-805e532698f5","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":400,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

01

[{"selector":"#anim-eb39776b-5261-4237-98a1-1b281db334d5","keyframes":{"transform":["translate3d(-114.24051%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4b6d39bd-5b29-44e1-8fdf-75a0da4479c3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ddf34647-320c-40a3-ba70-bb5a847b6fe8","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Open graph tags are meta tags that are used to control how your website appears when it is shared on social media platforms like Facebook, Twitter, and LinkedIn.

02

[{"selector":"#anim-661dfea1-0629-4dbf-b18d-8c6a52bca52d","keyframes":{"transform":["translate3d(-114.24051%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-be50e5db-d60b-4f3e-b5fe-ac14faf4fdc6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fb2dd3fc-f975-4dfb-b3a7-f36b8d46aa7f","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Open Graph is a universally accepted protocol. It generally works with any website. For this reason, it's a vital tool to utilize!

03

[{"selector":"#anim-adb83112-e779-4b5e-95aa-71789283d963","keyframes":{"transform":["translate3d(-114.87342%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9895aa45-f078-4f6e-9455-bc3ec6b13ebd","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-550406f4-fbac-4d6d-a1fb-d428195a8113","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

04

[{"selector":"#anim-6981950a-3790-4563-a3aa-b9b25d49e218","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3307b154-18d6-48cd-99aa-7fa41b4571f2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-18fda2be-e203-4e00-b233-96236074ca32","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

4.1

[{"selector":"#anim-f3b2e0e1-cb21-467d-959f-7b18671e2282","keyframes":{"transform":["translate3d(-115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-92fcbcba-93fe-4bab-871f-65d54524b37e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-38d7c89f-d1bf-4f33-87f4-c372f3684903","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-0dfd6b87-a9dc-4eec-8519-c0990541e4ef","keyframes":{"transform":["translate3d(-138.58268%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2bfe9848-7576-4c62-b378-5a706be49b23","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dcf0925c-486c-4737-a65d-60854a39fd2c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Types of Open Graph Tags

4.2

[{"selector":"#anim-4215bc4c-72fc-4fbc-8356-85275d10e679","keyframes":{"transform":["translate3d(-115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bd8fb0e6-fba1-491d-a9dd-3ce934f44450","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-112edf3e-02bb-46fb-b631-ec64bf7286a6","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-bf67ef4f-f902-4d08-9295-bc5cdc57b426","keyframes":{"transform":["translate3d(-143.70079%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0c38d543-76fa-4abe-81ba-76c86e8e3de2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8e8f8571-0b7b-4d0d-89b3-ac5b1d21cdff","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Types of Open Graph Tags

4.3

[{"selector":"#anim-e70e90bb-d943-4ac2-8c08-338a9911fd7a","keyframes":{"transform":["translate3d(-115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d9d57e3d-0e44-448a-866d-ed671fbbea4d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-41451d95-fdd0-4353-8bfc-29db5b6aca04","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-b24b5bac-d0ec-4060-8273-5e098a3f08e1","keyframes":{"transform":["translate3d(-143.70079%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-69eb7e55-dc74-44b3-b7f0-a8b1352014c6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dde93efd-52af-4f9e-8e00-50b2999578f2","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] The URL meta tag defines the URL of the page. It's the content's permanent ID. Changing the URL will break the link shared on social media networks. Types of Open Graph Tags

4.4

[{"selector":"#anim-46b561bf-5f2a-4f05-a3b7-007405519767","keyframes":{"transform":["translate3d(-115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8960e973-e016-47e9-a2c6-b49b4693dafb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9d993754-33cf-45bf-b732-84924434c3ee","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-f865d39f-7120-4cca-bce8-29e4e32c2aa2","keyframes":{"transform":["translate3d(-143.70079%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f836915f-c8ea-4556-acc8-1790d3487684","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dc765b1c-2951-490e-9a94-8387b2c0a492","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Types of Open Graph Tags

4.5

[{"selector":"#anim-acc1abd4-eb72-4d95-9c13-fc5ac275c829","keyframes":{"transform":["translate3d(-115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-33a1f7be-8582-4de8-85e8-48806f36bfe7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-99ea9e3d-60cd-433d-aa4b-9ad4872c0a00","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-5fc740de-4c19-4d03-a865-0a2397b141bb","keyframes":{"transform":["translate3d(-143.70079%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8bad40d8-e865-4fd4-912e-b4afc5c53c04","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d2c95021-2b9f-497d-ad0c-05c68cf70d85","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] The og:image tag is used to specify the image of your website. It's the image that will be displayed when your website is shared on social media platforms. Types of Open Graph Tags

4.6

[{"selector":"#anim-5a25c8c6-7c5b-4165-88cf-2cc6b7b6ba85","keyframes":{"transform":["translate3d(-115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d0afbcbf-6f50-48ab-a3d3-fca8ac2d2c5a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0f9957ec-94d1-418a-822f-68496e3a98ea","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-7280888a-8083-4b2c-928c-e45a6d3182cd","keyframes":{"transform":["translate3d(-143.70079%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2cc36bc7-9caa-4311-96bb-f8c21d946f5b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1e075427-5d22-4e8f-b42c-c222c1c2d87a","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] The og:video tag is used to specify the video of your website. It's the video that will be displayed when your website is shared on social media platforms. Types of Open Graph Tags

4.7

[{"selector":"#anim-988a30a4-cf7e-441a-a7ed-20ecd80eade4","keyframes":{"transform":["translate3d(-115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-89544a7c-954d-4953-b5ad-105446165a38","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b8e2b924-00cb-4395-91eb-ae4d9f6b7e49","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-df5a1f19-1406-48aa-b95a-204f0ff2dc36","keyframes":{"transform":["translate3d(-143.70079%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e462b269-8b8b-43e0-9e94-fedbbac8d7d1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-24787857-59c7-4be4-9cb2-baec4bc8ffd0","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] The og:locale tag is used to specify the language of your website. Types of Open Graph Tags

5

[{"selector":"#anim-81672111-1906-495d-b970-66e66b508a99","keyframes":{"transform":["translate3d(-114.87342%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d1d2358b-56e3-4766-a957-2539df80eb2d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0f8ccee6-0f4e-4e84-be35-6ce82cdd1c8c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] You can generate open graph images for your website by using Open Graph Image Generator . This tool allows you to generate both open graph images and tags in one click. Learn more

Thanks a lot for being with us. Have a great day!

[{"selector":"#anim-d175cba0-c71a-47a6-a96c-5ca8de71e0d6","keyframes":{"opacity":[0,1]},"delay":500,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4a010c83-e1c6-454f-8085-e0f3be3e04ad","keyframes":{"transform":["translate3d(118.36734%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":500,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Dev. Bishwas Bhandari Yellow Browser Happy StoryMaking!

What Are Open Graph Tags And Why It Matters?

Today, we are going to learn about open graph tags, it's uses, and tools to generate open graph tags for your website.

See

earn-y things

the

01

What are open graph tags?

02

Is open graph that important?

03

Do open graph tags matter, why?

It gives you the freedom to change the preview of your links when they are shared on social media platforms. Which means, you can make your links look more attractive and appealing.

04

Types of Open Graph Tags

There are 8 types of open graph tags: - og:title - og:description - og:url - og:type - og:image - og:viedo - og:site_name - og:locale

4.1

og:title

The og:title tag is used to specify the title of your website by social media platforms.

4.2

og:description

The og:description tag is used to specify the description of your website.

4.3

og:url

4.4

og:type

The og:type tag is used to specify the type of your website. It can be website, article, music album, video, etc.

4.5

og:image

4.6

og:video

4.7

og:locale

5

How to generate open graph images for your article or site?

Thanks a lot for being with us. Have a great day!