{"id":61778,"date":"2024-06-04T15:13:13","date_gmt":"2024-06-04T09:43:13","guid":{"rendered":"https:\/\/2thenew.online\/blog\/?p=61778"},"modified":"2024-06-06T17:12:37","modified_gmt":"2024-06-06T11:42:37","slug":"open-graph-tags-in-aem","status":"publish","type":"post","link":"https:\/\/2thenew.online\/blog\/open-graph-tags-in-aem\/","title":{"rendered":"Open Graph Tags in AEM"},"content":{"rendered":"

Introduction<\/b><\/h2>\n

Open Graph tags are defined by the og: meta property and found in the <head> tag. <\/span>In simpler terms, Open Graph tags control how the website\u2019s content appears when shared. <\/span>These tags represent what title, description, and image social media platforms should use when the content is shared.\u00a0<\/span><\/p>\n

Why are Open Graph tags important?<\/b><\/h2>\n

1. Better Appearance <\/b>–<\/span> OG Tags convert the page URLs into eye-catching \u201ccards\u201d when shared.<\/span><\/p>\n

2. Information at a glance-<\/b>They will give a brief idea to the viewers what the content is about.<\/span><\/p>\n

3. Higher CTRs- <\/b>Enhanced previews significantly increase Click Through Rates. For example, posts with images get more engagement.<\/span><\/p>\n

Some Examples of OG Tags<\/b><\/h2>\n

1. og:title\u00a0 \u2014 <\/b>This tag indicates the title of the page.<\/span><\/p>\n

2. og:url\u00a0 \u2014<\/b> Indicates the permanent canonical URL.<\/span><\/p>\n

3. og:image\u00a0 \u2014 <\/b>The URL of the image linked with the page.<\/span><\/p>\n

Code to create the custom og meta tags in AEM:<\/b>\u00a0<\/b><\/h2>\n

Let me explain the steps. For this, you must have basic knowledge of AEM.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 1. Inside cq:dialog of all the templates used in your project create the fields for Og:title, Og:image and Og:URL as shown below:<\/span><\/p>\n

\"Blog<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a02. Inside head.html of page component fetch the value of these fields as shown below:<\/span><\/p>\n

\"Blog<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a03. The model looks like as shown below:<\/span><\/p>\n

\"Blog<\/p>\n

\"Blog<\/p>\n

\"Blog<\/p>\n

\"Blog<\/p>\n

\u00a0 \u00a0 \u00a0 4. Code for Constants.java is as below:<\/span><\/p>\n

\"Blog<\/p>\n

\u00a0 \u00a0 \u00a05.\u00a0 PathUtils Code is as below:<\/span><\/p>\n

\"Blog<\/p>\n

Conclusion<\/h1>\n

After completing the steps mentioned above, you can verify by clicking on “View Page Source.”<\/p>\n

\"conclusion\"<\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction Open Graph tags are defined by the og: meta property and found in the <head> tag. In simpler terms, Open Graph tags control how the website\u2019s content appears when shared. These tags represent what title, description, and image social media platforms should use when the content is shared.\u00a0 Why are Open Graph tags important? […]<\/p>\n","protected":false},"author":1824,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":308,"footnotes":""},"categories":[5868],"tags":[4847,5924],"class_list":["post-61778","post","type-post","status-publish","format-standard","hentry","category-adobe","tag-aem","tag-opengraphtags"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t