Social Media Meta Tags
Overview
Open graph meta tags are used to support the Facebook and other social media crawlers with relevant information including a title, description, preview image, and locality.
"Without these Open Graph tags, the Facebook Crawler uses internal heuristics to make a best guess about the title, description, and preview image for your content. Designate this info explicitly with Open Graph tags to ensure the highest quality posts on Facebook." - developers.facebook.com
Prepare
- Read: The Essential Meta Tags for Social Media - css-tricks.com
- Read: A Guide to Sharing for Webmasters - developers.facebook.com
- What are Facebook Open Graph properties for the Church's main
website at https://www.churchofjesuschrist.org for the title and description?
This content can change at any time. If you are not seeing the same content, do not worry as the principle and application are the important part of this exercise.
Click for Answer
You can view these properties by navigating to the site and viewing the source or you can use a sharing debugger to provide a formatted report.
og:title| The Church of Jesus Christ of Latter-day Saintsog:description| Official website of The Church of Jesus Christ of Latter-day Saints. Find messages of Christ to uplift your soul and invite the Spirit.og:image| https://assets.ldscdn.org/0d/7b/0d7bb93794eb11ecb29ceeeeac1ee20345ef0d4f/church_logo.png
or it may be change to something like this https://brightspot-assets.churchofjesuschrist.org/dims4/default/f1954e9/2147483647/strip/false/crop/1932x1017+0+0/resize/1280x674!/format/jpg/quality/90/?url=https%3A%2F%2Fassets.churchofjesuschrist.org%2F31%2F72%2F3172a0b72dcf43c62af65bf2e514b50b9900b2fe%2Fjesus_christ_healing_people.jpegog:url| https://churchofjesuschrist.org
Activity Instructions
Watch: Open Graph - Web Dev Simplified
- Open your course home page from the previous week's assignment, index.html.
- Add these Open Graph meta properties to the document:
- title - Your content should reflect the title of the document.
- type - The value
websitewould be accurate. - image - Provide an absolute URL to an image that reflects your home town/area.
- url - Provide the canonical URL for your page.
- Test and review your Open Graph meta information by using the Meta for Developers tool on developers.facebook.com.
Make sure any warnings are fixed.
You can ignore any missing property indicators about using a Facebook App Id,
e.g., fb:app_id
Seek Mastery
Full credit consideration or "A" level work is defined as representing outstanding understanding, application, and integration of subject material and extensive evidence of original thinking, skillful use of concepts, and ability to analyze and solve complex problems. Students should demonstrate diligent application of Learning Model principles, including initiative in serving other students.
- Research and apply the social media share previews on X (Twitter) to your course home page.
Hint: X Developer Platform